66
Welcome Please take the poll along the right of the screen.
| Date post: | 05-Sep-2014 |
| Category: |
Mobile |
| Upload: | exacttarget |
| View: | 1,085 times |
| Download: | 2 times |
WelcomePlease take the poll along the
right of the screen.
Your active participation is encouraged Please use the chat function and send to ‘All Panelist’ to ask questions
Webinar Follow-up
Watch your inbox
Presentation will be recorded and shared in a follow-up email.
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.
Advanced Responsive DesignMarch 27th, 2014
Agenda • Designing for Small Screens and Touch Interfaces
• Responsive Email Coding Techniques
• Sustainable Responsive Workflow
• Questions
• Resources
Designing for Small Screens and Touch Interfaces
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
Designing for Touch Interfaces
• 44px Minimum Button (Full-width even better!)
• Left or Center Aligned Text
• Adequate Spacing for Touch Accuracy
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
CSS Buttons
RECOMMENDATION:
Use CSS to style buttons for complete scalability & clarity
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
- Ben Schneiderman
What mobile subscribers are used to interacting with
Google Maps
YouTube
Google+
At Home in the Mobile UI
Clean ContentBreaks
Familiar, easy on the eyes and easy to skim
Clean ContentBreaksFamiliar, easy on the eyes and easy to skim
RECOMMENDATION:
Use containers, rules, divider graphics and spacing to define content breaks
Communication at the speed of instant recognition
Icons = Instant Communication
RECOMMENDATION:
Establish an icon set for your mobile content and USE THEM OFTEN
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
28px
17px
24px
Mobile UI Font Sizes
RECOMMENDATION:
Headlines ≥ 28px
Body Text ≥ 17px
Mo’ pixels,Mo’ problems…
HD = More Beautiful Pixels!
More Beautiful Pixels! = Larger Files
Larger Files = Slower Downloads
Slower Downloads = Loss of Engagement
Images and HD Mobile Displays
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
Compression and File Size
320 x 395JPG Quality: 7031KB
640 x 789 (200%)JPG Quality: 7070KB
640 x 789 (200%)JPG Quality: 3033KB
RECOMMENDATION:
Create mobile photos at
200% and output at 30%
JPEG Quality
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
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
Smart Objects are your friends
HD Images & Creative Workflow
“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
Case in Point: Android Gmail App
Android 9%of email opensaccording to Litmus
About 70%in the Gmail Appaccording to Brightwave user survey
Creative Control Where You Can
RECOMMENDATION:Make style decisions not mockup decisions
Creative Control Where You Can
Responsive Email Coding Techniques
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
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
Wrapping content with fluid widths
Wrapping content with fluid widths
Wrapping content with fluid widths
100% width buttons
100% width buttons
100% width buttons
Stacking left column on right
Stacking left column on right
Stacking left column on right
Stacking right column on left
Stacking right column on left
Stacking right column on left
Stacking navigation
Stacking navigation
Stacking navigation
Create columns from vertical content
Create columns from vertical content
Create columns from vertical content
Showing/Hiding content on mobile
Showing/Hiding content on mobile
Showing/Hiding content on mobile
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
Sustainable Responsive Workflow
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
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
Framework examples
Framework examples
Questions?Please type questions in the chat panel to ‘All Panelist'
Resources:
http://bit.ly/designtoolkit
Follow the ExactTarget Blog: http://www.exacttarget.com/blog/category/mobile/design-mobile/
Download The Design ToolKit
Upcoming Webinars:
http://www.exacttarget.com/resource-center/webinars Register:
April 29th Bridging the Digital DivideThe Role of the CMO in the Digital Era
