Implementing Responsive Web Design in Visualforce
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Implementing Responsive Web Design in Visualforce

  • 650 views
Uploaded on

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

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
650
On Slideshare
650
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

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
  • SLIDE 1: Title pageWelcome
  • SLIDE 2: JONATHAN INTRODUCTION
  • SLIDE 3: AGENDA
  • SLIDE 4: RESPONSIVE WEB DESIGN HISTORY
  • SLIDE5: RESPONSIVE WEB DESIGN HISTORY – PAGE 2Responsive Design is Composed of 3 Distinct Parts:Flexible GridsFlexible Images (Or more specifically, images that work in a flexible context.)Media Queries
  • SLIDE6: RESPONSIVE WEB DESIGN HISTORY – PAGE 2Responsive Design is Composed of 3 Distinct Parts:Flexible GridsFlexible Images (Or more specifically, images that work in a flexible context.)Media QueriesViewports:62.5% RULE:•modern browsers have a 16px font default size*•body{font-size:62.5%}•16x62.5=10px•p{font-size:1.3em;}
  • SLIDE7: RESPONSIVE WEB DESIGN CONCEPTS – FLUID GRIDS – PAGE 1 of 2“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”A grid is the division of a layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content.Helps in creating a uniform structure to start the design with.A grid is simply a tool to help designs, not something that should hurt the design in any way.The 960 Grid System–and other tools and systems like it–provide a fast and easy way to create grid-based layouts using CSS. They do this by providing cross-browser-tested and optimized preset column widths for you to set your content into.The reason it’s 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is included as well for those that really need extra control).In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels.So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels.So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.
  • SLIDE8: RESPONSIVE WEB DESIGN CONCEPTS – FLUID GRIDS – PAGE 2 of 2
  • SLIDE9: RESPONSIVE WEB DESIGN CONCEPTS – FLUID GRIDS – PAGE 2 of 3Instead of a value set in pixels, we need to express .blog’s width of 900px in proportional terms: specifically, describing it as a percentage of the width of its containing element
  • SLIDE 10: RESPONSIVE WEB DESIGN CONCEPTS – FLUID GRIDS – PAGE 3 of 3
  • SLIDE11: RESPONSIVE WEB DESIGN CONCEPTS – RESPONSIVE IMAGES – PAGE 1 of 2
  • SLIDE 12: RESPONSIVE WEB DESIGN CONCEPTS – RESPONSIVE IMAGES – PAGE 2 of 2
  • SLIDE 13: RESPONSIVE WEB DESIGN CONCEPTS – MEDIA QUERIES– PAGE 1 of 2
  • SLIDE 14: RESPONSIVE WEB DESIGN CONCEPTS – MEDIA QUERIES– PAGE 2 of 3Embedded One HTTP request Large file could be hard to maintainExtra weight, regardless of if neededAll styles downloaded Many HTTP requestsOrganization can be easierSmaller CSS for device not supporting media queriesAll styles downloaded (if media queriessupported)
  • SLIDE 15: RESPONSIVE WEB DESIGN CONCEPTS – MEDIA QUERIES– PAGE 3 of 3this "zoom out" behavior only gets in the way and defeats our efforts. Site believes the width is now the width of the zoomed page
  • SLIDE16: RESPONSIVE WEB DESIGN – APPROACH: Graceful DegradationAs you move downward to the smaller width designs, you will be forced to decide quickly what is most important within the site. Of course, it is a good conversation to have with your client as well. It is their business, and they should know best what stays in the “keep pile.” However, we are always there to help guide them to the “what goes pile.”
  • SLIDE 17: RESPONSIVE WEB DESIGN – APPROACH: Progressive EnhancementWhen you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product.If we examine the progressive enhancement workflow, the result tends to be a different story. Here we’re starting with a project that is both super lean and quite impressive. You’ve taken all of that starting energy and put it into creating a product that looks and functions well despite the many restraints that you faced.More importantly, you’ve already gone through the problem of trimming down the content to its most vital elements. Now when it’s time to bring this design to the desktop, instead of facing the decision of what to cut and how to water down your product, you instead get to decide how to make it even more robust!

Transcript

  • 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