Denise R. JacobsRich Web Experience 2011

30 November 2011

Welcome to the Age of

ResponsiveDesign

The Age of TwitterI am:

@denisejacobs

Our fine event is:# Rwx2011 @NoFluff

And I will wax philosophic on:#arwd

Author, Speaker & Trainer,Pan-Creative

A true renaissance woman

http://www.flickr.com/photos/aarronwalter/4629078087/

Web design comes of age

The Age of What?The web is experiencing a kind of renaissance: a

blossoming of growth and possibilities.

This is due to a confluence of 4 technical factors:

Code

http://www.flickr.com/photos/s4xton/2425718415/

Browsers

Devices

Access

http://www.marksson.com/my-two-cents/ipad-the-perfect-holiday-companion/attachment/ipad-on-the-beach

How did we get here?

http://www.flickr.com/photos/barretthall/205175534/

Evolution of the web

http://commons.wikimedia.org/wiki/File:Geological_time_spiral.png

http://www.flickr.com/photos/ivyfield/4486938457/http://mikenu.deviantart.com/art/ASCII-Mona-Lisa-74823952?q=sort%3Atime+favby%3Amadlabsstudio&qo=3

1992to

1996

The World Wide What? Era

The general populace

http://www.flickr.com/photos/rossaroni/4134794550/

HTML: 1991

CSS: 1996

CSS: Usage of the time

http://www.flickr.com/photos/peregrinari/2050430721/

Browsers: pre-1993

Browsers: 1993

Browsers: 1992-1997

• 1994: Netscape Navigator• 1995: Internet Explorer• 1996: Opera

Design: very first website

Web Design: circa 1996

http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css

Computers: circa 1996

1992-96: Mobile Phones

http://www.flickr.com/photos/krystiano/4136881193/

Mobile Phones: 1992-1997

Environment: 1992-1996

http://www.flickr.com/photos/stewf/393637161/

1997 to

2001

Dot.com Bubble Boom Insanity Era

HTML: 1997-2001

• Beginning1997: HTML 3.2• End of 1997: HTML 4.0• Late 1999: HTML 4.01• 2000: XHTML 1.0

CSS: 1998

CSS 2 introduced• Not yet full Recommendation status,

remains Candidate Recommendation to present.

Browsers: IE v. NN

http://www.flickr.com/photos/ivyfield/4486938457/

Design: circa 1997

Design: circa 2000

Design: Flash websites, circa 2000

Computers: 1999

http://www.flickr.com/photos/pigpogm/1951963648/

Mobile Phones: 1997-2000

Access: circa 2000

http://www.flickr.com/photos/net9/122099189/

2002 to

2007

Era of Web Standards and the Beginnings of Ubiquity

HTML: 2002-2007

• HTML 4.01 and XHTML hold steady as the favorite versions

• XHTML 1.1 released (but noone seems to care)

CSS: 2002-2007

• WaSP started in 1998, but started to take off around 2002-3

• Browser support still patchy – need mad troubleshooting skills

• 2005: Development of CSS3 begins

Browsers: 2002-2007

• 2001: our favorite browser, IE6 is released• 2002: Netscape dies• 2003: Safari grows with Mac market• 2004: Firefox rises from the ashes

Design: circa 2003

Design: circa 2005

Mobile Phones: 2002-2007

• 2002: Bl/Crackberry• 2003: Treo combines PDA with Smartphone• 2004: Motorola Razr released

2008 &

2009

Modern Era

HTML & CSS: 2008-2009

• Web Standards widely promoted and embraced

• 2008: Development of HTML5 begins

Browsers: 2008-2009

Design: 2008-2009

http://www.flickr.com/photos/ivyfield/4486938457/

Computers: 2002-2007

Mobile Phones: 2007

Environment & Access: 2008-9

http://www.flickr.com/photos/yourdon/3475417696/

Present

http://www.flickr.com/photos/stormbirdstudio/4025884624/

We’re lucky!

http://www.flickr.com/photos/stn1978/3459778423/

Improved Code: Easier Implementation

http://naomiatkinsondesign.com

Improved Browsers

Great devices

http://www.flickr.com/photos/indyplanets/5693073535/

Can access anywhere

http://www.flickr.com/photos/yourdon/3869874855/

So much figured out

http://www.flickr.com/photos/argonne/4435608143/

From this...http://www.flickr.com/photos/ivyfield/4486938457/

Technical confluence

Foundations for this...http://www.flickr.com/photos/ivyfield/4486938457/

Design confluence

Emotional Design“Aesthetically pleasing objects appear to users to be more effective by virtue of their sensual appeal and an affinity the user feels for the object based on a formation of an emotional connection to it. “

- Wikipedia (with liberal edits)

Experience Design“…Designing products, processes, services, events, and environments with a focus placed on the quality of the user experience….Experience design is driven by consideration of the moments of engagement between people and [objects], and the ideas, emotions, and memories that these moments create.”

- Wikipedia (with liberal edits)

“Social Design”Design of sites (and applications) that encourage connection and interaction of users and build community.

Responsive Web DesignWeb design that anticipates and responds to

the users’ needs, delivering a quality experience and content to a user appropriate to their device and display size.

The Age of Responsive Design

Becoming Responsive

http://www.flickr.com/photos/gc_photography/4662878037/

Responsive Devices?

http://www.flickr.com/photos/ivyfield/4486938457/

Responsive Devices!

“Responsive web design isn’t something that can be tacked on to the end of an existing workflow. It requires a different mindset, one that considers the medium from the outset.”

- Jeremy Keith

“Responsive enhancement”http://adactio.com/journal/1700/

Brain shift

http://www.flickr.com/photos/tza/3214197147/

Mobile first

“When you practice Mobile First, you’re making a commitment to the content. Everything that’s displayed on the page deserves to be there. Mobile First really means Content First.”

- Ethan Marcotte,

“The Responsive Designer’s Workflow”

3 Components of Responsive Design1) Flexible grid2) Flexible images3) Media Queries

http://www.flickr.com/photos/boklm/486646798/

“Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.”

- Jeremy Keith

“Responsive enhancement”http://adactio.com/journal/1700/

Flexible grid

http://simplegrid.info

Flexible & FluidSize everything in ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for height

Flexible Images: Foregroundimg {max-width: 100%;}

http://www.flickr.com/photos/ivyfield/4486938457/

Flexible Images: BackgroundUse background-position to selectively

crop your backgrounds

http://www.flickr.com/photos/ivyfield/4486938457/

@media queries@media queries allow the web developer to serve

different styles based on the device and it’s orientation

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

The Goal

http://www.flickr.com/photos/bhenak/2664682330/

Avoid this

desktop stylesheet + media queries= mobile site

=“Switchy” layout

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Instead this

mobile stylesheet + media queries= desktop site

=Truly responsive

http://ri.gov

What to do with this new perspective?

Challenge yourself

http://www.flickr.com/photos/danielsilliman/4489863368/

Don’t do what you’re used to doing

http://www.flickr.com/photos/jamiecampbell/446301597/

Leverage the current confluences

To produce

http://mailchimp.com

Or

http://twitter.com

Or

http://morphix.si

Or evenhttp://html5readiness.com

Or

http://www.anderssonwise.com/

Which is actually

http://www.anderssonwise.com/

Future

http://www.flickr.com/photos/steffe/351623859/

Widen perspective

http://instagr.am/p/EvW6C/

Moving forward

We need to build sites that can be accessed by anyone, anywhere, and on any device.

1) http://www.flickr.com/photos/dcmetroblogger/4731961032/, 2) http://www.flickr.com/photos/dcmetroblogger/3861295403/, 3) http://www.flickr.com/photos/rosipaw/5308977361/, 4) http://www.flickr.com/photos/kiwanja/3169449999/

If you start thinking differently

http://www.flickr.com/photos/winni3/3363376446/

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.

Web design is responsive design, Responsive Web Design is web design, done right.”

- Andy Clarke“I don’t care about responsive design”

http://www.malarkey.co.uk/blog/about/i_dont_care_about_responsive_web_design/

Responsive =Responsible

http://www.flickr.com/photos/mazgrp/2050810720/

Why we’re here

http://www.flickr.com/photos/br1dotcom/4034902679/

And

http://www.flickr.com/photos/cristeenq/2360468936/

For(crowd)

http://www.flickr.com/photos/laubarnes/5449810357/

Technical and Design confluences

http://www.flickr.com/photos/dougbelshaw/4168593521/

“Design to where the Web will be, and not where it is.”

Faruk Ates,

“Technology And The Web”

“Be the web designer and create the interfaces that you want to see in the world, for all of the world.”

Denise Jacobs

“The Age of Responsive Design”

The present and future

http://www.flickr.com/photos/cdoublew/2663137942/

The Age of Responsive Design

http://www.flickr.com/photos/slicktrix/2738150928/

Resources

http://www.flickr.com/photos/ed_gaillard/4453249094/

Linkshttp://www.delicious.com/denisejacobs/

responsivewebdesign

http://www.delicious.com/denisejacobs/aeed

Books

http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg

The book on Responsive Web Design

Responsive Web Design

by Ethan Marcotte

CSS3 and Media Queries

Hardboiled Web Design

by Andy Clarke

Responsive Design and solid CSS

Handcrafted CSS

by Dan Cederholmwith Ethan Marcotte

Flexible Layouts

Flexible Web Design

by Zoe MickleyGillenwater

CSS Troubleshooting

The CSSDetective

Guideby Denise Jacobs

Holistic Web Design

Interact with Web Standards: A

Holistic Approach to Web Design

How to find me

DeniseJacobs.com

denise@denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs

Photo by Aaron Walter