Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ten Lessons in Designing Content for Mobile

73,027 views

Published on

A look into ten ways to better equip yourself for the challenges of designing content for mobile.

Presentation for BrightonSEO 2015.

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ten Lessons in Designing Content for Mobile

  1. 1. DESIGNING CONTENT FOR MOBILE Vicke Cheung  @VickeKaravan
  2. 2. MOBILE is a big deal.
  3. 3. MOBILE is a big deal. set to get even bigger.
  4. 4. At SearchLove London 2014, Will Critchlow presented…
  5. 5. …concluding that… “CONTENT MARKETING IS MOBILE MARKETING ” slideshare.net/DistilledSEO/ searchlove-london-will-critchlow-the-threat-of-mobile
  6. 6. Things weren’t always this way.
  7. 7. My first Distilled project from 2012
  8. 8. …and as seen on mobile… (in other words: no mobile considerations!)
  9. 9. We’ve come a long way since then.
  10. 10. podio.com/site /creative-routines
  11. 11. photoworld.com /photos-on-the-web
  12. 12. concerthotels.com /worlds-greatest -vocal-ranges
  13. 13. Put your learning caps on!
  14. 14. EMBRACE THE TRUE MEANING OF MOBILE FIRST Lesson No. 1
  15. 15. “MOBILE FIRST” DOES NOT MEAN… …to have a good fallback for mobile.
  16. 16. “MOBILE FIRST” DOES NOT MEAN… …nail desktop version first then implement mobile from it.
  17. 17. It means design and build the MOBILE version FIRST.
  18. 18. In 2010, Ethan Marcotte coined the term “Responsive Web Design”. alistapart.com/article/responsive-web-design
  19. 19. This is generally associated with building a flexible desktop site…
  20. 20. …that can therefore adapt well to smaller display i.e. mobile.
  21. 21. Method 1 =So… ?Method 2 Step 1. Step 2.
  22. 22. Method 1 =So… ?Method 2 I’m afraid not.
  23. 23. Method 1 Step 1. Loads of awesome features using cutting- edge technology Step 2.
  24. 24. Method 1 Step 1. Loads of awesome features using cutting- edge technology Not compatible with the awesomeness…so left with a watered- down version. Step 2.
  25. 25. Method 2 Step 1. Step 2. Aware of mobile constraints and can work with them from the start Add features later on to desktop only if it enriches the experience
  26. 26. PROBLEM Space is a premium.
  27. 27. SOLUTION KISS principle ( Keep it simple, stupid. )
  28. 28. KEEP IT SIMPLE STUPID Lesson No. 2
  29. 29. John Maeda “The simplest way to achieve simplicity is through thoughtful reduction. ” Rule Number 1, The Laws of Simplicity
  30. 30. In other words… Start designing with only the most vital elements of your content or story.
  31. 31. My content crush of 2014…
  32. 32. sins.nfb.ca
  33. 33. Doubting Thomas (aka Vicke Cheung) “There’s no way it’ll be as good on mobile. ”
  34. 34. I was wrong!
  35. 35. Keep it simple IT TICKED THIS BOX
  36. 36. Seven sins Supporting video stills There’s focus on the core elements of the story
  37. 37. Notice anything wrong?
  38. 38. Orphan alert!
  39. 39. LEARN TO LET GO, PLAN FOR CHANGE Lesson No. 3
  40. 40. TRANSITIONING FROM A PRINT DESIGNER Hey, I think the alignment is 2mm out! Ok, let’s try another test print.
  41. 41. TO DESIGNING FOR WEB Hey, this looks different in Safari! …Sure …and?
  42. 42. IT’S TOUGH. But then you learn…
  43. 43. It’s about… designing a fluid framework for content and not meticulous control.
  44. 44. It’s about… understanding that not every device will render exactly as your designs.
  45. 45. It’s about… ALLOWING FOR CHANGE.
  46. 46. It’s pointless designing for a specific screen size.
  47. 47. There are far too many! screensiz.es
  48. 48. Lesson No. 4 MAKE DECISIONS WITH CONTEXT IN MIND
  49. 49. Work in progress, Distilled.
  50. 50. Developer feedback “Looks good, but probably change the fixed bar at the bottom – it looks too much like the native mobile UI. ”
  51. 51. Huh?…
  52. 52. Android iOS
  53. 53. This is the problem.
  54. 54. Don’t fall into the trap of only designing for devices you know.
  55. 55. Be aware of your design in the context of different operating systems.
  56. 56. TEST ON REAL DEVICES Lesson No. 5
  57. 57. Do you know about Chrome’s in-built mobile emulator?
  58. 58. Right click > Inspect Element
  59. 59. Click the mobile icon to start emulator
  60. 60. Convenient testing at your fingertips
  61. 61. Saves your desk from looking like this.
  62. 62. This mobile emulator is a great tool. But…
  63. 63. It’s no substitute for the real deal.
  64. 64. BECAUSE You’re at a greater distance from your computer than you would be if using a mobile device.
  65. 65. BECAUSE A cursor’s precision is misleading if you’re designing for thumb and finger interactions.
  66. 66. 12Lorem Ipsum Take this design for example. Seems fine in theory…
  67. 67. 12Lorem Ipsu m 100%8:08 AM But in practice, with touchscreen devices…
  68. 68. Your finger obscures the number if you try to tap on the arrows. 12Lorem Ipsu m 100%8:08 AM
  69. 69. LASTLY, DON’T FORGET Hover states don’t exist on touchscreen devices!
  70. 70. All these factors can influence your design. e.g. FONT SIZING / SPACING / STYLING
  71. 71. So check in now and again on a real device.
  72. 72. Lesson No. 6 DON’T ALWAYS TRY TO REINVENT THE WHEEL
  73. 73. Everyone wants to be an INNOVATOR.
  74. 74. But creating unique UI and UX elements comes with a risk.
  75. 75. You risk confusing your users*. *who then leave and may never return!
  76. 76. SOLUTION Use patterns.
  77. 77. Patterns are designed solutions to common problems.
  78. 78. FOR EXAMPLE The hamburger menu
  79. 79. You see this on any website, and you know what it does. google.com/drive
  80. 80. But if we were to alter the icon… Suddenly, you’re left confused. google.com/drive
  81. 81. This is just one example of many.
  82. 82. Check out… pttrns.com
  83. 83. IN SUMMARY Make use of tried and tested patterns
  84. 84. IN SUMMARY Avoid implementing new elements for the sake of uniqueness!
  85. 85. BE OPEN TO INSPIRATION Lesson No. 7
  86. 86. BE CURIOUS [  PART ONE  ]
  87. 87. I’m always on the lookout for great mobile design.
  88. 88. By building a bank of inspiration now, it’ll come in handy sooner or later. pinterest.com/thlco/design-mobile-tablet
  89. 89. ASK QUESTIONS [  PART TWO  ]
  90. 90. QUESTION I found an awesome responsive website; how can we make ours like that?
  91. 91. Check in with a developer… ANSWER
  92. 92. They will have good recommendations on what is feasible or not.
  93. 93. Developers are also great at knowing when to sacrifice design for performance…
  94. 94. …because…
  95. 95. Lesson No. 8 REMEMBER: FORM FOLLOWS FUNCTION
  96. 96. This golden rule applies to every facet of design…
  97. 97. …and design for web & mobile is no different.
  98. 98. bradfrost.com/blog/web/ responsive-web-design-missing-the-point/ This blog post has been quoted from time and time again…
  99. 99. Brad Frost “Your visitors don’t give a shit if you’re site is responsive. ” bradfrost.com/blog/web/ responsive-web-design-missing-the-point/
  100. 100. Confused? Carry on reading…
  101. 101. Brad Frost “They DO give a shit if they can’t get done what they need to get done. ”bradfrost.com/blog/web/ responsive-web-design-missing-the-point/
  102. 102. Brad Frost “They DO give a shit when your site takes 20 seconds to load. ”bradfrost.com/blog/web/ responsive-web-design-missing-the-point/
  103. 103. THE POINT IS It’s not enough to have content responsive on a purely visual level…
  104. 104. Performance is KEY. THE POINT IS
  105. 105. Longer load time = Higher rate of abandonment
  106. 106. Remember Chrome’s in-built mobile emulator?
  107. 107. It can also emulate network speeds.
  108. 108. Don’t assume your users will always be connected to wifi.
  109. 109. So what can you do?…
  110. 110. Lesson No. 9 SERVE SELECTIVELY
  111. 111. Let’s take this piece for example. podio.com/site/budget-busters
  112. 112. It responds fluidly from mobile to larger screens podio.com/site/budget-busters
  113. 113. The image will look great at all sizes as I’ve used the highest res possible. podio.com/site/budget-busters
  114. 114. Job done, right?
  115. 115. Wrong!
  116. 116. Don’t serve to same large image file to mobile as you do for desktop.
  117. 117. Save versions of the image in different sizes. INSTEAD
  118. 118. podio.com/site/budget-busters image-small.jpg image.jpg
  119. 119. Use media queries or javascript to specify when each image size should load
  120. 120. Mobile devices will not be burdened with loading huge desktop images. THEREFORE
  121. 121. Planning all these variations isn’t simple…
  122. 122. But it’s made easier by starting MOBILE FIRST.
  123. 123. Wrapping up now…
  124. 124. My future self “Wow, those slides from BrightonSEO 2015 are so outdated now! ”
  125. 125. It sums up our rapidly changing industry.
  126. 126. But what you can bank on not changing is…
  127. 127. We’ll always have to be USER-CENTRIC.
  128. 128. All these lessons have boiled down to this…
  129. 129. Lesson No. 10 PUT YOUR USERS FIRST
  130. 130. All technological changes aside…
  131. 131. Recognising your users’ needs is paramount to success.
  132. 132. THANK YOU! @VickeKaravan vicke.cheung@distilled.net Vicke Cheung

×