by bohyun kim presented by: rithya lath responsive web design, discoverability, and mobile challenge
TRANSCRIPT
![Page 1: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/1.jpg)
BY BOHYUN KIM
PRESENTED BY: RITHYA LATH
Responsive Web Design, Discoverability, and Mobile
Challenge
![Page 2: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/2.jpg)
Topics
IntroductionWhat is Responsive Design (Improvements)?ImplementationAdvantages of Responsive Design?IssuesResources and Tools that solve these issuesConclusion
![Page 3: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/3.jpg)
Responsive Design
Support devices of the present / futureUsability
![Page 4: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/4.jpg)
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.
![Page 5: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/5.jpg)
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
![Page 6: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/6.jpg)
Responsive Design
Flexible Grids, Grid based layoutMedia Queries
![Page 7: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/7.jpg)
Starbucks Responsive Design
![Page 8: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/8.jpg)
Advantages
Update only in one spotLess promotionFully featured contentIncrease usability (devices)Web crawlersWeb analytics
![Page 9: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/9.jpg)
Be aware!
More planning / timeContent Length / ClutterImagesTablesSlow performance is a common problem in
responsive websites!
![Page 10: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/10.jpg)
Solving the planning issue
Modernizr for detection on older browsers960 grid + media queriesContent Management Systems
Drupal Wordpress Joomla
![Page 11: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/11.jpg)
Why the 960 grid and not 980 or 100 grid?
![Page 12: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/12.jpg)
CNN 960 grid 16 columns
![Page 13: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/13.jpg)
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
![Page 14: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/14.jpg)
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.
![Page 15: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/15.jpg)
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..
![Page 16: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/16.jpg)
Solving the Table Issue
Color code techniqueSticky Left Column techniqueDrop down menu for columns
![Page 17: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/17.jpg)
Speed up performance
Serve appropriate imagesUse Conditional LoadingMinify your external files (css, js, etc)Caching
- varnish
Use sprites when possible
![Page 18: BY BOHYUN KIM PRESENTED BY: RITHYA LATH Responsive Web Design, Discoverability, and Mobile Challenge](https://reader035.vdocuments.site/reader035/viewer/2022070323/56649dc45503460f94ab75c9/html5/thumbnails/18.jpg)
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!