Responsive Web Design, Discoverability, and Mobile Challenge

Download Report

Transcript 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
Responsive Design
 Support devices of the present / future
 Usability
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.
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 layout
 Media Queries
Starbucks Responsive Design
Advantages
 Update only in one spot
 Less promotion
 Fully featured content
 Increase usability (devices)
 Web crawlers
 Web analytics
Be aware!
 More planning / time
 Content Length / Clutter
 Images
 Tables
 Slow performance is a common problem in
responsive websites!
Solving the planning issue
 Modernizr for detection on older browsers
 960 grid + media queries
 Content 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 percentages
 Fixed images don’t scale well on smaller windows
 Picturefill 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 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..
Solving the Table Issue
 Color code technique
 Sticky Left Column technique
 Drop down menu for columns
Speed up performance
 Serve appropriate images
 Use Conditional Loading
 Minify 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 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!