Mobilizing Your Brand - Responsive Web Design


Published on

Tuna Traffic's Saravanan Shanmugabaskaran and Mike Zielonka speak the Wisconsin Chapter of Society of Marketing Professional Services about Mobilizing your brand.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Health Care Public Relations & Marketing Society.
  • History – Team - etc
  • According to Google, around 60% of people are unlikely to return to a site that’s not mobile friendly. User engagement increases with a mobile-friendly design.
  • Allow interaction – halle’s website
  • Mike starts
  • Make your website accessible to people 24/7 - people are always on the go, and have the technology to surf the web. Make your company accesible via mobile phone or desktop and provide the information your users are looking for. Replicate your brand’s same design and feel weather on mobile or a desktopA poorly designed mobile website will not have full featureskeep your users on your mobile website on not on the competor’s siteSEO
  • it QuickMobile users are short on timePrioritize content on what you want people to seeUse your analytics to figure out what desktop users are looking atCompress images
  • Make accessible to all mobile devicesLandscape, portrait, Keep users in the same page when they change orientationGet rid of flash! Use HTML 5
  • By using technoology at their finger tips, let your customers get what they need
  • Mobilizing Your Brand - Responsive Web Design

    1. 1. Mobilizing Your Brand Presented by: Mike Zielonka & Saravanan “Sud” Shanmugabaskaran SMPSTuna Traffic Copyright 2012
    2. 2. Tuna Traffic Saravanan “Sud” Shanmugabaskaran Director of Client Solutions Mike Zielonka Director of Web StrategyTuna Traffic Copyright 2012
    3. 3. Tuna Traffic We help our clients get found online and “on ground” Web & Graphic Design Search Engine Optimization Social Media Email Marketing We bend technology to meet your needsTuna Traffic Copyright 2012
    4. 4. Mobilizing Your Brand Mobile Website Development Smartphone Apps Next Generation Social Media & WidgetsTuna Traffic Copyright 2012
    5. 5. Is Your Site Ready? How does your company’s website look on a smartphone? According to Google, around 60% of people are unlikely to return to a site that’s not mobile friendly. User engagement increases with a mobile- friendly design.Tuna Traffic Copyright 2012
    6. 6. Is Your Site Ready? HOW AM I SUPPOSE TO NAVIGATE ON THIS SMALL SCREEN?Tuna Traffic Copyright 2012
    7. 7. Whole Lifestyle Nutrition IsTuna Traffic Copyright 2012
    8. 8. Why Do I Need a Mobile Friendly Site? 1-in-7 Searches are mobile Mobile Searches have grown by 4x since 2010 By 2013, more people will use their smart phones to get online than PCsTuna Traffic Copyright 2012
    9. 9. Build It and They Will Visit? They are already visiting! I just built a mobile site, people will Dude, we visit! were already visiting…Tuna Traffic Copyright 2012
    10. 10. But There Are So Many Devices… Different devices: iPhone iPad Android Blackberry Windows Different screen sizes Do I need to build a separate site for each?Tuna Traffic Copyright 2012
    11. 11. Mobile Website Development Users expect their mobile experience to be as good as their desktop experience Giving your visitors a “warm fuzzy” mobile experience will help your brand Have you been frustrated when a site is not mobile?Tuna Traffic Copyright 2012
    12. 12. Interactions of Mobile Audiences What kind of interaction do we give our mobile visitors? Give them business information Let them browse & interact with data ecommerce, recipes, blogs, social media, etcTuna Traffic Copyright 2012
    13. 13. What Problem Do You Want To Solve? Mobile vs Tablet vs Laptop UX may vary BUT the root problem you are solving stays the same If you are a baker…you want to sell more cupcakes no matter what device a visitor is using What problem do you want to solve? How can Mobile add to your marketing strategy?Tuna Traffic Copyright 2012
    14. 14. 3 Types of Mobile Solutions Responsive Web Design (RWD)* Separate Mobile Site Native App *Tuna RecommendedTuna Traffic Copyright 2012
    15. 15. Desktop SitesTuna Traffic Copyright 2012
    16. 16. iPadTuna Traffic Copyright 2012
    17. 17. iPadTuna Traffic Copyright 2012
    18. 18. iPhoneTuna Traffic Copyright 2012
    19. 19. Responsive Web Design What is Responsive Web Design (RWD)? A website designed to dynamically respond to the device screen it is being viewed onTuna Traffic Copyright 2012
    20. 20. Fixing Our Problems With Responsive Web DesignTuna Traffic Copyright 2012
    21. 21. Fixing Our Problems With Responsive Web Design #2Tuna Traffic Copyright 2012
    22. 22. Fixing Our Problems With Responsive Web Design #2Tuna Traffic Copyright 2012
    23. 23. RWD Advantages Advantages Your site responds to the device’s screen size no matter what width or height It is Google’s recommended method for mobile sites The majority of websites will greatly benefit from a RWD implementation (very complex sites such as eBay would have a near impossible mission to deliver a full responsive site)Tuna Traffic Copyright 2012
    24. 24. RWD Disadvantages Disadvantages There are some scenarios where it can be more expensive than 2 sites Supporting older browsers can be troublesome Creating certain outcomes or elements for UX or UI can be complexTuna Traffic Copyright 2012
    25. 25. RWD Best Practices Keep it Quick Simplify Navigation Mobile users are Use big navigation usually short on time buttons Don’t list everything Fasssst server Have search available Less is More White space is your friendTuna Traffic Copyright 2012
    26. 26. RWD Best Practices Be Thumb-Friendly Design for Visibility People use their thumbs! Make it easy for Use large buttons customers to read People are already squinting their eyes!Tuna Traffic Copyright 2012
    27. 27. RWD Best Practices Make it Accessible Make it Easy to Convert Your site should work Touch to call phone across all mobile numbers platforms and orientations Do NOT use Adobe FlashTuna Traffic Copyright 2012
    28. 28. RWD Best Practices Make it Local Make it Seamless “find a store near you” If you have a login Easy maps integration portion of your desktop site, make the same accessible via mobile Maintain key features as much as you canTuna Traffic Copyright 2012
    29. 29. RWD Best Practices Listen & Learn from your mobile data Use analytics to help you make better decisions on what to displayTuna Traffic Copyright 2012
    30. 30. There’s an App for thatTuna Traffic Copyright 2012
    31. 31. There’s An App For That Smart phones are here to stay… How can our businesses benefit from a smartphone app? Apps for customers & Apps for internal business customersTuna Traffic Copyright 2012
    32. 32. Benefits To Our Business Connect with your on-the-go customers or employees by giving them convenience Make processes easier and streamlinedTuna Traffic Copyright 2012
    33. 33. Benefits To Our Business Competitive Advantage Drive better customer service than your competitors Keep up with the Jones’ Strengthen your company’s brandTuna Traffic Copyright 2012
    34. 34. Tuna Engineering Co Tuna Engineering Co – Customer Proofs Creates iPad App to streamline processes Notifies client via APP and email that proofs are complete Client uses iPad app to approve proofs, add notes and is able to “scribble” Everything is digital andTuna Traffic Copyright 2012
    35. 35. Tuna Engineering Co Tuna Engineering Co - Service Client has issue with product Client logs in to firm’s app Makes service ticket, takes photo with iPad, comments on problem and submits to firm Firm’s field agent goes to client, pulls up service ticket on iPad and makes notes etc.Tuna Traffic Copyright 2012
    36. 36. What Can We Do With Apps? Collect Payment List up-to-date pricing Have your customers for your customers reach support easily Give customers tips on Notify your customers your products/services with updates Get information from your customersTuna Traffic Copyright 2012
    37. 37. But Apps are so expensive! How do they work? How can we build them? What drives the content?Tuna Traffic Copyright 2012
    38. 38. Different Platforms Apple, Blackberry, Android, WindowsTuna Traffic Copyright 2012
    39. 39. What is a Native App? Native App Made specifically for each mobile device Must be purchased and downloaded through an App Store or marketplace. Must meet requirements of smart phone’s operating system Analytic data can be collected from the user’s phone Can be costly – Average is $8,000 for a small appTuna Traffic Copyright 2012
    40. 40. Examples of Native Apps Facebook Amazon Subway NFC checkout Pizza Hut City of ColumbusTuna Traffic Copyright 2012
    41. 41. City of Columbus AppTuna Traffic Copyright 2012
    42. 42. What is a Web App? Web App Internet enabled apps Think of it as a website built like an app. Accessed through the device’s mobile browser (ie: Safari) Lower cost May not be able to use all of the phone’s featuresTuna Traffic Copyright 2012
    43. 43. What is a Web App?Tuna Traffic Copyright 2012
    44. 44. Native vs Web AppTuna Traffic Copyright 2012
    45. 45. Next Gen Social Media & Widgets Mobile Friendly Emails Social Media Management in one location Social Media Widgets = InteractionTuna Traffic Copyright 2012
    46. 46. Mobile Friendly Emails Our clients use their phones to stay connected all the time Lets make sure they can read our Marketing emails!Tuna Traffic Copyright 2012
    47. 47. Solutions for Mobile Email Marketing “If you’re having trouble viewing this email, click here” Add link to email content that will be hosted on your website (mobile friendly) Have your templates designed to scale down easily with % based dimensions as opposed to fixed dimensions. 100% vs 100px Use an email marketing toolTuna Traffic Copyright 2012
    48. 48. Mobile Email Best Practices Keep your emails width Less than 600 Pixels Fonts need to be larger, content needs to be brief and precise Call to actions should be in the best real estate First sentence is SUPER important because that is what shows in the preview Avoid Tiny Nav Bars Use single columns Short subject linesTuna Traffic Copyright 2012
    49. 49. Email Marketing Tools Email tools have Mobile TemplatesTuna Traffic Copyright 2012
    50. 50. Our Favorite Email Tools Mail Chimp Constant ContactTuna Traffic Copyright 2012
    51. 51. Social Media Management Facebook, Twitter, Pinterest, Google+ ….what?Tuna Traffic Copyright 2012
    52. 52. How Do We Manage? How can we be smart about Social Media Management for business on mobile?Tuna Traffic Copyright 2012
    53. 53. Social Media Dashboards A one stop shop for all your social media management Manage multiple social profiles Schedule updates/tweets/posts Track your brand mentions GREAT analytics & reportingTuna Traffic Copyright 2012
    54. 54. Mobile Social Media DashboardsTuna Traffic Copyright 2012
    55. 55. Social Media Dashboards Collaborate with your marketing team Interactions are captured in one place One login for all accounts!Tuna Traffic Copyright 2012
    56. 56. Social Media Widgets = Interaction Social media is one of the best ways to drive interaction for your business How do we make it easy for our readers to share and comment?Tuna Traffic Copyright 2012
    57. 57. Social Sharing WidgetsTuna Traffic Copyright 2012
    58. 58. Social Sharing WidgetsTuna Traffic Copyright 2012
    59. 59. Social Sharing Widgets Make it easy to Share, Tweet, etc Very easy way for us to get our content in front of thousands of peopleTuna Traffic Copyright 2012
    60. 60. THANK YOU! @tunatraffic info@tunatraffic.comTuna Traffic Copyright 2012