Presenter: Sean Cunningham, Creative Director, Digital Bungalow More people now access the internet via mobile devices than by desktop computers, so, if you’re designing or updating a website, think about putting mobile first. Content and visuals need to be short and sweet to display well on small screens. This workshop looks at what’s involved in designing your mobile site before your PC site — but we’ll also talk about how to go mobile if you already have a website.

2. Agenda
I. About Digital Bungalow
II. Mobile First Design and UX
III. Responsive Design and Development
IV. Web Engagement Management
V. Work

3. About Digital Bungalow

4. DIGITAL BUNGALOW
»
At Digital Bungalow, our mission is to build the most effective websites in
the world. We leverage innovative strategies, brilliant branding,
extraordinary user experiences, and smart technology to deliver amazing
client results—all on well-crafted, easy to use platforms.
»
When we launch a website, we like to say that we’ve only crossed the
starting line. Through robust digital marketing, smart enhancements, and
responsive support, we enable our clients to delight their users and
produce industry-leading results.
»
Our strong roster of B2C clients for whom we have completed similar
engagements includes Dow Jones, The Tannery, Easy Street Shoes,
Hologic, Humana, National Amusements, Savannah College of Art &
Design, Visnick & Caulfield
»
With a team of 35 employees, we’re big enough to be full service, but
small enough to be nimble. All services are provided in-house, so quality
is strong and consistent. And we’re growing forty percent annually, which
shows that it’s working.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

5. Mobile First UX & Design

6. MOBILE FIRST USER EXPERIENCE DESIGN
6
Mobile Consumer
10B+
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

7. MOBILE FIRST USER EXPERIENCE DESIGN
For years, most web teams have designed products and information for the
desktop/laptop PC. For these teams, mobile (if it even happened) was a barebones
part of the desktop version. This approach actually made sense for a while. Browsing
the Web on mobile phones was painful; carriers controlled access to the Web on their
devices; and mobile network speeds often made everything grind to a halt. So few
people
used the Web on mobiles and those that did were frequently faced with an
unpleasant experience.
But things have changed so dramatically over the past few years that starting with the
desktop may be an increasingly backwards way of thinking about a Web product.
Designing for mobile first not only prepares you for the explosive growth and
opportunities in this space, it forces you to focus and enables you to innovate.

8. MOBILE FIRST USER EXPERIENCE DESIGN
GROWTH = OPPORTUNITY
Mobile Web growth has outpaced desktop Web
growth 8x Global mobile data traffic should
grow 26x over next 5 years
100M+
PC
1B+
Mobile Consumer
10B+
cell phone
desktop
1993
2002-2005
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential
2020

9. MOBILE FIRST USER EXPERIENCE DESIGN
Social
» Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile
» Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M
» Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago
Commerce
» Amazon: over $1 billion spent via mobile devices in the past 12 months
» eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009
» Best Buy: mobile Web users doubling every year:
Mobile Consumer
» 30M (10), 17M (09), 6M (08)
10B+
Productivity & Media
» Google: mobile searches grew 130% in Q3 2010
» Pandora: 50% of total user base subscribes to the service on mobile
» Email: 70% of smartphone users access email on mobile device
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

10. Responsive Design

11. RESPONSIVE DESIGN
»
Responsive design is a seamless approach to designing content,
images, and navigation to maximize the usability of a website
across this growing range of devices.
»
Rather than simply having a mobile website, or adapting a fullscreen website to work on smaller devices, we will instead design a
native user experience for each screen size which takes into
account the differences among users on different devices in goals
and needs.
»
The result will be a website which users will experience as
completely “responsive” to their needs, regardless of their device,
yet which will be managed from a single back-end CMS.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

12. RESPONSIVE DESIGN SHOWCASE CINEMAS
»
Relevancy: Online branding, UX design, responsive design, mobile.
»
Challenges: Long-time DB client National Amusements wanted to drive
engagement and purchases across mobile devices, tablets, and PC’s; and to
increase purchase size and frequency.
»
Insight: Don’t just promote movies - promote the theaters themselves as
destinations. Design a website that allows users, across various devices, to navigate
to their desired content easily while always keeping purchases just one click away.
Promote cross-selling and upselling opportunities.
»
Solution: Launch a new website with an improved information hierarchy, enhanced
branding, and responsive design, which utilizes dynamic CSS to serve consumers
with appropriate content for their mobile devices, tablets, and PCs, all from a single
Drupal CMS platform.
»
In the Client’s words: Sue Nicholson, Internet Marketing and Content
Management, National Amusements Inc. "The Digital Bungalow Team has
redesigned our website with specific detail to every aspect of our business. The
complex integration with our vendors, loyalty programs, social media and email
marketing has exceeded our expectations. They provided a realistic timeline and
maintained an organized schedule of tasks every step of the way. We look forward to
their continued help in developing new strategies to improve our online presence.”

13. RESPONSIVE DESIGN SHOWCASE CINEMAS
»
We start here with the mobile first approach. Insights tell us that users on mobile are
ideally looking for what movies are playing, where, when and how can they get
tickets. This is represented by 3 to 4 simple navigation items.
»
As the width of the site widens, the Main Navigation expands from 3 items to 6 items.
Movie filtering becomes available as the target areas improve.
»
The left column now widens and the “showcase and tickets” column appears to the
left where in the mobile it was a 2nd tier navigation. This is because at the tablet level
the user has more real estate to interact and spend time with the site.

14. RESPONSIVE DESIGN SHOWCASE CINEMAS
»
The tablet experience next expands to desktop where we see a larger global
navigation to accommodate extras such as Businesses and About us — that are
more the use case for desktop versus mobile or tablet.
»
Not apparent to the user, the trailer video files have been accordingly sized up and
down to ensure optimal bandwidth and playback for the device.
»
The desktop also allows for promotional backdrops and takeovers.

15. RESPONSIVE DESIGN EMAILS & NEWSLETTERS
Email Open Rates
Industry
Educational Services
»
Desktop Mobile
19%
64%
Webmail
17%
Responsive design emails
and newsletters are
relatively new to digital.
Designing for mobile isn’t
simply a matter of taking
a crack at writing mobilespecific CSS.
See page 17 for more.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential
15

16. RESPONSIVE DESIGN EMAIL AND NEWSLETTERS
»
Single-column layouts that are no wider than 500 to 600 pixels work best on
mobile devices. They’re easier to read, and if they fall apart, they’ll do so more
gracefully.
»
Links and buttons should have a minimum target area of 44 × 44 pixels, as per
Apple guidelines. Nothing is more unusable than clouds of tiny links on
touchscreen devices.
»
The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when
styling text, because anything smaller will be upscaled and could break your
layout. Alternately, you can override this behavior in your style sheet (do so with
care).
»
More than ever, keep your message concise, and place all important design
elements in the upper portion of the email, if possible. Scrolling for miles is much
harder on a touchscreen than with a mouse.
»
When possible, use display: none; to hide extraneous details in your mobile
layout. Elements like social sharing buttons may be great in the desktop inbox,
but aren’t always easy to use by the recipient on mobile devices.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

17. RESPONSIVE DESIGN LANDING PAGES
»
Responsive design landing pages should be looked at from the
desktop experience first the optimized for mobile then tablet.
»
A greater library of best practices are in place for desktop whereas
mobile is emerging in this space.
»
Choosing a responsive theme to create on top of is the best choice
for responsive landing pages.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

18. RESPONSIVE DESIGN LANDING PAGES
»
Create one landing page per source (this can be done using responsive)
»
Keep landing pages campaign specific.
»
Reach every visitor with MOBILE OPTIMIZATION (this can be done using
responsive)
»
Use dynamic content substitution
»
Keep landing pages offer-specific
»
Grade your visitors
»
Test, test, test, test (did I say test?)
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

19. WEM

20. WEB ENGAGEMENT MANAGEMENT THE PROBLEM
»
When looking at site traffic, most analytics are done in aggregate.
The aggregate results show us how the “Average User” engages
with the site.
»
However, understanding analytics and content needs in aggregate
is no more useful then utilizing the average temperature for a year
in deciding what clothes to wear on a given day.
»
As a result, most websites don’t feel very smart to the user.
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

21. WEB ENGAGEMENT MANAGEMENT NORDSTROM
Example:
Nordstrom.com
Homepage
Not Smart!
Use Case:
Semi-Frequent
Male Shopper
(cookied)
Smart!
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

22. WEB ENGAGEMENT MANAGEMENT NORDSTROM
Example:
Nordstrom
Email
Marketing
Use Case:
Semi-Frequent
Male Shopper
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential
Wasted
Impression
=
Not Smart!

23. Work

29. DIGITAL BUNGALOW AWARDS IMA
Congratulations to Hologic and Digital Bungalow
2012 BEST IN CLASS WEBSITE
BreastTomo.com
Congratulations to Visnick & Caulfield and Digital Bungalow
2012 BEST IN CLASS WEBSITE
vca-arch.com
Congratulations to Showcase Cinemas and Digital Bungalow
2012 OUTSTANDING ACHIEVEMENT
showcasecinemas.com
Congratulations to Humana and Digital Bungalow
2012 OUTSTANDING ACHIEVEMENT
mywell-being.com
Congratulations to UMass and Digital Bungalow
2012 OUTSTANDING ACHIEVEMENT
Umassdining.com
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

30. DIGITAL BUNGALOW AWARDS NEDMA
Congratulations to Visnick & Caulfield and Digital Bungalow
2013 BEST WEBSITE DESIGN
vca-arch.com
Congratulations to Humana and Digital Bungalow
2013 MOST INNOVATIVE ONLINE FORMAT
mywell-being.com
Congratulations to Humana and Digital Bungalow
2013 BEST WEBSITE DESIGN
mywell-being.com
Congratulations to Easy Street Shoes and Digital Bungalow
2013 BEST eCommerce Website
easystreetshoes.com
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

31. DIGITAL BUNGALOW AWARDS ACQUIA
Congratulations to Humana and Digital Bungalow
2013 OVERALL BEST IN SHOW
mywell-being.com
Congratulations to Humana and Digital Bungalow
2013 BEST WEB EXPERIENCE MANEGEMENT SITE
mywell-being.com
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

32. DIGITAL BUNGALOW AWARDS IMA
Congratulations to National Amusements and Digital Bungalow
2013 GOLD AWARD
showcasesuperlux.com
Congratulations to UMass and Digital Bungalow
2013 SILVER AWARD
umassdining.com
Congratulations to Visnick & Caulfield and Digital Bungalow
2013 SILVER AWARD
vca-arch.com
Congratulations to SCAD and Digital Bungalow
2013 SILVER AWARD
scad.edu
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential

33. DIGITAL BUNGALOW AWARDS DAVEY
Congratulations to SCAD and Digital Bungalow
2013 SILVER AWARD
showcasesuperlux.com
Congratulations to UMass and Digital Bungalow
2013 SILVER AWARD
umassdining.com
Congratulations to Visnick & Caulfield and Digital Bungalow
2013 SILVER AWARD
vca-arch.com
|
209 Essex Street 2nd Floor Salem, MA 01970 www.digitalbungalow.com | Confidential