advanced responsive design
DESCRIPTION
Whether you’re a tech-savvy coder, an engagement-focused marketer, or have a background in illustration and design, we’re betting that you’re ready to take you want to design better emails. Check out our presentation from our latest webinar, "Advanced Responsive Design for Mobile Devices.” This webinar explores design tactics for small screens and touch devices and showcases basics in HTML for responsive emails.TRANSCRIPT
![Page 1: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/1.jpg)
WelcomePlease take the poll along the
right of the screen.
![Page 2: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/2.jpg)
Your active participation is encouraged Please use the chat function and send to ‘All Panelist’ to ask questions
![Page 3: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/3.jpg)
Webinar Follow-up
Watch your inbox
Presentation will be recorded and shared in a follow-up email.
![Page 4: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/4.jpg)
Safe HarborSafe 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 statement 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 product 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 litigations, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, or 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-alesforce.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 Filing's 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 in 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.
![Page 5: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/5.jpg)
Advanced Responsive DesignMarch 27th, 2014
![Page 6: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/6.jpg)
Agenda • Designing for Small Screens and Touch Interfaces
• Responsive Email Coding Techniques
• Sustainable Responsive Workflow
• Questions
• Resources
![Page 9: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/9.jpg)
Designing for Small Screens and Touch Interfaces
![Page 10: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/10.jpg)
Designing for Small Screens• Content First: Top down Hierarchy
• Single column layout
• Contrast of value and color for content
distinction
• Large text size ensures readability
• Don’t cram - Legibility over length using
concise messaging
![Page 11: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/11.jpg)
Designing for Touch Interfaces
• 44px Minimum Button (Full-width even better!)
• Left or Center Aligned Text
• Adequate Spacing for Touch Accuracy
![Page 12: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/12.jpg)
Buttons for Touch Interfaces
• 44px Minimum Button (Full-width even better!)
• Left or Center DETAIL:Screen Resolution allows for more detail to be seen and more enticing visuals
• Watch your Language! Avoid using “click here” when users are actually “tapping”
• Aligned Text• Adequate Spacing for Touch Accuracy
![Page 13: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/13.jpg)
CSS Buttons
RECOMMENDATION:
Use CSS to style buttons for complete scalability & clarity
![Page 14: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/14.jpg)
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
- Ben Schneiderman
![Page 15: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/15.jpg)
What mobile subscribers are used to interacting with
Google Maps
YouTube
Google+
At Home in the Mobile UI
![Page 16: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/16.jpg)
Clean ContentBreaks
Familiar, easy on the eyes and easy to skim
![Page 17: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/17.jpg)
Clean ContentBreaksFamiliar, easy on the eyes and easy to skim
RECOMMENDATION:
Use containers, rules, divider graphics and spacing to define content breaks
![Page 18: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/18.jpg)
Communication at the speed of instant recognition
Icons = Instant Communication
RECOMMENDATION:
Establish an icon set for your mobile content and USE THEM OFTEN
![Page 19: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/19.jpg)
Mobile UI Font Sizes
Average font size in the UI is about 17px
Stand out from the surrounding UI with BIGGER fonts
20px
17px
15px
13px
![Page 20: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/20.jpg)
28px
17px
24px
Mobile UI Font Sizes
RECOMMENDATION:
Headlines ≥ 28px
Body Text ≥ 17px
![Page 21: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/21.jpg)
Mo’ pixels,Mo’ problems…
![Page 22: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/22.jpg)
HD = More Beautiful Pixels!
More Beautiful Pixels! = Larger Files
Larger Files = Slower Downloads
Slower Downloads = Loss of Engagement
Images and HD Mobile Displays
![Page 23: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/23.jpg)
Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es
Mobile Pixel DensityMost popular Pixel Density is 200%(“Retina Display”)
RECOMMENDATION:
Design for 200%Pixel Density
![Page 24: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/24.jpg)
Compression and File Size
320 x 395JPG Quality: 7031KB
640 x 789 (200%)JPG Quality: 7070KB
640 x 789 (200%)JPG Quality: 3033KB
![Page 25: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/25.jpg)
RECOMMENDATION:
Create mobile photos at
200% and output at 30%
JPEG Quality
![Page 26: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/26.jpg)
Some images need clarity more than others
Resolution Hierarchy
45 x 45JPG: 703KB
90 x 90 (200%)JPG: 303KB
90 x 90 (200%)JPG: 705KB
90 x 90 (200%)GIF5KB
90 x 90 (200%)PNG4KB
![Page 27: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/27.jpg)
RECOMMENDATION:
Design logos and
graphics for 200%
save as GIF or PNG90 x 90 (200%)GIF5KB
90 x 90 (200%)PNG4KB
Some images need clarity more than others
Resolution Hierarchy
![Page 28: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/28.jpg)
Smart Objects are your friends
HD Images & Creative Workflow
![Page 29: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/29.jpg)
“There's a new email client every day, whether, desktop, mobile or tablet. You can do your best to make the experience hold up across devices, but you can't make it perfect across devices”
- Alex Williams on 11 Things that Need to Die in Mobile Email
![Page 30: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/30.jpg)
Case in Point: Android Gmail App
Android 9%of email opensaccording to Litmus
About 70%in the Gmail Appaccording to Brightwave user survey
![Page 31: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/31.jpg)
Creative Control Where You Can
![Page 32: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/32.jpg)
RECOMMENDATION:Make style decisions not mockup decisions
Creative Control Where You Can
![Page 33: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/33.jpg)
Responsive Email Coding Techniques
![Page 34: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/34.jpg)
Overview of @media query styles
CSS is activated at 480px and smaller
Add body[yahoo] in front of every style class
Add yahoo=“fix” to the <body> tag
@media styles are applied to the HTML with class=“”
!important added to override in-line styles
![Page 35: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/35.jpg)
7 Responsive Email Techniques
• Wrapping content with fluid widths• 100% width buttons• Stacking left column on right• Stacking right column on left• Stacking navigation• Create columns from vertical content• Showing/Hiding content on mobile
![Page 36: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/36.jpg)
Wrapping content with fluid widths
![Page 37: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/37.jpg)
Wrapping content with fluid widths
![Page 38: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/38.jpg)
Wrapping content with fluid widths
![Page 39: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/39.jpg)
100% width buttons
![Page 40: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/40.jpg)
100% width buttons
![Page 41: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/41.jpg)
100% width buttons
![Page 42: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/42.jpg)
Stacking left column on right
![Page 43: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/43.jpg)
Stacking left column on right
![Page 44: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/44.jpg)
Stacking left column on right
![Page 45: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/45.jpg)
Stacking right column on left
![Page 46: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/46.jpg)
Stacking right column on left
![Page 47: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/47.jpg)
Stacking right column on left
![Page 48: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/48.jpg)
Stacking navigation
![Page 49: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/49.jpg)
Stacking navigation
![Page 50: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/50.jpg)
Stacking navigation
![Page 51: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/51.jpg)
Create columns from vertical content
![Page 52: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/52.jpg)
Create columns from vertical content
![Page 53: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/53.jpg)
Create columns from vertical content
![Page 54: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/54.jpg)
Showing/Hiding content on mobile
![Page 55: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/55.jpg)
Showing/Hiding content on mobile
![Page 56: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/56.jpg)
Showing/Hiding content on mobile
![Page 57: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/57.jpg)
Coding recommendations
Do not set too many fixed widths, the more fixed widths the more styles you’ll need to add to make the email responsive.
Design and build to give your audience the best experience possible
Don’t be afraid to try unconventional email coding techniques for mobile content
![Page 58: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/58.jpg)
Sustainable Responsive Workflow
![Page 59: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/59.jpg)
Sustainable responsive workflow
• Responsive emails take on average 1.5 – 2X longer to build over static campaigns• Develop a modular template to reduce build time• Design and development should work together to build a reusable
wireframe/framework• Pre-build modules
![Page 60: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/60.jpg)
Responsive Layout ModulesMobile
1
2
3
DesktopLeft column text drops
below image
Right column text drops below
image
Right column
image drops below body
text
![Page 61: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/61.jpg)
Framework examples
![Page 62: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/62.jpg)
Framework examples
![Page 63: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/63.jpg)
Questions?Please type questions in the chat panel to ‘All Panelist'
![Page 64: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/64.jpg)
Resources:
http://bit.ly/designtoolkit
Follow the ExactTarget Blog: http://www.exacttarget.com/blog/category/mobile/design-mobile/
Download The Design ToolKit
![Page 65: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/65.jpg)
Upcoming Webinars:
http://www.exacttarget.com/resource-center/webinars Register:
April 29th Bridging the Digital DivideThe Role of the CMO in the Digital Era
![Page 66: Advanced Responsive Design](https://reader037.vdocuments.us/reader037/viewer/2022110113/5409dc088d7f72384c8b45b1/html5/thumbnails/66.jpg)