the blueprint of a presentation I did at KaHo Sint-Lieven recently. I tried to make them understandable to people that didn’t attend the presentation by including these dull looking quick notes. The presentation is a slightly updated version of http://www.slideshare.net/bytte/responsive-web-design-10389263
nor the most intelligent, but the one most responsive to change.” — CHARLES DARWIN we all agree that the best design is to be found in nature and nature is full of responsive design
did. 2. Use media queries to optimize for smaller mobile screens. SPOILER: DON’T DO IT THIS WAY! using this workflow, older IE’s will always show the desktop version, which is ok as they’re used on desktops
{ /* make it white & 1 column */ } @media (min-width:381px) and (max-width:480px) { /* make it white & 2 columns */ } @media (min-width:481px) and (max-width:800px) { /* make it black & 2 columns */ } /* all the way up... */ DON’T DO IT THIS WAY! it led to cluttered, repeated, less-readable and hard-to-maintain CSS code
from now on white & 2 columns */ } @media (min-width:800px) { /* from now on 3 columns */ } @media (max-width:1100px) { /* from now on black & 4 columns */ } /* all the way up... */ the CSS is much cleaner, easier to read, easier to maintain and there’s just less code
day in Gent"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width:400px)"> <source src="large.jpg" media="(min-width:800px)"> </picture> slowly as in really slow, might take months/years until we can use something like this
bytte
chiemitaki
visional_engineering_and_design
cyberagentdevelopers
thebogheart
masayofff
kei141
ashapiro
joshtang
zakkerooni
junkifurukawa
sms_tech
pedronauck
paigeccino
jacobian
thekraken
irinanazarova
philnash
afnizarnur
soudai
scottboms
keavy
honnibal
jcasabona
