responsive web time machine 2
TRANSCRIPT
Disclaimers…
“The best of man is like water, Which benefits all things, and does not contend with them, Which flows in places that others disdain, Where it is in harmony with the Way.”- Tao Te Ching; 8 Water - around 6th century BC
RESPONSIVE WEB TIME MACHINE 2Bob Baty-Barr, Senior Developer – Segal Company
Let’s set the viewportYes, the presentation is even responsive
<meta name="viewport" content="width=device-width, initial-scale=1" />
Now we know where we areLet’s take a look at where we came from…
<html><head><title>This is responsive web design</title></head><body><h1>Headline</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec ultricies sapien. Quisque scelerisque tortor a sem tempus, eget mattis diam porttitor. </p>
<p><a href="next-evolution.html">Next evolution</a></p></body></html>
Fully Responsive…That markup will fill any container.
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
“The web's content must be built to travel across vast networks to unknown devices and browsers.”- Jeffery Veen, 1997
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.’ ”- John Allsopp, “A Dao of Web Design” - 2000
<html><head><title>This is responsive web design</title></head>
<body><table>
<tr><td><h1>Headline</h1></td></tr><tr><td><p>Web page text here.</p></td></tr>
</table></body></html>
Who remembers photoshop slicing?
Spacer GifWhat about the container…
The era of pixel perfect…Images for text, absolute position, oh my…
Let’s look at some numbers…Connected? Not sure, but interesting…
Best viewed at 800 x 600• 768 pixel break point?
Best viewed at 1024 x 768• Another breakpoint at 992
“Accept that your website won’t be pixel-perfect. I made this website pixel-perfect for Google Chrome, iPad, and iPhone, but I decided to not support IE 8. Unless you have an unlimited budget, you cannot make your website pixel-perfect in all browsers. Like I said in the beginning: the web is too diverse. Pick your battles and move on.”- Alex Cican, alexcican.com
“We have to get past the idea that it’s possible, using static imagery, to see exactly how a website will look. Responsive sites might render in hundreds of slightly different ways, and we can’t possibly show them all. We need to find new ways to show design and UX to clients–ways that don’t depend on fixed layouts.”- Mark Eberman, User Experience Architect
Finally a response…Responsive web design that is…
“Responsive web design is a methodology in which the design adapts in a flexible manner to the users viewport. It is presently the only way to guarantee a good user experience across the full range of viewports and devices. No other design approach can provide the means to correctly respond to the users behaviour and environment.”- James South, Developer Responsive BP and umbraco community member
“Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!”- Stephen Hay, BDConf 2012, right here in Orlando.
A quick look at frameworks…Why write it yourself if you don’t have to?
Bootstrap
Foundation
Responsive BPDeveloped by James South, Umbraco User
Understand the past…To make better sense of the future
Be like water my friends…