SlideShare a Scribd company logo
Responsive

   2012
   WordCamp Kansas City

   Justin Kopepasah
Responsive
An approach to web design that coordinates
design and development around a user’s
behavior and environment based on screen
size, platform and orientation.


Responding to your user’s needs.
Responsive
Flexible Grids




                 (Smith)
Responsive
Flexible Images & Media
Responsive
Flexible Images & Media




                          (Tabone, 2012)
Responsive
Media Queries
“A media query consists of a media type and zero or more expressions
that check for the conditions of particular media features. Among the
media features that can be used in media queries are ‘width’, ‘height’,
and ‘color’. By using media queries, presentations can be tailored to a
specific range of output devices without changing the content itself.”
(W3C, 2012)

                                                               Can be used with CSS or
                                                               stylesheets within the
                                                               head.

                                                               Are more commonly used
                                                               as CSS.
Why do we need
responsive design?
Mobile Usage Grows
                         Desktop                           Mobile

 100%




  75%




  50%




  25%




   0%
April, ‘11 (5.21%)   July, ‘11     October, ‘11 (6.55%)   January, ‘12   April, ‘12 (9.58%)




                                                                                   (StatCounter,
                                                                                   2012)
Mobile Usage Grows
                Usage


20%




15%                            16.1%




10%

                        8.5%

5%
                 4.3%


         1.6%
0%0.7%
  2009   2010   2011    2012   2013




                               (StatCounter,
                               2012)
Current Usage




                          Loads of these visitors
                          are trying to view the
                          schedule.




(StatCounter, 2012)
Current Usage
             Worldwide


            Mobile
            10.14%




                      Desktop
                      89.86%

                                    Loads of these visitors
                                    are trying to view the
                                    schedule.




(StatCounter, 2012)
Current Usage
             Worldwide                 Dance Studio


            Mobile
            10.14%                 Mobile
                                   22.09%




                                                      Desktop
                      Desktop                         77.91%
                      89.86%

                                     Loads of these visitors
                                     are trying to view the
                                     schedule.




(StatCounter, 2012)
Current Usage
             Worldwide                 Dance Studio              Personal


            Mobile                                              Mobile
            10.14%                 Mobile                       7.59%
                                   22.09%




                                                      Desktop
                      Desktop                         77.91%         Desktop
                      89.86%                                         92.41%

                                     Loads of these visitors
                                     are trying to view the
                                     schedule.




(StatCounter, 2012)
But Justin, 10% is
such a low number
to worry about.
You’re right.
Why worry.




                (Britt, 2005)
You’re right.
Why worry.
 00.09% - Fire




                 (Britt, 2005)
You’re right.
Why worry.
 00.09% - Fire




 00.005% - Airplane
                      (Britt, 2005)
You’re right.
Why worry.
 00.09% - Fire
                      00.0017% - Tornado




 00.005% - Airplane
                                    (Britt, 2005)
You’re right.
Why worry.
 00.09% - Fire
                      00.0017% - Tornado

 0.0012% - Lightning Strike


 00.005% - Airplane
                                    (Britt, 2005)
You’re right.
Why worry.
 00.09% - Fire
                      00.0017% - Tornado

 0.0012% - Lightning Strike

                      00.001% - Bee Sting
 00.005% - Airplane
                                      (Britt, 2005)
Visitors Don’t
    Come Back




(Equation Research, 2011)
Visitors Don’t
    Come Back
                            22%




                                  78%




(Equation Research, 2011)
10% Loss in Visitors
10% Loss in Visitors
10% Loss in


$$$$$$$$$$ $
10% Loss in


$ $$$$$$$$ $
... and so on.



      Yes. I just used fire in my
      Keynote.
Obviously we need
a mobile friendly
Separate
Mobile
Website                           (Bloomberg Business Week, 2012)




“Good mobile user experience requires a
different design than what's needed to
satisfy desktop users. Two designs, two
sites, and cross-linking to make it all
work.”

                                                    (Nielsen, 2012)
Creates More
Problems...
Creates More
Problems...
-Who decides what content
stays?
Creates More
Problems...
-Who decides what content
 stays?
-Links are difficult to manage.
Creates More
Problems...
-Who decides what content
 stays?
-Links do we considered ‘mobile’
        are difficult to manage.
-What
 devices?
Creates More
Problems...
-Who decides what content
 stays?
-Links do we considered ‘mobile’
        are difficult to manage.
-What
 devices?

-More code/content to manage.
Creates More
Problems...
-Who decides what content
 stays?
-Links do we considered ‘mobile’
        are difficult to manage.
-What
 devices?
-Too many user agents to test.
-More code/content to manage.
Too many
problems...
Responsive
Design.
Responsive
Design.
A design that responds to the needs of the
users.
Responsive
Design.
A design that responds to the needs of the
users.

-Flexible Grid
-Flexible Images & Media
-Media Queries
Flexible Fluid
Grids...
960px
960px




        120px
960px


20px

               120px
For a fixed width design these
pixels would work perfectly.

However, we need to use
percentages.
For a fixed width design these
pixels would work perfectly.

However, we need to use
percentages.
960px




        For a fixed width design these
        pixels would work perfectly.

        However, we need to use
        percentages.
960px




540px



                For a fixed width design these
                pixels would work perfectly.

                However, we need to use
                percentages.
960px



                400px
540px



                For a fixed width design these
                pixels would work perfectly.

                However, we need to use
                percentages.
960px



                400px
540px



                For a fixed width design these
                pixels would work perfectly.

                However, we need to use
                percentages.

        470px
target
          = result
context



                     (Marcotte, 2011)
700   =.
960   7291666666



              (Marcotte, 2011)
72.916666666666
%



                  (Marcotte, 2011)
960px



                400px
540px




        470px
960/960 = 1



                            400/960 = .416666667
540/960 = .5625




         470/960 = .489583333
100%



                   41.666666666666%
56.25%




     48.958333333333%
20px




20px
20/960 = .020833333




20/960 = .020833333
2.0833333333333%




2.0833333333333%
100%


                   41.666666666666%
56.25%

         2.0833333333333%
     2.0833333333333%
     48.958333333333%
Flexible Images
 & Other Media...
max-width: 100%;
            Compatible all the way
            back to IE7.

            Not going to cover IE6.
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Duis mollis,
est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem
nec elit. Curabitur blandit tempus
porttitor. Fusce dapibus, tellus ac
cursus commodo, tortor mauris
condimentum nibh, ut fermentum
massa justo sit amet risus. Vivamus
sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet
fermentum.Donec sed odio dui. Praesent
commodo cursus magna, vel scelerisque
nisl consectetur et. Integer posuere erat a
ante venenatis dapibus posuere velit
aliquet. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Maecenas
faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at
lobortis.
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Duis mollis,
est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem
nec elit. Curabitur blandit tempus
porttitor. Fusce dapibus, tellus ac
cursus commodo, tortor mauris
condimentum nibh, ut fermentum
massa justo sit amet risus. Vivamus
sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet
fermentum.Donec sed odio dui. Praesent
commodo cursus magna, vel scelerisque
nisl consectetur et. Integer posuere erat a
ante venenatis dapibus posuere velit
aliquet. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Maecenas
faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at
lobortis.
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Duis mollis,
est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem
nec elit. Curabitur blandit tempus
porttitor. Fusce dapibus, tellus ac
cursus commodo, tortor mauris
condimentum nibh, ut fermentum
massa justo sit amet risus. Vivamus
sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet
fermentum.Donec sed odio dui. Praesent
commodo cursus magna, vel scelerisque
nisl consectetur et. Integer posuere erat a
ante venenatis dapibus posuere velit
aliquet. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Maecenas
faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at
lobortis.
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Duis mollis,
est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem
nec elit. Curabitur blandit tempus
porttitor. Fusce dapibus, tellus ac
cursus commodo, tortor mauris
condimentum nibh, ut fermentum
massa justo sit amet risus. Vivamus
sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet
fermentum.Donec sed odio dui. Praesent
commodo cursus magna, vel scelerisque
nisl consectetur et. Integer posuere erat a
ante venenatis dapibus posuere velit
aliquet. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet.
Maecenas sed diam eget risus varius
blandit sit amet non magna. Maecenas
faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at
lobortis.
Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Duis mollis,
est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem
nec elit. Curabitur blandit tempus
porttitor. Fusce dapibus, tellus ac
cursus commodo, tortor mauris
condimentum nibh, ut fermentum
massa justo sit amet risus. Vivamus
sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet
fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus
posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere
velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.
Maecenas
faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras
mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at
lobortis.
Let browsers resize
images accordingly.

              Modern browsers have
              the ability to size and
              resize images.

              There is no need to
              declare an image width
              or height.
That little, easy to use
               insert button when
               editing content is the
               devil.




Problem with
WordPress...
That little, easy to use
                               insert button when
                               editing content is the
                               devil.




 Problem with
 WordPress...
<img src="http://example.com/wp-content/
uploads/2012/05/hearts.jpg" alt="Hearts"
title="Hearts" width="1280" height="720"
class="alignnone size-full wp-
image-3520" />
That little, easy to use
                               insert button when
                               editing content is the
                               devil.




 Problem with
 WordPress...
<img src="http://example.com/wp-content/
uploads/2012/05/hearts.jpg" alt="Hearts"
title="Hearts" width="1280" height="720"
class="alignnone size-full wp-
image-3520" />
max-width: 100%;
works with other
media, too!
              img
              embed
              object
              video
Media Queries...
Those fun lines of code
that give you control over
the layout of your content.
Media Queries...
Introduced in CSS 2.1.
Used only for ‘screen’ or
‘print’ queries.

<link rel="stylesheet" type="text/css"
  href="screen.css"
  media="screen" />
<link rel="stylesheet" type="text/css"
  href="print.css"
  media="print" />
Media Queries...
Revamped in CSS3.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width:
  480px)" href="style.css" />

             The query contains two components:
             1. a media type (screen), and

             2. the actual query enclosed within parentheses, containing a
                particular media feature (max-device-width) to inspect,
                followed by the target value (480px).
Media Queries...
Most commonly used in
the stylesheet.

@media screen and (max-device-width:
480px) {
  /* css code goes here */
}                                Some people used
                                        them everywhere,
                                        but I keep mine at
                                        the end.
Media Queries...
Most commonly used in
the stylesheet.

@media screen and (max-device-width:
780px) and (min-device-width: 480px) {
  /* css code goes here */
}                                Some people used
                                        them everywhere,
                                        but I keep mine at
                                        the end.
Recap
Mobile usage is on the rise.
Separate mobile websites are a bust.
Responsive design is the future.
Quiz
What is the formula used to
calculate the exact needed
measurement for creating flexible
fluid grids?
target
          = result
context



                     (Marcotte, 2011)
Q & A...
Acknowledgements.
Credits.
Cites. Et Cetera. Et
Cetera. Week. http://images.businessweek.com/ss/ - Jakob Neilsen. Retrieved 05
Bloomberg Business
2012, from BusinessWeek:
                         (2012). World's Most Influentual Designers

10/02/0201_worlds_most_influential_designers/21.htm

Britt, R. R. (2005, 01 06). The Odds of Dying. Retrieved 05 2012, from LiveScience: http://
www.livescience.com/3780-odds-dying.html

Equation Research. (2011). What users want from mobile. Compuware.

Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.) New York, NY: Jeffery Zeldman.

Nielsen, J. (2012, 04 10). Mobile Site vs. Full Site. Retrieved 05 20, 2012, from Jakob Nielson's
Alertbox: http://www.useit.com/alertbox/mobile-vs-full-sites.html

Smith, N. (n.d.). 960 Grid System. Retrieved 05 2012, from 960 Grid System: http://960.gs/

StatCounter. (2012, 02). Mobile internet usage is doubling year on year . Retrieved 05 2012, from
StatCounter Global Stats: http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-
year-on-year

StatCounter. (2012, 04). Mobile vs. Desktop. Retrieved 05 2012, from StatCounter Global Stats:
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201104-201204

Tabone, C. (2012). 365 PSD. Retrieved 05 2012, from New Youtube Interface: http://365psd.com/
day/2-182/

W3C. (2012, 04 26). Media Queries. Retrieved 05 20, 2012, from W3C: http://www.w3.org/TR/
css3-mediaqueries/
Random Notes
•Do not presume you know what your users want when
 visiting your mobile site.
•Do not presume you know your users broadband
 speeds.
•Test. Test. Test. Purchase devices and also use some
 online testing sites.
•The only thing we know about mobile users is that they
 are on a smaller screen. We cannot presume to know
 what user intent is from that.
•Never strip out content from a device simply because it
 is mobile. If you are telling yourself “This can be
 stripped out for mobile users.”, then you should assess
 if you needed it in the first place.
•Slow load time is a hugh problem.
Read These...
Responsive Web Design - Ethan
Marcotte
19 Articles, Info-Graphics & Research
Publications
http://goo.gl/dXA3s

More Related Content

Similar to Responsive Design

Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
Patrick Crowley
 
Don't Take Your Mobile Device To The Bathroom
Don't Take Your Mobile Device To The BathroomDon't Take Your Mobile Device To The Bathroom
Don't Take Your Mobile Device To The Bathroom
Rob Sawyer
 
Why Publishers Must Go All in on Mobile
Why Publishers Must Go All in on MobileWhy Publishers Must Go All in on Mobile
Why Publishers Must Go All in on Mobile
Digiday
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is Responsive
ZURB
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
David Drucker
 
Shawn Terry - Mobile Presentation
Shawn Terry - Mobile PresentationShawn Terry - Mobile Presentation
Shawn Terry - Mobile Presentation
Shawn Terry
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Lee Roberson
 
Tablet Market Opportunities
Tablet Market OpportunitiesTablet Market Opportunities
Tablet Market Opportunities
Winston Choe
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
Dave Olsen
 
Measuring the Mobile Experience: The Analytics of Handheld UX
Measuring the Mobile Experience: The Analytics of Handheld UXMeasuring the Mobile Experience: The Analytics of Handheld UX
Measuring the Mobile Experience: The Analytics of Handheld UX
Ken Tabor
 
Chris Abbott Going mobile is not simple
Chris Abbott Going mobile is not simpleChris Abbott Going mobile is not simple
Chris Abbott Going mobile is not simple
Incisive_Events
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
DMI
 
Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?
Effective
 
Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?
DetectRight Limited
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
CK Yang
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Oleksii Leonov
 
WWTH 11.0: comScore Presentation
WWTH 11.0: comScore PresentationWWTH 11.0: comScore Presentation
WWTH 11.0: comScore Presentation
Web Wednesday Thailand
 
NASA.gov Metrics 2003 to 2012
NASA.gov Metrics 2003 to 2012NASA.gov Metrics 2003 to 2012
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly websiteLDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
Adido
 

Similar to Responsive Design (20)

Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
Don't Take Your Mobile Device To The Bathroom
Don't Take Your Mobile Device To The BathroomDon't Take Your Mobile Device To The Bathroom
Don't Take Your Mobile Device To The Bathroom
 
Why Publishers Must Go All in on Mobile
Why Publishers Must Go All in on MobileWhy Publishers Must Go All in on Mobile
Why Publishers Must Go All in on Mobile
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is Responsive
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Shawn Terry - Mobile Presentation
Shawn Terry - Mobile PresentationShawn Terry - Mobile Presentation
Shawn Terry - Mobile Presentation
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
 
Tablet Market Opportunities
Tablet Market OpportunitiesTablet Market Opportunities
Tablet Market Opportunities
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
 
Measuring the Mobile Experience: The Analytics of Handheld UX
Measuring the Mobile Experience: The Analytics of Handheld UXMeasuring the Mobile Experience: The Analytics of Handheld UX
Measuring the Mobile Experience: The Analytics of Handheld UX
 
Chris Abbott Going mobile is not simple
Chris Abbott Going mobile is not simpleChris Abbott Going mobile is not simple
Chris Abbott Going mobile is not simple
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?
 
Who's winning the mobile web?
Who's winning the mobile web?Who's winning the mobile web?
Who's winning the mobile web?
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
WWTH 11.0: comScore Presentation
WWTH 11.0: comScore PresentationWWTH 11.0: comScore Presentation
WWTH 11.0: comScore Presentation
 
NASA.gov Metrics 2003 to 2012
NASA.gov Metrics 2003 to 2012NASA.gov Metrics 2003 to 2012
NASA.gov Metrics 2003 to 2012
 
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly websiteLDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
LDD Southern Summit 2013 - Adido - The theatre of the future-friendly website
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 

Responsive Design

  • 1. Responsive 2012 WordCamp Kansas City Justin Kopepasah
  • 2. Responsive An approach to web design that coordinates design and development around a user’s behavior and environment based on screen size, platform and orientation. Responding to your user’s needs.
  • 5. Responsive Flexible Images & Media (Tabone, 2012)
  • 6. Responsive Media Queries “A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.” (W3C, 2012) Can be used with CSS or stylesheets within the head. Are more commonly used as CSS.
  • 7. Why do we need responsive design?
  • 8. Mobile Usage Grows Desktop Mobile 100% 75% 50% 25% 0% April, ‘11 (5.21%) July, ‘11 October, ‘11 (6.55%) January, ‘12 April, ‘12 (9.58%) (StatCounter, 2012)
  • 9. Mobile Usage Grows Usage 20% 15% 16.1% 10% 8.5% 5% 4.3% 1.6% 0%0.7% 2009 2010 2011 2012 2013 (StatCounter, 2012)
  • 10. Current Usage Loads of these visitors are trying to view the schedule. (StatCounter, 2012)
  • 11. Current Usage Worldwide Mobile 10.14% Desktop 89.86% Loads of these visitors are trying to view the schedule. (StatCounter, 2012)
  • 12. Current Usage Worldwide Dance Studio Mobile 10.14% Mobile 22.09% Desktop Desktop 77.91% 89.86% Loads of these visitors are trying to view the schedule. (StatCounter, 2012)
  • 13. Current Usage Worldwide Dance Studio Personal Mobile Mobile 10.14% Mobile 7.59% 22.09% Desktop Desktop 77.91% Desktop 89.86% 92.41% Loads of these visitors are trying to view the schedule. (StatCounter, 2012)
  • 14. But Justin, 10% is such a low number to worry about.
  • 15. You’re right. Why worry. (Britt, 2005)
  • 16. You’re right. Why worry. 00.09% - Fire (Britt, 2005)
  • 17. You’re right. Why worry. 00.09% - Fire 00.005% - Airplane (Britt, 2005)
  • 18. You’re right. Why worry. 00.09% - Fire 00.0017% - Tornado 00.005% - Airplane (Britt, 2005)
  • 19. You’re right. Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.005% - Airplane (Britt, 2005)
  • 20. You’re right. Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.001% - Bee Sting 00.005% - Airplane (Britt, 2005)
  • 21. Visitors Don’t Come Back (Equation Research, 2011)
  • 22. Visitors Don’t Come Back 22% 78% (Equation Research, 2011)
  • 23. 10% Loss in Visitors
  • 24. 10% Loss in Visitors
  • 26. 10% Loss in $ $$$$$$$$ $
  • 27. ... and so on. Yes. I just used fire in my Keynote.
  • 28. Obviously we need a mobile friendly
  • 29. Separate Mobile Website (Bloomberg Business Week, 2012) “Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” (Nielsen, 2012)
  • 32. Creates More Problems... -Who decides what content stays? -Links are difficult to manage.
  • 33. Creates More Problems... -Who decides what content stays? -Links do we considered ‘mobile’ are difficult to manage. -What devices?
  • 34. Creates More Problems... -Who decides what content stays? -Links do we considered ‘mobile’ are difficult to manage. -What devices? -More code/content to manage.
  • 35. Creates More Problems... -Who decides what content stays? -Links do we considered ‘mobile’ are difficult to manage. -What devices? -Too many user agents to test. -More code/content to manage.
  • 38. Responsive Design. A design that responds to the needs of the users.
  • 39. Responsive Design. A design that responds to the needs of the users. -Flexible Grid -Flexible Images & Media -Media Queries
  • 41.
  • 42. 960px
  • 43. 960px 120px
  • 44. 960px 20px 120px
  • 45. For a fixed width design these pixels would work perfectly. However, we need to use percentages.
  • 46. For a fixed width design these pixels would work perfectly. However, we need to use percentages.
  • 47. 960px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
  • 48. 960px 540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
  • 49. 960px 400px 540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.
  • 50. 960px 400px 540px For a fixed width design these pixels would work perfectly. However, we need to use percentages. 470px
  • 51. target = result context (Marcotte, 2011)
  • 52. 700 =. 960 7291666666 (Marcotte, 2011)
  • 53. 72.916666666666 % (Marcotte, 2011)
  • 54.
  • 55. 960px 400px 540px 470px
  • 56. 960/960 = 1 400/960 = .416666667 540/960 = .5625 470/960 = .489583333
  • 57. 100% 41.666666666666% 56.25% 48.958333333333%
  • 58.
  • 62. 100% 41.666666666666% 56.25% 2.0833333333333% 2.0833333333333% 48.958333333333%
  • 63. Flexible Images & Other Media...
  • 64. max-width: 100%; Compatible all the way back to IE7. Not going to cover IE6.
  • 65.
  • 66.
  • 67. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
  • 68. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
  • 69. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
  • 70. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
  • 71. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
  • 72. Let browsers resize images accordingly. Modern browsers have the ability to size and resize images. There is no need to declare an image width or height.
  • 73. That little, easy to use insert button when editing content is the devil. Problem with WordPress...
  • 74. That little, easy to use insert button when editing content is the devil. Problem with WordPress... <img src="http://example.com/wp-content/ uploads/2012/05/hearts.jpg" alt="Hearts" title="Hearts" width="1280" height="720" class="alignnone size-full wp- image-3520" />
  • 75. That little, easy to use insert button when editing content is the devil. Problem with WordPress... <img src="http://example.com/wp-content/ uploads/2012/05/hearts.jpg" alt="Hearts" title="Hearts" width="1280" height="720" class="alignnone size-full wp- image-3520" />
  • 76. max-width: 100%; works with other media, too! img embed object video
  • 77. Media Queries... Those fun lines of code that give you control over the layout of your content.
  • 78. Media Queries... Introduced in CSS 2.1. Used only for ‘screen’ or ‘print’ queries. <link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  • 79. Media Queries... Revamped in CSS3. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" /> The query contains two components: 1. a media type (screen), and 2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).
  • 80. Media Queries... Most commonly used in the stylesheet. @media screen and (max-device-width: 480px) { /* css code goes here */ } Some people used them everywhere, but I keep mine at the end.
  • 81. Media Queries... Most commonly used in the stylesheet. @media screen and (max-device-width: 780px) and (min-device-width: 480px) { /* css code goes here */ } Some people used them everywhere, but I keep mine at the end.
  • 82. Recap Mobile usage is on the rise. Separate mobile websites are a bust. Responsive design is the future.
  • 83. Quiz What is the formula used to calculate the exact needed measurement for creating flexible fluid grids?
  • 84. target = result context (Marcotte, 2011)
  • 86. Acknowledgements. Credits. Cites. Et Cetera. Et Cetera. Week. http://images.businessweek.com/ss/ - Jakob Neilsen. Retrieved 05 Bloomberg Business 2012, from BusinessWeek: (2012). World's Most Influentual Designers 10/02/0201_worlds_most_influential_designers/21.htm Britt, R. R. (2005, 01 06). The Odds of Dying. Retrieved 05 2012, from LiveScience: http:// www.livescience.com/3780-odds-dying.html Equation Research. (2011). What users want from mobile. Compuware. Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.) New York, NY: Jeffery Zeldman. Nielsen, J. (2012, 04 10). Mobile Site vs. Full Site. Retrieved 05 20, 2012, from Jakob Nielson's Alertbox: http://www.useit.com/alertbox/mobile-vs-full-sites.html Smith, N. (n.d.). 960 Grid System. Retrieved 05 2012, from 960 Grid System: http://960.gs/ StatCounter. (2012, 02). Mobile internet usage is doubling year on year . Retrieved 05 2012, from StatCounter Global Stats: http://gs.statcounter.com/press/mobile-internet-usage-is-doubling- year-on-year StatCounter. (2012, 04). Mobile vs. Desktop. Retrieved 05 2012, from StatCounter Global Stats: http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201104-201204 Tabone, C. (2012). 365 PSD. Retrieved 05 2012, from New Youtube Interface: http://365psd.com/ day/2-182/ W3C. (2012, 04 26). Media Queries. Retrieved 05 20, 2012, from W3C: http://www.w3.org/TR/ css3-mediaqueries/
  • 87. Random Notes •Do not presume you know what your users want when visiting your mobile site. •Do not presume you know your users broadband speeds. •Test. Test. Test. Purchase devices and also use some online testing sites. •The only thing we know about mobile users is that they are on a smaller screen. We cannot presume to know what user intent is from that. •Never strip out content from a device simply because it is mobile. If you are telling yourself “This can be stripped out for mobile users.”, then you should assess if you needed it in the first place. •Slow load time is a hugh problem.
  • 88. Read These... Responsive Web Design - Ethan Marcotte 19 Articles, Info-Graphics & Research Publications http://goo.gl/dXA3s

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n