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/