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!

1. Musketeers.me
Responsive
Development
Kevin Bruce of Musketeers.me

2. Who Am I?
Designer
Developer
Musketeers.me
2

3. Where I Work
Musketeers.me
3

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.me
5

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.me
6

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.me
7

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.me
8

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.me
9

10. Musketeers.me
Responsive Design

11. In a Nutshell
flexible grid layouts that respond to the size of your
browser window (viewport).
Musketeers.me
11

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.me
12

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.me
13

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.me
14

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.me
15

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.me
16

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.me
17

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.me
18

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.me
20

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.me
21

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.me
22

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.me
23

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.me
24

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.me
26

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.me
27

28. Musketeers.me
What can we do with a mobile
device?

29. Hardware We Can Access Varies
iPhone Android
Camera
Compass
Accelerometer
Geolocation
Musketeers.me
29

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.me
30

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.me
31

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.me
32

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.me
33

34. Thank You
Personal Site: kevinbruce.com
Professional Site: musketeers.me
Blog: neutralgood.net
Twitter: @kevinbruce
Rate me: https://joind.in/6866
Musketeers.me
34