Your SlideShare is downloading. ×
0
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Development (ZendCon 2012)

1,037

Published on

Responsive Design is the buzz in design, but as we all know, design is only part of the story. With the arrival of the HTML5, CSS3 and javascript triumvirate we can no make truly immersive mobile and …

Responsive Design is the buzz in design, but as we all know, design is only part of the story. With the arrival of the HTML5, CSS3 and javascript triumvirate we can no make truly immersive mobile and desktop browser experiences. Coupled with modern PHP web application practices, your web app will feel and act closer to a native app, at a fraction of the cost. In this presentation, we'll dive into designing your modern web application to take advantage of as much of the platforms' limitations and advantages. Sure, you can't use the camera, but in many cases can use the accelerometer, and it'll always be granted to look right, any angle you look at it! These days, there's no excuse for not having a "mobile version" when all you need is one site that can transform itself to suit the device!

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,037
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Musketeers.me Responsive Development Kevin Bruce of Musketeers.me
  2. Who Am I? Designer Developer Musketeers.me2
  3. Where I Work Musketeers.me3
  4. Musketeers.me THE Question: Is a responsive site the best way to go for my site?
  5. Options iPhone Camera Compass Accelerometer Geolocation Full Responsive Site Dedicated Mobile Site Native Application Musketeers.me5
  6. Full Responsive Site Benefits • One Codebase • Same html file serves all devices Drawbacks • Not completely tailored to any device • Unless you have a process in place, it can take as much time to write as a separate mobile site Musketeers.me6
  7. Dedicated Mobile Site Benefits • Cater to mobile content needs like Location and contact info • Can concentrate on touch-based UI Drawbacks • Completely separate codebase and content to maintain • Studies have shown that a separate “paired-down” site pisses people off. Musketeers.me7
  8. Native Mobile App Benefits • Native access to device hardware • Interface is more responsive Drawbacks • Development cost is high to write and maintain • At least two mobile Operating Systems to write for Musketeers.me8
  9. My Own Personal Decision-Makers Dedicated Native Responsive Site Mobile Site Application • Information • Shopping Cart • Full Web Website Application • Login-Based • Light Interactive Website • Giant Shopping Website Cart Musketeers.me9
  10. Musketeers.me Responsive Design
  11. In a Nutshell flexible grid layouts that respond to the size of your browser window (viewport). Musketeers.me11
  12. Flexible Grid is the Key to Responsive Design A flexible grid is made up of fluid columns and rows that use ems and percentages for setting width, height, font-size, image and media sizes. Musketeers.me12
  13. Media Queries Media Queries are a CSS3 feature that was introduced into the modern browser. It is a series of “break points” based on your browser window (or “viewport”) size. Your browser only uses the styles within the breakpoint that matches your viewport size. Of course, it also uses styles outside of any breakpoints as well. Musketeers.me13
  14. Media Queries 1. Use the @import rule to import styles from other style sheets: <div id=”google_whitespace” style=”@import url(style600min.css) screen and (min-width: 600px);”> </div> Musketeers.me14
  15. Media Queries 2. Put media queries directly in the style sheet. This is the most common approach. @media screen and (min-width: 400px) and (orientation: portrait) { #nav li { float: right; } } @media screen and (min-width: 800px) { #nav li { float: left; } } Musketeers.me15
  16. Media Queries 3. Include a query in a linked style sheet’s media attribute: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" /> Musketeers.me16
  17. Mobile First style.css Depending on who you talk body { … } to, mobile-first is the way to go. @media only screen and (min-width: 200px) Design for mobile, serve the mobile mobile breakpoints first and then progressively enhance from there for @media only screen and (min-width: 1020px) larger viewports. tablet Use “min-width” breakpoints so the @media only screen and larger screens inherit styles from the (min-width: 1450px) smaller viewport break points, in desktop effect, cascading up. Musketeers.me17
  18. Mobile Content First The important take-away from mobile-first is “content-first.” Distill your message down to the essentials! Start with the content you would show in your mobile view and add in the Design cruff from there. Also, write semantic markup! Musketeers.me18
  19. Musketeers.me Responsive Development
  20. Server Side Help Server side is an alternate, powerful tool to help support your responsive front end strategy. User Agent Detection can tell you if a device is using a mobile browser, as well as “The IE.” Musketeers.me20
  21. Server Side Help Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by: • Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips. Musketeers.me21
  22. Server Side Help Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by: • Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips. • Server touch-based javascript for touch devices and omit unneeded code. Musketeers.me22
  23. Server Side Help Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by: • Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips. • Server touch-based javascript for touch devices and omit unneeded code. • Embed images with Data URIs for mobile (http://css- tricks.com/data-uris/). Musketeers.me23
  24. Server Side Help Server Side User Agent Detection can help your responsive front end strategy. With it, your code can help mobile and tablet pages by: • Compacting javascript and styles, insert them directly into the html page and serve them as one document, lessening the server trips. • Server touch-based javascript for touch devices and omit unneeded code. • Embed images with Data URIs for mobile (http://css- tricks.com/data-uris/). • Serve correctly sized images for the device. Musketeers.me24
  25. Musketeers.me The IE
  26. State of IEEEEEEE • IE 6: it sucks, but government still has a lot of internal systems that only work on it, so… • IE 7: Sucks less, but few rely on it for internal systems (see IE 6) • IE 8: really a step in the right direction, but it doesn’t support media queries or html5… and many CSS3 features. • IE 9: This is the big improvement! Standards compliant… sort of (it’s all relative, isn’t it?). HTML5, media queries- all good! • IE 10: reported to be awesome with web standards (really!)… and sooo many people don’t have it yet. Musketeers.me26
  27. IE retrofits IE 8 and below can usually be taught html5 and media queries with the help of a couple of javascripts: 1. Modernizer.js teaches pre-HTML5 browsers to see the new HTML5 tags as block elements. (http://modernizr.com) 2. Respond.js teaches IE what media queries are and how to use them. (https://github.com/scottjehl/Respond) Musketeers.me27
  28. Musketeers.me What can we do with a mobile device?
  29. Hardware We Can Access Varies iPhone Android Camera Compass Accelerometer Geolocation Musketeers.me29
  30. Hardware We Can Access Varies HTML5 standards opened up access to much of device hardware. And more and broader support is coming. • Solid support for the accelerometer and GPS in both iOS and Android. • Access to the GPU (WebGL) and audio hardware (Web Audio API). • Access to the camera (HTML Media Capture) is a very new feature and has full support in Android 3.0 and limited support in iOS6 Safari and Chrome. Musketeers.me30
  31. Are we there yet? Facebook’s stint with an html5 app was universally panned. The roars of applause were deafening when the native app was released. So… no, you shouldn’t try to imitate a native app with responsive design. You will most likely fail. Musketeers.me31
  32. However… The one thing Facebook did accomplish was the responsive site was a good test case. Responsive Design is good prototype for the native app. …provided you don’t drive them away in the process. Slap “Beta” on it! Musketeers.me32
  33. Good Resources MOBILE-FIRST http://www.html5rocks.com/en/mobile/responsivedesign/ A NON-RESPONSIVE APPROACH TO BUILDING CROSS-DEVICE WEBAPPS http://www.html5rocks.com/en/mobile/cross-device/ CAPTURING AUDIO & VIDEO IN HTML5 http://www.html5rocks.com/en/tutorials/getusermedia/intro/ CREATING A MOBILE-FIRST RESPONSIVE WEB DESIGN http://www.html5rocks.com/en/mobile/responsivedesign/ CONDITIONAL LOADING FOR RESPONSIVE DESIGN http://24ways.org/2011/conditional-loading-for-responsive-designs Musketeers.me33
  34. Thank You Personal Site: kevinbruce.com Professional Site: musketeers.me Blog: neutralgood.net Twitter: @kevinbruce Rate me: https://joind.in/6866 Musketeers.me34

×