Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Welcome tothe Age ofResponsive  Design      Denise R. JacobsRich Web Experience 2011       30 November 2011
The Age of Twitter           I am:         @denisejacobs      Our fine event is:    # Rwx2011 @NoFluff And I will wax phil...
A true renaissance woman                                                        Author, Speaker & Trainer,                ...
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 ...
How did we get here?       
Evolution of the web                            ...
The World Wide What? Era          1992           to          1996
The general populace     
HTML: 1991
CSS: 1996
CSS: Usage of the time    
Browsers: pre-1993
Browsers: 1993
Browsers: 1992-1997• 1994: Netscape Navigator• 1995: Internet Explorer• 1996: Opera
Design: very first website
Web Design: circa 1996
Computers: circa 1996
1992-96: Mobile Phones    
Mobile Phones: 1992-1997
Environment: 1992-1996 Bubble Boom     Insanity Era        1997         to        2001
HTML: 1997-2001•   Beginning1997: HTML 3.2•   End of 1997: HTML 4.0•   Late 1999: HTML 4.01•   2000: XHTML 1.0
CSS: 1998CSS 2 introduced• Not yet full Recommendation status,  remains Candidate Recommendation to  present.
Browsers: IE v. NN   
Design: circa 1997
Design: circa 2000
Design: Flash websites, circa 2000
Computers: 1999 
Mobile Phones: 1997-2000
Access: circa 2000
Era of Web Standards and the   Beginnings of Ubiquity            2002             to            2007
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  tro...
Browsers: 2002-2007•   2001: our favorite browser, IE6 is released•   2002: Netscape dies•   2003: Safari grows with Mac m...
Design: circa 2003
Design: circa 2005
Mobile Phones: 2002-2007 • 2002: Bl/Crackberry • 2003: Treo combines PDA with Smartphone • 2004: Motorola Razr released
Modern Era   2008    &   2009
HTML & CSS: 2008-2009• Web Standards widely promoted and  embraced• 2008: Development of HTML5 begins
Browsers: 2008-2009
Design: 2008-2009  
Computers: 2002-2007
Mobile Phones: 2007
Environment & Access: 2008-9
We’re lucky!     
Improved Code: Easier Implementation   
Improved Browsers
Great devices
Can access anywhere
So much figured out
From this...     
Technical confluence
Foundations for this...         
Design confluence
Emotional Design“Aesthetically pleasing objects appear to usersto be more effective by virtue of their sensualappeal and a...
Experience Design“…Designing products, processes, services, events,and environments with a focus placed on thequality of t...
“Social Design”Design of sites (and applications) thatencourage connection and interaction of usersand build community.
Responsive Web DesignWeb design that anticipates and responds to the users’ needs, delivering a quality experience and con...
The Age of Responsive Design
Becoming Responsive     
Responsive Devices?     
Responsive Devices!
“Responsive web design isn’t something  that can be tacked on to the end of  an existing workflow. It requires a  differen...
Brain shift    
Mobile first
“When you practice Mobile First, you’re making a commitment to the content. Everything that’s displayed on the page deserv...
3 Components of Responsive Design1) Flexible grid2) Flexible images3) Media Queries            
“Instead of thinking in terms of pixel  perfection, we should be thinking of  proportion perfection.”                     ...
Flexible grid      
Flexible & FluidSize everything in ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for...
Flexible Images: Foregroundimg {max-width: 100%;}           
Flexible Images: BackgroundUse background-position to selectively crop your backgrounds                        http://www....
@media queries@media queries allow the web developer to serve different styles based on the device and it’s orientation   ...
The Goal 
Avoid this desktop stylesheet + media queries            = mobile site
=“Switchy” layout  
Instead this  mobile stylesheet + media queries            = desktop site
= Truly responsive           
What to do with this new perspective?
Challenge yourself       
Don’t do what you’re used to doing         
Leverage the current confluences
To produce   
Or even
Which is actually          
Widen perspective          
Moving forwardWe need to build sites that can be accessed by anyone, anywhere, and on any device.      1) http://www.flick...
If you start thinking differently            
“Today, anything that’s fixed and  unresponsive isn’t web design, it’s  something else. If you don’t embrace the  inherent...
Responsive = Responsible        
Why we’re here       
Technical and Designconfluences
“Design to where the Web will be, and not where it is.”                          Faruk Ates,           “Technology And The...
“Be the web designer and create the  interfaces that you want to see in the  world, for all of the world.”                ...
The present and future        
The Age of Responsive Design        
Links  responsivewebdesign  aeed
The book on Responsive Web DesignResponsive Web      Design by Ethan Marcotte
CSS3 and Media QueriesHardboiled Web    Design by Andy Clarke
Responsive Design and solid CSS Handcrafted       CSSby Dan Cederholm    with Ethan    Marcotte
Flexible LayoutsFlexible Web   Designby Zoe Mickley  Gillenwater
CSS Troubleshooting   The CSS  Detective    Guideby Denise Jacobs
Holistic Web DesignInteract with Web   Standards: AHolistic Approach  to Web Design
How to find                  ...
Próxima SlideShare
Cargando en…5

Access The Age of Responsive Design

6.918 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto