Upload
hannes-johnson
View
571
Download
1
Embed Size (px)
DESCRIPTION
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.
Citation preview
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/