Implementing Responsive Web Design in Visualforce

Implementing Responsive Web Design in Visualforce

Jonathan Baltz, Slalom Consulting

@JonathanBaltz

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

Agenda

• Introduction into Responsive Web Design

• Concepts of Responsive Web Design• Fluid Grids

• Flexible Images

• Media Queries

• Responsive Web Design in Visualforce Pages

Responsive Web Design (RWD)

Ethan Marcotte, May 25, 2010,

“Responsive Web Design,” A List Apart

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.

Existing Concepts, Together

Responsive Web Design (RWD)

Focus is not about creating aFocus is about creating an

“Full Website vs. Mobile Website”“Website vs. Mobile Application”Optimal Viewing Experience

Web Capable Devices:• Difficult to predict the future

• More difficult to plan for it

Responsive Web Design (RWD)

Responsive Design is Composed of 3 Distinct Parts:

1. Flexible Grids

2. Flexible Images

3. Media Queries

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”

Concepts – Flexible Grids

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

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

880 ÷ 960 = 0.916666667

Target: 880px

Context: 960px

640÷ 880= 0.72727272

Target: 640px

Context: 880px

220 ÷ 880 = 0.25

Target: 220px

Context: 880px

{width:880px;}

{width:640px;}

{width:220px;}

{width:880px;}

{width:640px;}

{width:220px;}{width:25%;}

{width:91.6666667%;}

{width:72.72727272%;}

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!

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

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

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

Media Queries Syntax in CSS

Consist of 2 parts1. The @media rule/condition;

2. The style to be applied

Viewport• Default: Zoom out to display entire webpage

• Modification: Do not zoom

<meta name="viewport"  content="width=device-width, initial-scale=1.0"/>

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

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

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

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…

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

LinksA List Apart article: http://alistapart.com/article/responsive-web-designA List Apart book: http://www.abookapart.com/products/responsive-web-designSmashing 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-website-design/

Twitter Bootstrap: http://getbootstrap.com/ZURB Foundation: http://foundation.zurb.com/

Questions & (Possible) Answers

Implementing Responsive Web Design in Visualforce