"Responsive Web Design, Mobile First and Progressive Enhancement in action"


www.leolanese.com

@leolaneseltd

26th June 2012

Slides: www.leolanese.com/scotlandjs

Design is not just what it looks like and feels like. Design is how it works.
– Steve Jobs http://www.flickr.com/photos/marthinshl/7263883898/

- Who am I?

Leo Lanese. Web Developer

- What do I do?

javaScript, HTML5 and CSS

- What are we going to chat about?

* RWD, MF and PE. Why do we need all these methodologies together?
* I would like to share my experience in implementing these methodologies
* We are going to chat about some new ideas and how these are going to change the way we are thinking and working

@leolaneseltd

Facing new requirements from the business:

AC: As a user, I want to be able to use a "Web site" to connect "the Web" from my "Desktop" http://www.flickr.com/photos/karthikc/333796870/
What is "The Web", "Web site" and my "Desktop"?

We could consider "the Web" as the "internet service" ,
the "Web Sites" is the "interface"
and the "Desktop" is the "device"



"the Web" is the "internet service"
"Web Sites" is the "interface"
"Desktop" is the "device"

On your marks!
Desktops Web Sites
Laptops Web Sites
Mobiles Web Sites
Tablets Web Sites
e-books Web Sites
Future friendly ?

(because they will be asking next week)

Watches Web Sites
TVs Web Sites
Windows Web Sites
Kitchen Web Sites
Glasses Web Sites

Oh mama! ...

The number of devices are growing out of control! http://www.flickr.com/photos/11136492@N02/3721448864

Even worse. Now we have different teams working on different Web Sites for different interfaces connected to the service

so ... more devices = more resources and developing time

The question is:
How can we develop for all current and future devices?


lock
Let's re-think the way like we are developing!
The only One Web revolution!

Responsive Web Design is the new revolution that changes everything, eliminating the need for a different development phases for each new gadget on the market

hippy http://www.flickr.com/photos/misterno/5787984204

Responsive Web Design, give us the chance to create only one Web


One Web capable of flowing through all platforms, devices and brands and those that are about to come


Just one Web, one project and one team

http://www.flickr.com/photos/generalnoir/391009102
Let's see Responsive Web Design in action...
Responsive Web Design components:

1- A flexible, grid-based layout


eg: font sizes relative units


eg: 960px, flexible grids

2- Flexible images and media


eg: max-width flexible images ... it's a hack?


eg: max-width container


eg: BBC News responsive images (C/S side)


eg: Get involved: W3C proposal Responsive images (C side)

http://uk.ign.com

3- media queries


eg: media queries


eg: media queries working


Performance is the key, don't feel like we need to create 20 complex media queries ... just 3: "S, M and L" and always start from "S"

Let's simplify the media queries into:
Small, Medium, Large





size http://www.flickr.com/photos/meetrajesh/6972883401/
Now we need to start from smallest and simplest layout
Mobile First
Mobile First allow as to be work directly with the Content.
Soon 'Content' will be everywhere. Most gadgets will be connected.
Our content needs to be fluid and ready to understand them

http://www.flickr.com/photos/rosh/246187583/
Content needs to be fluid, like water, and media-queries should be considered as limiting borders tetris
When water flows into a larger or smaller part of a river it instantly adapts to the shape and size of it's environment

tetris

Now let's freeze the idea of formless water: Let's make some ice! tetris
Empty your mind, be formless, shapeless like water...

Bruce_Lee @DrummerHead

tetris
If we're fluid we'll end up with same content on same size on different devices, we're delivering a good but not the best UX to those capable of more.

Content needs to adapt to different user environments. We need an adaptation paradigm http://www.flickr.com/photos/ntr23/187248039 burbujas
Graceful degradation or Progressive Enhancement

Both are about how well a site works on different browsers and devices

The difference is where they place their emphasis and how this affects the workflow.

GD differs from PE because GD is the path from complexity to simplicity, whereas PE is the path from simplicity to complexity

http://www.flickr.com/photos/lonelycoo/3313530719/
Graceful degradation

Focuses on building the website for the most advanced/capable browsers. Older browsers are expected to have a sub-standard, but acceptable user-experience


Testing for support in older browsers, is not cover or relegated to the end of the list of priorities

Progressive Enhancement

Bases on "fault tolerance's" and Enphasis on the content. Not browsers

Allows us to access to our content, regarless of its capabilities

Allows us to feature detect, adapt and keep up with the latest environments and capabilities

Generates Progressive user-experiences

We start with the lowest common denominator as our baseline and we add layers on top

PE is a more appropriate paradigm because is focus on Content. Adding layers progressively to provide the user with the best they can get from their device using feature detection


http://www.flickr.com/photos/theilr/4229575296/
Feature detection gives us the chance to be indifferent to the environment and content should be enhanced based on the capabilities of the device.
We will end up with similar but not identical appearances of the same content in different environments

eg: border IE and WebKit

http://www.flickr.com/photos/treehouse1977/496088319/
How can we detect the capabilities of the environment?

Modernizr at help!

Working with fallback or emulation mode (polyfills)

CHROME 18

    
<html class="js flexbox flexbox-legacy canvas canvastext webgl no-touch geolocation
            postmessage websqldatabase indexeddb hashchange history
            draganddrop websockets rgba hsla multiplebgs backgroundsize
            borderimage borderradius boxshadow textshadow opacity
            cssanimations csscolumns cssgradients cssreflections csstransforms
            csstransforms3d csstransitions fontface generatedcontent video
            audio localstorage sessionstorage webworkers applicationcache
            svg inlinesvg smil svgclippaths cookies cssresize cssscrollbar
            no-devicemotion deviceorientation fullscreen json">

IE 8

    
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage
            no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets
            rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow
            no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients
            no-cssreflections csstransforms no-csstransforms3d no-csstransitions
            fontface generatedcontent video audio localstorage sessionstorage no-webworkers
            no-applicationcache no-svg inlinesvg smil svgclippaths">

Modenizr feature list Modenizr feature list

Let's see it all in action

js or not js?. javaScript as a feature.

Device features html5test ringmark canIuse

Working fallback: Modernizr .svg Conditional CSS .svg

yepNope + Modernizr yepNope + Modernizr

Study Cases

Study Case: bostonglobe.com 2010 bostonglobe.com 2012

Study Case: BBC News.com BBC homepage

Study Case: SONY

Study Case: World Wildlife Fund Earth Hour

http://www.flickr.com/photos/marthinshl/7263883898/
Content first is like a river,
which is passing through Responsive Web Design's various shapes
Progressive Enhancement tells us what features to manage to improves the UX

"Thanks!"



26th June 2012

Slides: www.leolanese.com/scotlandjs


Let's stay in touch:@leolaneseltd


Thanks to www.flickr.com and it's photographers for the photos. www.creativecommons.org