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
Navigation, Font – size, site – loading, site search easy access, Mobile touch features, gps, mobile inputs (voice), etc…

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.
- Pixel perfect Web Design (Magazine print)

5. The Motivation Mobile site on a sub-domain Issues
Issues
Maintainability
Updating Content in multiple locations
Web Crawlers
Only shows “Important” information
- The advocates of responsive web design try to achieve this goal by providing the same set of content and features regardless of the screen size
of the device. On the other hand, the proponents of stand-alone mobile websites argue that desktop computers and mobile devices are so different that the
only way to offer a great user experience is to create two separate designs with fewer features for mobile.
Add auto redirect to home page, client side or server side script can be used to detect device
Give users option between mobile and desktop
Systematically browses the web for web indexing, search engines (SEO)

6. Responsive Design Flexible Grids, Grid based layout Media Queries
- Flexible grids are created by using percentage (a relative unit) instead of pixel (an absolute unit).
Responsive web design makes a web page adjust itself in response to the screen size of a device. This means that there is no longer one fixed layout in which the elements of a web page are permanently placed.
A media query consists of a media type and one or more expressions to limit the scope of a certain style sheet. […] By using media queries, content presentations can be tailored to a range of devices without changing the content itself.

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!
Google experimented with slowing down the speed of its search and found not only that users ran fewer searches the longer they had to wait for the result to load but also that those who experienced the longer delay did not return.
- Conditional content loading, suggested by Jeremy Keith, is one of the strategies that can help with the performance issue of a responsive
website.
Image ratio / Distortion
Easier to make a smaller time fit a larger item vs a larger item into a smaller

10. Solving the planning issue
Modernizr for detection on older browsers
960 grid + media queries
Content Management Systems
Drupal
Wordpress
Joomla
- Responsinator for testing on mobile
 allows publishing, editing and modifying content as well as maintenance from a central interface

11. Why the 960 grid and not 980 or 100 grid?
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case "i" or "l" might be easily missed
More factors
1000 grid
Specifically, you can easily split 960 into 2,3,4,5,6 and 8 columns.

12. CNN 960 grid 16 columns
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions
960 is evenly divisible in about a dozen ways:
2 x 480
3 x 320
4 x 240
5 x 192
6 x 160
8 x 120
10 x 96
12 x 80
15 x 64
16 x 60
20 x 48
24 x 40
30 x 32
What does this mean? You can create a grid system that adapts to the screen layout of any screen size. I don’t use most of the above column widths (I just can’t think of too many scenarios where I would want 30 columns of 32 pixels each). You can make a pretty good system with just a few.

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.
- When a .htaccess file is placed in a directory which is in turn 'loaded via the Apache Web Server', then the .htaccess file is detected and executed by the Apache Web Server software. These .htaccess files can be used to alter the configuration of the Apache Web Server software to enable/disable additional functionality and features that the Apache Web Server software has to offer. These facilities include basic redirect functionality, for instance if a 404 file not found error occurs,

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..
By serving up the optimized images, you’re using less bandwidth in cases where it might be appropriate, like on a smaller screen that isn’t going to properly display a huge-resolution image, or will take up less bandwidth for those concerned with their user’s data limits on mobile devices.

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

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!