Responsive Web Design is a web design approach that aims to provide the optimal viewing experience to the user without having to maintain a separate mobile application. Join us for an introduction of Responsive Web Design, including an overview of some core aspects, including fluid grids, responsive images, and media queries. We'll then put these concepts to work and demonstrate how to use Responsive Web Design in Visualforce pages to make your salesforce.com org mobile friendly, without creating a mobile application.

1. Implementing Responsive Web
Design in Visualforce
Jonathan Baltz, Slalom Consulting
@JonathanBaltz

2. Who am I?
• Jonathan Baltz
• CRM Consultant @ Slalom Consulting in Chicago, IL
• Organizer of Chicago Force.com Developer User Group
• Anywhere JonathanBaltz or BigBadChicago
•
@JonathanBaltz or Facebook.com/jonathanbaltz
•
Github.com/bigbadchicago

3. Agenda
• Introduction into Responsive Web Design
• Concepts of Responsive Web Design
•
Fluid Grids
•
Flexible Images
•
Media Queries
• Responsive Web Design in Visualforce Pages

4. Responsive Web Design (RWD)
Ethan Marcotte, May 25, 2010,
“Responsive Web Design,” A List Apart
Existing Concepts, Together
A responsive web design uses "media queries" to figure out what
resolution of device it's being served on. Flexible images and
fluid grids then size correctly to fit the screen.

5. Responsive Web Design (RWD)
Focus is not about creating a
about creating an
Optimal Viewing Mobile Website”
“Website vs. vs.Experience
“Full WebsiteMobile Application”
Web Capable Devices:
•
Difficult to predict the future
•
More difficult to plan for it

6. Responsive Web Design (RWD)
Responsive Design is Composed of 3 Distinct Parts:
1. Flexible Grids
2. Flexible Images
3. Media Queries

7. Concepts – Flexible Grids
The allocation of a layout with vertical and/or horizontal guidelines
•
Break up the site’s layout into module that can be moved and resized
as needed
•
Provides a framework for organizing content
Fluid grids are designed in terms of proportions
•
The elements in the layout resize their widths in relation to one another
•
Using percentages, not pixel
•
WARNING: This entails “Math”

8. Flexible Grids - The 960 Grid System
A website layout that uses a grid that is 960 pixels wide
Why 960?
•
960 Pixels fits on majority of screens
•
It divides very well

9. Flexible Grids – Here Comes the Math!
• Component Size Not Set In Pixels, but in Proportional Terms
• Percentage of the size of it’s containing element
target ÷ context = result

10. Target: 880px
{width:880px;}
Context: 960px
880 ÷ 960 = 0.916666667
{width:91.6666667%;}
{width:220px;}
{width:25%;}
{width:640px;}
{width:72.72727272%;}
Target: 640px
Context: 880px
640÷ 880= 0.72727272
Target: 220px
Context: 880px
220 ÷ 880 = 0.25

11. Fluid Images
Images don’t transfer easily into different sized containers
•
Unlike text, images are not constrained by their container
•
If too large, they will overflow and exceed their boundaries
You can write a single CSS rule that prevents images
from exceeding the boundary of their container!

12. Fluid Images
img {
max-width: 100%;
}
• The img element will render at whatever size, as long as it’s
narrower than its container
• If it happens to be wider than the container, then the CSS rule
forces the image’s width to match the width of its container
• The <apex:image> tag already does this

13. Media Queries
Parameters to change style declarations at common size
dimensions
•
Not concerned with the type of device
•
Focuses on the capability of the device
There are two ways to call a media query
•
External stylesheets
•
Directly within a stylesheet

14. Fluidity with Media Types
Using Media Queries to reference a different stylesheet for each type
of browser or device
<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
But multiple stylesheets equals multiple http requests
•
Multiple http requests equals poor performance

15. Media Queries Syntax in CSS
Consist of 2 parts
1.
The @media rule/condition;
2.
The style to be applied
Viewport
•
Default: Zoom out to display entire webpage
<meta name="viewport"
•
content="width=device-width, initial-scale=1.0"/>
Modification: Do not zoom

16. Design Approach Take advantage of cutting-edge technology
•
Add the HTML5 bells and the CSS3 whistles
•
Add Media Queries for the Mobile Site
There’s a catch…
Older & mobile browsers may not handle cutting edge
technology
•
These browsers would display a stripped down version of the site
•
Graceful Degradation

17. Mobile First Approach
All devices are served a mobile layout first
•
Everyone can access the basic content and functionality
•
Provide enhanced functionality to those with newer browsers
and/or greater bandwidth
Progressive Enhancement
•
Focuses on content as a base for consumption
•
Tries to make sure everyone can experience the web in the best
way possible

18. When to Use Responsive Web Design
Responsive Web Design vs. Mobile Applications
•
End Users Do Not Care How A Site is Built
•
End Users Do Care if They Can’t Get Things Done
Main Focus is Creating the Best User Experience
•
Tailor the approach to the project and the Audience
•
Nobody knows your project or your audience better than you

19. Bootstrap vs. Foundation
The biggest debate on the internet
•
Everyone generally states that each is good at what it does
•
No one can give a conclusion on which is better
CSS Preprocessors:
•
Bootstrap: LESS, but won’t use much
•
Foundation: Sass, and you better learn it
And that’s about it…

20. FRAMEWORK POTENTIAL PITFALLS
Subscribe to other developers’ structure/naming/style
Lookalike issues
One-size-fits-all
Potential for bloat/unneeded stuff
Might not do everything you need
Ability to scale
Compatibility with existing sites

21. Links
A List Apart article:
http://alistapart.com/article/responsive-web-design
A List Apart book:
http://www.abookapart.com/products/responsive-web-design
Smashing Magizine:
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
WebDesignTutorials:
http://webdesign.tutsplus.com/articles/design-theory/responsive-web-design/
Selling RWD to Clients:
http://www.smashingmagazine.com/2013/10/30/selling-responsive-websitedesign/
Twitter Bootstrap: http://getbootstrap.com/
ZURB Foundation: http://foundation.zurb.com/

22. Questions & (Possible) Answers