responsive web design with visualforce
DESCRIPTION
Slide deck from my Salesforce1 World Tour talk on Responsive Design.TRANSCRIPT
Responsive DesignWith Visualforce PagesMay 22, 2014
Keir BowdenCTO, BrightGen@bob_buzzard
What
Why
How
Bootstrap
Demo
AgendaWhat
Demo Page
What is Responsive Design?
Pages respond to device– Viewport size
– Orientation
Term coined by Ethan Marcotte– http://bobbuzz.me.uk/1hI879K
TL;DL
What
Why
How
Bootstrap
Demo
Agenda
Why
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
What
Why
How
Bootstrap
Demo
Agenda
How
Pillar 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
Pillar 2 - Fluid Grid
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
Desktop
3
1
2
Phone1 2 3 4 5 6 7 8 9
10
11
12
1 2 3 4 5 6 7 8 910
11
12
Tablet
Pillar 3 - CSS Media Queries
Expression Limiting Scope of CSS.sidebar { display: none;}
@media (min-width: 1024px) { .sidebar { display: block; }}
What
Why
How
Bootstrap
Demo
Agenda
Bootstrap
Bootstrap
Responsive Front End Framework
HTML, CSS and JavaScript
Mobile First
Number 1 project on GitHub (forks/stars)
http://getbootstrap.com
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
Visualforce + Bootstrap
Visualforce is container– Thin wrapper around HTML markup
– Provides access to data
Minimal Page Generation– No <head>, <body> tags
– Exclude standard style sheeets
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
What
Why
How
Bootstrap
Demo
Agenda
Demo
Demo
Blog landing page– Recent posts
– Comments
– Search
– Social media
http://bobbuzz.me.uk/SF1RD
Github : http://bobbuzz.me.uk/SF1GH
Code
Post PostPost
SearchAbout
12
Post PostPost
SearchAbout
9 3
Code
Code
Challenges - Tables
Tables are wide
Columns wrap when narrow
Rows need to remain consistent
Tables - Solutions
Hide Columns– Bad idea
– Punishes mobile
– Allow add back
Scrolling table
Transform to list– No row/column comparison
http://demos.jquerymobile.com/1.4.2/table-reflow/
Challenges - Images
Desktop images can be large
Use bandwidth, memory
86% of sites deliver the same content regardless of device– http://bobbuzz.me.uk/1kMbZs9
Images - Solutions
Download and hide– All images, every device
– Only show subset
Download and shrink– One image, resized
– Wasteful
Images - Solutions
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=”BlogLImage"> <span data-src=“small_image"></span> <span data-src=“medium_image" data-media="(min-width: 46em)"></span> <span data-src=”large_image" data-media="(min-width: 64em)"></span></span>
http://bobbuzz.me.uk/RIcMD2
Thank You