1 / 11

Mobile First/ Responsive Web Design

Mobile First/ Responsive Web Design. IMD470 Special Topics Instructor Pam Berman 31 July 2012. Presenter: Ron Sherlock. Table of Contents. Introduction Defnition : Mobile First/Responsive Web Design Discussion Responsive Web Design Mobile First Questions References. Introduction.

lea
Télécharger la présentation

Mobile First/ Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile First/ Responsive Web Design IMD470 Special Topics Instructor Pam Berman 31 July 2012 Presenter: Ron Sherlock

  2. Table of Contents • Introduction • Defnition: Mobile First/Responsive Web Design • Discussion • Responsive Web Design • Mobile First • Questions • References

  3. Introduction • Responsive Web Design – Techniques advocated by Ethan Marcotte which seeks to make layouts adaptable and flexible to the the media that renders them1 • Mobile First Responsive Web Design – “RWD techniques that start from a mobile template”2

  4. Responsive Web Design • Responsive Web Design Techniques1 • A flexible grid layout • Flexible images and media • CSS3 Media Queries

  5. Responsive Web Design (Cont’d) • Responsive Web Design Techniques • A flexible grid layout1 • Uses percentages instead of pixels Ex. Instead of #page { margin 36px auto; width 960px; } Do #page { margin 36px auto; Width 90%px; }

  6. Responsive Web Design (Cont’d) • Responsive Web Design Techniques • Flexible images and media1 • Making images and media fit to scale using CSS Ex. Instead of < div class=“figure”> <p> <imgsrc=“robot.jpg” alt=“” /> <b class=“figcaption”>Lo, the robot walks</b> </p> </div> } Do .figure{ float:right; margin-bottom: 0.5em; margin-left: 2.53164557%; width 48.7%px; }

  7. Responsive Web Design (Cont’d) • Responsive Web Design Techniques • CSS3 Media Queries • “Evaluating certain aspects of the browser environment to determine if CSS rules apply”2 • “Logical expressions that evaluate the current values of media features in the user’s browser. If the media query expression evaluates as TRUE, the contained CSS is applied”2 • Ex. @ media screen and (min-width:480px) (/* CSS Rules*/) • If media screen width is at least 480px, than CSS rules applies2

  8. Mobile First Web Design • Why Mobile First? • Explosive growth of mobile phones • Mobile outsold desktop, laptop and notebook last quarter of 2010, two years earlier than predicted3 • Traffic to mobile websites in 2010 grew 600% after tripling and between 2009 and 2010.3 • Lots of $$$$$ • Paypal is seeing 10mil in mobile volume per day3 • Ebay global mobile sales generate nearly 2 bil in 20103

  9. Mobile First Web Design (Cont’d) • Mobile First2 • Basic HTML • Simple Layout • Small Images • Limited CSS and JS

  10. Questions QUESTIONS?

  11. References • 1Marcotte, Ethan. Responsive Web Design. New York: Book Apart, 2011. Print. • 2Gardner, Lyza Danger., and Jason Grisgby. Head First Mobile Web. Sebastopol, CA: O'Reilly, 2012. Print. • 3Wroblewski, Luke. Mobile First. New York: Book Apart, 2011. Print.

More Related