by bohyun kim presented by: rithya lath responsive web design, discoverability, and mobile challenge
TRANSCRIPT
BY BOHYUN KIM
PRESENTED BY: RITHYA LATH
Responsive Web Design, Discoverability, and Mobile
Challenge
Topics
IntroductionWhat is Responsive Design (Improvements)?ImplementationAdvantages of Responsive Design?IssuesResources and Tools that solve these issuesConclusion
Responsive Design
Support devices of the present / futureUsability
The Motivation
Pixel perfect web designZoom, pinch, and pan for important
information.people want to be able to do almost
everything mobile that they do on a desktop computer.
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
Responsive Design
Flexible Grids, Grid based layoutMedia Queries
Starbucks Responsive Design
Advantages
Update only in one spotLess promotionFully featured contentIncrease usability (devices)Web crawlersWeb analytics
Be aware!
More planning / timeContent Length / ClutterImagesTablesSlow performance is a common problem in
responsive websites!
Solving the planning issue
Modernizr for detection on older browsers960 grid + media queriesContent Management Systems
Drupal Wordpress Joomla
Why the 960 grid and not 980 or 100 grid?
CNN 960 grid 16 columns
Solving the Image Issue
Images become distorted with percentagesFixed images don’t scale well on smaller
windowsPicturefill method
Multiple images needed More semantics
Adaptive Images Library -Apache PHP
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.
How it Adaptive Images work
Cookie saves screen resBrowser encounters <img> and request to
serverHtaccess file is readRule sents to processing file..PHP uses the cookie and compares image to
resProcess creates a new version of the image
and sends back to client if image is not found..
Solving the Table Issue
Color code techniqueSticky Left Column techniqueDrop down menu for columns
Speed up performance
Serve appropriate imagesUse Conditional LoadingMinify your external files (css, js, etc)Caching
- varnish
Use sprites when possible
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 devices960 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!