Responsive Web Design - Er þetta framtíðin eða bara buzz orð?

Stutt kynning um "aðlagaða vefhönnun" sem ég hélt á "SuperNörda kynningu" sem við höldum annan hvern fimmtudag hjá TM Software.

Transcript

2. Responsive Web Design Hannes Agnarsson Johnson hannes hjá tmsoftware.is
3. Hvað er responsive web design?
4. Responsive Web Design Einnig kallað: Adaptive Web Design, Fluid, Flexible, Progressive Enhancement... "Aðlöguð vefhönnun" Aðlaga að hverjum notanda
5. Dæmi • http://bostonglobe.com/ • http://mitt.vis.is/ • http://samsyn.is/ • http://stjornur.is/
6. http://seesparkbox.com/
7. http://foodsense.is/ Fleiri dæmi: http://designmodo.com/responsive-design-examples/
8. Af hverju er sniðugt að hafa vefsíður responsive?
9. *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/
10. 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
11. Hvernig? Hvað þarf að huga að?
12. Hvernig? Hvað þarf að huga að? • Fluid grid • Flexible media • Media queries
13. 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
14. Flexible media img { max-width: 100%; } - nema fyrir IE6 Meira: http://www.alistapart.com/articles/fluid-images/
15. 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; } }
16. Hvað þarf að huga að? Responsive advertising: http://www.markboulton.co.uk/journal/comments/responsive- advertising
17. Tæki, tól og meiri fróðleikur
18. 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-Images An Experiment with Mobile-First Images that Scale Responsively & Responsibly
19. 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 /
20. Bækur http://www.abookapart.com/products/responsive-web-design http://easy-readers.net/books/adaptive-web-design/
21. Takk fyrir :) Hannes Agnarsson Johnson hannes hjá tmsoftware.is @officialstation Myndir: http://www.flickr.com/photos/officialstation/