1 / 18

Responsive Web Design, Discoverability, and Mobile Challenge

Responsive Web Design, Discoverability, and Mobile Challenge. By Bohyun Kim Presented by: Rithya Lath. Topics. Introduction What is Responsive Design (Improvements)? Implementation Advantages of Responsive Design? Issues Resources and Tools that solve these issues Conclusion.

merritt-estes
Download Presentation

Responsive Web Design, Discoverability, and Mobile Challenge

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. Responsive Web Design, Discoverability, and Mobile Challenge By Bohyun Kim Presented by: Rithya Lath

  2. Topics • Introduction • What is Responsive Design (Improvements)? • Implementation • Advantages of Responsive Design? • Issues • Resources and Tools that solve these issues • Conclusion

  3. Responsive Design • Support devices of the present / future • Usability

  4. The Motivation • Pixel perfect web design • Zoom, pinch, and pan for important information. • people want to be able to do almost everything mobile that they do on a desktop computer.

  5. The Motivation • Mobile site on a sub-domain • http://www.m.riderta.com • Issues • Maintainability • Updating Content in multiple locations • Web Crawlers • Only shows “Important” information

  6. Responsive Design • Flexible Grids, Grid based layout • Media Queries

  7. Starbucks Responsive Design

  8. Advantages • Update only in one spot • Less promotion • Fully featured content • Increase usability (devices) • Web crawlers • Web analytics

  9. Be aware! • More planning / time • Content Length / Clutter • Images • Tables • Slow performance is a common problem in responsive websites!

  10. Solving the planning issue • Modernizr for detection on older browsers • 960 grid + media queries • Content Management Systems • Drupal • Wordpress • Joomla

  11. Why the 960 grid and not 980 or 100 grid?

  12. CNN 960 grid 16 columns

  13. Solving the Image Issue • Images become distorted with percentages • Fixed images don’t scale well on smaller windows • Picturefill method • Multiple images needed • More semantics • Adaptive Images Library • -Apache • PHP

  14. Adaptive images • Add .htaccess and adaptive-images.php to your document-root folder. • Add one line of JavaScript into the <head> of your site. • Add your CSS Media Query values into $resolutions in the PHP file.

  15. How it Adaptive Images work • Cookie saves screen res • Browser encounters <img> and request to server • Htaccess file is read • Rule sents to processing file.. • PHP uses the cookie and compares image to res • Process creates a new version of the image and sends back to client if image is not found..

  16. Solving the Table Issue • Color code technique • Sticky Left Column technique • Drop down menu for columns

  17. Speed up performance • Serve appropriate images • Use Conditional Loading • Minify your external files (css, js, etc) • Caching • - varnish • Use sprites when possible

  18. Conclusion • Responsive design is having your site scale on various screen sizes by giving users a fully featured site and enjoyable experience just as the desktop version would. • Prepares content for present / future devices • 960 grid • Your site is unique, so there is no one stop for a solution. Use the various tools at your disposal. No perfect formula for responsive design. • Content is King. Develop for content, not devices!

More Related