Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap

Editor's Notes

• #3: Key Takeaway:We are a publicly traded company. Please make your buying decisions only on the products commercially available from Salesforce.com. Talk Track: Before I begin, just a quick note that when considering future developments, whether by us or with any other solution provider, you should always base your purchasing decisions on what is currently available.
• #5: Talking about : What is responsive design Why would you use it How – the tools and techniques Then a little about bootstrap – my framework of choice Finally a demo of a responsive web page and a look at the code
• #6: Nice wikipedia definition. Technically pages respond to device capabilities such as viewport and orientation. Don’t hide content – not punishing people for accessing on a small device. Coined by Ethan Marcotte in his excellent alistapart artice, at the shortlink shown. Don’t worry about capturing as the deck will be posted up to slideshare afterwards. Responsive
• #7: If that was too long and you didn’t listen, go to Safari – first tab - and show scrolling around at small size. Still want all of the content and functionality to be accessible from all devices – responsive design is not about punishing people for using a particular device.
• #9: Maintaining one site means that you don’t duplicate work – decent content management system can help with this, but still likely to have to apply changes to multiple sites in the event of a rebranding. Its easier to track visitors to a single site, rather than trying to figure out which of your visitors to multiple sites are unique. You’d also need a lot of m.sites for the different form factors – my favourite meme. Easier to crawl a single site, as just need a single user agent rather than processing as a phone, tablet, desktop etc Better for the link algo as all links point to a single site. Read more at the shortlink.
• #10: How do you go about it. For me, three cornerstones
• #11: Viewport meta tag, to indicate how the device should behave \ Report actual size otherwise iphone for ex will say it is 980 pixels wide, resulting in massively zoomed out page Initial scale means no zoom Don’t turn off user scaling - accessibility
• #12: Fluid grid that breaks your content up into rows and columns. 12 popular as it divides nicely by 2, 3, 4 and 6. Where it really comes into its own is reflow
• #13: Here is an example of the default reflow of bootstrap
• #14: Finally, css media queries – expression limiting scope or css that conditionally applies based on the device capabilities Example – anything with the class of sidebar will be hidden Then add a media query to show the sidebar if the page is being displayed on a device with a width of 1024px or greater.
• #15: My favourite framework
• #16: Designers aren’t always keen as sites tend to look generic – black bar across the top, same fonts, colours, dialogs etc. Mobile first, not mobile ready – no page transitions etc
• #17: Twitter has 12 column grid. Provides 4 breakpoints – large, medium, small and extra small – xs is quite a large range. Scales up, so define at xs is inherited by small, medium and large unless you override it. You can use the breakpoints in style classes – the col-md-6 says that the enclosed content spans 6 rows on a medium (and large) device Col-xs-12 spans 12 columns on xs and small – can combine these to define how the same content is rendered on multiple devices
• #18: So where does VF come into it? The answer is not much. It’s the container that allows your pages to be served, but really is a thin wrapper around mainly vanilla HTML and provides the binding to your force.com data. You’ll want minimal page markup generation – you’ll need to turn off the head/body tag generation so that you can add your viewport tag. Defo exclude stylesheets as occasionally conflict.
• #19: Don’t use the page block hierarchy as this isn’t responsive – I typically use the include tags to bring in my external resources, outputtext to format dates/currencies and repeat to iterate collections. Also consider whether to use remoting or regular vF forms and rerendering – remoting is faster, but you have to manage the DOM manipulation to display the results yourself.
• #20: Now for the demo
• #21: To recap what we saw earlier Its live and externally available at the shortlink, or you can scan the QR code to access. The code is also available on github
• #22: This section defines how the post and sidebar are displayed. The col-xs- style classes define how the elements are displayed on an extra small screen and upwards. As the real estate is limited, the posts span the full width and the sidebar elements stack underneath it The col-md style classes override the formatting for medium and large – as these have more real estate I can display the post in the first 9 columns and the sidebar to the right.
• #23: Next the comments – I have two forms of these – for medium and large screens ( as covered by the hidden-xs/sm) the comments are displayed in full. For smaller screens, the post content is more important so I render a button to allow the user to toggle the comments
• #24: Finally the menu – this is standard bootstrap functionality so I haven’t had to specify any classes. The first div is automatically displayed on extra small screens, and produces the hamburger button that can be clicked to reveal the options. The second div is displayed for small and above, and produces the clickable links on the right hand side. Note also that I’ve hidden the search (and about although its not shown) links for medium and large, as these will be present in the sidebar so there is no need to provide menu options.
• #25: Finally a word about one of the current challenges in responsive design – images
• #26: Options to handle images: Download and hide – worst of all worlds – all the effort of maintaining multiple images and no efficiency – send them all to the browser and let that figure out which one to use Download and shrink – send a huge image to the browser and let it scale – wastes bandwith – 50% reduction in height and width discards 75% of the transmitted data.
• #27: CSS media queries in the tag – browser chooses the appropriate one based on device capabilities. Iimage pre-loading is a potential issue, as this will always load the fallback_image even when it isn’t needed. Browsers aren’t there yet, although planned to be in firefox and chrome by the end of the year.
• #28: Best solution for my money at present. Polyfill for the HTML5 picture element. Introduces some latency, as the image is loaded by JavaScript after the page is rendered. Similar concept to the picture element but using spans as opposed to source tags. Also a version for div but this messed up the bootstrap formatting. Shortlink to github repository.