Responsive Web Design Hannes Agnarsson Johnson hannes hjá tmsoftware.is
Hvað er responsive web design?
Responsive Web Design <ul><li>Einnig kallað: Adaptive Web Design, Fluid, Flexible, Progressive Enhancement... </li></ul><u...
Dæmi <ul><ul><li>http://bostonglobe.com/   </li></ul></ul><ul><ul><li>http://mitt.vis.is/ </li></ul></ul><ul><ul><li>http:...
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?
Af hverju er sniðugt að hafa vefsíður responsive? <ul><li>Fleiri munu nálgast Netið í gegnum mobile tæki heldur en desktop...
Af hverju er sniðugt að hafa vefsíður responsive? <ul><li>Aðgengi (e. accessibility) - allir eru með &quot;sérþarfir&quot;...
Hvernig? Hvað þarf að huga að?
Hvernig? Hvað þarf að huga að? <ul><ul><li>Fluid grid </li></ul></ul><ul><ul><li>Flexible media </li></ul></ul><ul><ul><li...
Fluid grid <ul><li>Ekki nota px fyrir stærðir. Nota frekar % eða em. </li></ul><ul><li>#page { </li></ul><ul><li>     marg...
Flexible media <ul><li>img { </li></ul><ul><li>   max-width: 100%; </li></ul><ul><li>} </li></ul><ul><li>  - nema fyrir IE...
CSS3 og media queries <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>  media=&quot;s...
Hvað þarf að huga að? <ul><li>Responsive advertising: </li></ul><ul><li>http://www.markboulton.co.uk/journal/comments/resp...
Tæki, tól og meiri fróðleikur
Tól <ul><li>http://fittextjs.com/ </li></ul><ul><li>FitText makes font-sizes flexible. Use this plugin on your fluid or re...
Greinar <ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul><ul><li>http://www.alistapart.com/arti...
Bækur <ul><li>http://www.abookapart.com/products/responsive-web-design </li></ul><ul><li>http://easy-readers.net/books/ada...
Takk fyrir :) Hannes Agnarsson Johnson hannes hjá tmsoftware.is @officialstation Myndir:  http://www.flickr.com/photos/off...
Upcoming SlideShare
Loading in …5
×

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

650 views
617 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
650
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Jæja! Responsive web design. Heitasta buzz-orðið í vefbransanum í dag. Svo heitt að miðar á responsive web design workshop sem SVEF heldur eftir nokkra daga seldust upp á 24 tímum. Þetta verður bara örstutt kynning á þessu efni. Þeir sem fara á workshop-ið geta kannski haldið aðra kynningu þar sem er farið nánar í þetta ;)
  • Aðlaga að hverjum notanda - að tæki, skjástærð, vafra/forrits, nethraða... Aðlaga vefinn að notandanum, eða s.s. tækinu sem notandinn er að nota - til að gera upplifun notandans skemmtilegri (meira notendavænni). Responsive web design er ekki bara mobile vs. desktop - fólk er með misstóra skjái + það eru ekki allir sem láta vafrann fylla út skjáinn. Einföld útskýring/dæmi: Desktop er 3 dálkar, spjaldtölva er 2 dálkar, farsími er 1 dálkur.
  • Það hjálpar t.d. upp á leitarvélabestun þegar fólk fer að pósta þessu á Twitter, Facebook, bloggum o.s.frv. SEO - ekki að dreifa &amp;quot;link juice&amp;quot; - sameina kraftana á eina slóð - meiri ávinningur
  • Ekki bara fyrir fatlaða/fólk með “sérþarfir”. Við erum í raun öll með sérþarfir eftir aðstæðum - hvar við erum, hvaða tæki við erum að nota þessa stundina o.s.frv. BBC forritararnir tala líka um að í framtíðinni getum við kannski séð ef notandinn er bara með 10% batterýhleðslu eftir þá slökkvum við á ýmsu óþarfa - setjum kannski svartan bakgrunn til að spara orku sem fer í skjáinn. Eins væri líka hægt að greina nethraða notandans - ekki hlaða upp t.d. óþarfa myndir...
  • Fluid grid, flexible media, and media queries.
  • Vera með mismunandi skilgreiningar eftir tækjum og skjástærðum.
  • Boston Globe gerir þetta - bara einn auglýsandi á hverri síðu - auglýsingin færist... Þá þurfa auglýsendur líka að vera með auglýsingar sem passa fyrir mobile (HTML5) - s.s. ekki Flash.
  • Responsive Web Design - Er þetta framtíðin eða bara buzz orð?

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

    ×