Responsive Web Design - Er þetta framtíðin eða bara buzz orð?
-
Upload
hannes-johnson -
Category
Technology
-
view
572 -
download
1
description
Transcript of Responsive Web Design - Er þetta framtíðin eða bara buzz orð?
Responsive Web Design
Hannes Agnarsson Johnsonhannes hjá tmsoftware.is
Hvað er responsive web design?
Responsive Web Design
Einnig kallað: Adaptive Web Design, Fluid, Flexible, Progressive Enhancement...
"Aðlöguð vefhönnun"
Aðlaga að hverjum notanda
Dæmi
• http://bostonglobe.com/ • http://mitt.vis.is/• http://samsyn.is/• http://stjornur.is/
http://seesparkbox.com/
http://foodsense.is/
Fleiri dæmi: http://designmodo.com/responsive-design-examples/
Af hverju er sniðugt að hafa vefsíður responsive?
*Heimildir: http://www.mediapost.com/publications/article/120590/ (Gartner)http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html
Af hverju er sniðugt að hafa vefsíður responsive?Fleiri munu nálgast Netið í gegnum mobile tæki heldur en desktop eftir 1 eða 2 ár*
Þarft ekki að viðhalda 2 (eða fleirum) verkefnum (project-um)
Kostur (t.d. út frá SEO) að það sé bara ein slóð fyrir sama efnið - en ekki t.d. www.tmsoftware.is/nyjasta-frettin/ og svo m.tmsoftware.is/nyjasta-frettin/
Af hverju er sniðugt að hafa vefsíður responsive?
Aðgengi (e. accessibility) - allir eru með "sérþarfir" eftir aðstæðum hverju sinni
"giving the user a optimised experience without them having to visit a different URL"http://blog.responsivenews.co.uk/post/12642980168/axes-of-responsive-design
Framtíðin: <10% batterýhleðsla - koma í veg fyrir óþarfa
Hvernig? Hvað þarf að huga að?
Hvernig? Hvað þarf að huga að?
• Fluid grid• Flexible media• Media queries
Fluid grid
Ekki nota px fyrir stærðir. Nota frekar % eða em.
#page { margin: 40px auto; padding: 0 1em; max-width: 61.75em; /* 988px / 16px = 61.75em */}
h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */}
Meira: http://www.alistapart.com/articles/fluidgrids
Flexible media
img { max-width: 100%;}
- nema fyrir IE6
Meira: http://www.alistapart.com/articles/fluid-images/
CSS3 og media queries<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
Líka hægt að skilgreina þetta í CSS skjalinu - sparar http köll að hafa bara eitt skjal:/* =Small screen typography*/@media screen and (max-width:659px) { #contact button { font-size: 1em; } strong { font-size: 1.25em; } aside h1, h2 { font-size: 1.75em; } #top .return { font-size: 0.875em; }}
Hvað þarf að huga að?
Responsive advertising:http://www.markboulton.co.uk/journal/comments/responsive-advertising
Tæki, tól og meiri fróðleikur
Tól
http://fittextjs.com/FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
http://fitvidsjs.com/A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
http://stuffandnonsense.co.uk/projects/320andup/‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
https://github.com/filamentgroup/Responsive-ImagesAn Experiment with Mobile-First Images that Scale Responsively & Responsibly
Greinar
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids
http://www.alistapart.com/articles/fluid-images/
http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
http://blog.responsivenews.co.uk/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
Bækur
http://www.abookapart.com/products/responsive-web-design
http://easy-readers.net/books/adaptive-web-design/
Takk fyrir :)
Hannes Agnarsson Johnsonhannes hjá tmsoftware.is@officialstation
Myndir: http://www.flickr.com/photos/officialstation/