Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
Download as PPTX, PDF7 likes3,117 views
This document discusses responsive design using Visualforce and Twitter Bootstrap. It defines responsive design as providing an optimal viewing experience across devices by responding to screen size and orientation. It outlines the key techniques used in responsive design, including viewport meta tags, fluid grids, and CSS media queries. It then provides an overview of how Bootstrap can be used to build responsive user interfaces in Visualforce and demonstrates a sample blog application.
More Related Content
Similar to Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap (20)
Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
- 1. Responsive Design with Visualforce and Twitter Bootstrap Keir Bowden CTO, BrightGen @bob_buzzard
- 2. Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
- 3. Keir Bowden CTO, BrightGen
- 4. Agenda What What Why How Bootstrap Demo
- 5. What is Responsive Design “Provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning and scrolling – across a wide range of devices” Wikipedia • Pages respond to device – Viewport size – Orientation • Term coined by Ethan Marcotte – http://bobbuzz.me.uk/1hI879K
- 7. Agenda What Why Why How Bootstrap Demo
- 8. Why use Responsive Design? • One site to rule them all – DRY – Visitor Tracking – Would need many m. sites • Google’s Recommended Approach (SEO) – Easier to crawl – Better for the link algorithm – http://bobbuzz.me.uk/1g7G3wV
- 9. Agenda What Why How How Bootstrap Demo
- 10. Cornerstone 1 – Viewport Meta Tag • Viewport Meta Tag <meta name="viewport” content="width=device-width, initial-scale=1.0”> </meta> • width=device-width – Report actual size of device • initial-scale=1.0 – Display page actual size • user-scalable=no
- 11. Cornerstone 2 – Fluid Grid
- 12. Reflow 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4
- 13. Cornerstone 3 - CSS Media Queries • Expression Limiting Scope of CSS .sidebar { display: none; } @media (min-width: 1024px) { .sidebar { display: block; } }
- 14. Agenda What Why How Bootstrap Demo Bootstrap
- 15. Bootstrap • Responsive Front End Framework • HTML, CSS and JavaScript • Mobile First http://getbootstrap.com • Number 1 project on GitHub (forks/stars)
- 16. Fluid Grid • 12 column default • 4 Breakpoints – Large > 1200px – Medium > 992px – Small > 768px – Extra Small < 768x • Column Span Style Classes – col-md-6 – col-xs-12
- 17. Visualforce + Bootstrap • Visualforce is container – Thin wrapper around HTML markup – Provides access to data • Minimal Page Generation – No <head>, <body> tags – Exclude standard style sheets
- 18. Visualforce + Bootstrap • Avoid Most Standard Components – No <apex:pageblock /> – not responsive – <apex:includeScript>, <apex:stylesheet/> – <apex:outputText> – <apex:repeat /> • Forms versus Remoting – Remoting = fast – Forms + rerender = DOM manipulation
- 19. Agenda What Why How Bootstrap DDeemmoo
- 20. Demo • Blog landing page – Recent posts – Comments – Search – Social media • http://bobbuzz.me.uk/SF1RD • Github : http://bobbuzz.me.uk/SF1GH
- 21. Code 12 Post Post Post Search About 9 3 Post Post Post Search About
- 22. Code
- 23. Code
- 24. Challenge - Images • Desktop images can be large • Use bandwidth, memory • In 2012, a survey found that 86% of sites deliver the same content regardless of device: – http://bobbuzz.me.uk/1kMbZs9
- 25. Solution - Images • Download and hide – All images, every device – Only show subset • Download and shrink – One image, resized – Wasteful
- 26. Future Solution - Images • HTML5 Picture element – Multiple images on server – Client loads best image for device <picture> <source media="(min-width: 1024px)” src=”large_image”></source> <source media="(min-width: 768px)” src=“medium_image”></source> <source src=“small_image"></source> <img src=“fallback_image"></img> </picture> • http://caniuse.com/#feat=picture – Chrome/Opera – experimental – Firefox – configure preference
- 27. Solution - Images • Picturefill, by Scott Jehl – Multiple images on server – Client loads best image for device – Uses JavaScript – image loaded after DOM ready <span data-picture="1" data-alt=”BlogImage"> <span data-src=”large_image" data-media="(min-width: 1024px)"></span> <span data-src=“medium_image" data-media="(min-width: 768px)"></span> <span data-src=“small_image"></span> </span> • http://bobbuzz.me.uk/RIcMD2
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.