Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
 
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ð?

694 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
  • Be the first to comment

  • Be the first to like this

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/

×