Responsive web design

  • 1,134 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,134
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
26
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. An IntroductionPresenter: Erikk Ross (eross@aii.edu)
  • 2. Flickr: Roberrific, sucelloleiloes, minitechnet, IQ computer services
  • 3.  3 million new iPads sold on launch weekend iPhone 4 has sold 75 million units 190 million Android activations 1.6 billion mobile devices sold to end users in 2010 85% of handsets shipped globally in 2011 will include a web browser
  • 4.  Mobile web will be bigger than desktop Internet use by 2015. --Morgan Stanley
  • 5. How do you design aweb site that works wellon all devices?
  • 6. The long and short of it is that we’re designingfor more devices, more input types, moreresolutions than ever before. The web has movedbeyond the desktop, and it’s not turning back.– Ethan Marcotte
  • 7.  Multiple web sites for different devices http://site.com/mobile/ http://mobile.site.com http://site.com/ipad/ http://site.com/iphone/ http://site.com/android http://site.com/ridiculous/
  • 8. It’s what some of us were going forwith “liquid” web design back in the1990s, only it doesn’t suck.–Jeffrey Zeldman
  • 9.  Example Sites
  • 10.  Responsive Web Design by Ethan Marcotte 157 pages $9 for the e-book www.abookapart.com Go buy it now, I’ll wait
  • 11.  A flexible, grid-based layout Flexible images and media Media queries, a module from the CSS3 specification.
  • 12.  No more fixed sizes  Do not use px…ever. Seriously. What about widths?  % What about font sizes?  em
  • 13. #blog .main { float: right; width: 420px; } #blog .aside { float: left; width: 204px; }  target / context = result  Left Column:  204 / 637 = .32025117  Right column:  420 /637 = .659340659#blog .main { float: right; width: 65.9340659%; /* 429 / 637 */ } #blog .aside { float: left; width: 32.025117%; /* 204 / 637 */ }
  • 14.  target / context = result Buy this book
  • 15. img { max-width: 100%;}  The image will now resize and reflow itself proportionally  It will never be larger than its container.  Will grow or shrink based on container size  Can be applied to other HTML tags too: img, video, object { max-width: 100%; }
  • 16.  Used to change the layout of the page based on the size of the display.@media screen and (max-width: 1100px) { /* any screen size 1100px and less will have the following CSSapplied */ }@media screen and (max-width: 660px) { /* any screen size 660px and less will have the following CSSapplied */ }@media screen and (max-width: 340px) { /* any screen size 340px and less will have the following CSSapplied */ }
  • 17.  Ethan Marcotte’s article that coined the term http://www.alistapart.com/articles/responsive-web-design/ Responsive Web Design, the book http://www.abookapart.com/products/responsive-web-design Fluid Images, by Ethan Marcotte (Chapter 3 of the book) http://www.alistapart.com/articles/fluid-images/ Fluid Grids, by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/ Responsive Web Design, another article by Ethan Marcotte http://www.netmagazine.com/features/responsive-web-design CSS3 Media Queries http://webdesignerwall.com/tutorials/css3-media-queries Mediaqueries.es, a list of sites using Responsive Web Design techniques http://mediaqueri.es/ This presentation http://www.slideshare.net/erikkross/responsive-web-design-12143547