Websites for Mobile Devices
Download as PPTX, PDF0 likes506 views
Digital Bungalow aims to create effective websites by prioritizing mobile-first design and user experience. They emphasize responsive design that adapts to various devices and highlight their success in improving client engagement through innovative web solutions. The company has a proven track record with notable clients and is experiencing significant growth.
Websites for Mobile Devices
- 2. Agenda I. About Digital Bungalow II. Mobile First Design and UX III. Responsive Design and Development IV. Web Engagement Management V. Work
- 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
- 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