Adapting Your Website to a Mobile World
•Download as PPTX, PDF•
4 likes•1,686 views
According to the Pew Research Center's Cell Internet Use 2013 survey, 57% of all American adults use their cell phone to access the Internet or use e-mail. The International Data Corporation projects that tablets will outsell PCs overall by 2015. It is very likely that an increasing percentage of the visits to your business or practice website are originating from a mobile device. How can you build a web presence that meets the needs of all of your site visitors without breaking your budget? Learn about the latest trends in web development to answer that question.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Similar to Adapting Your Website to a Mobile World
Similar to Adapting Your Website to a Mobile World (20)
Recently uploaded
Recently uploaded (20)
Adapting Your Website to a Mobile World
- 1. Adapting Your Website to a Mobile World Tom Jelen Director of Online Communications American Speech-Language-Hearing Association Twitter: @tomjelen tjelen@asha.org Access these slides:
- 3. Financial Relationships: I work for ASHA. They pay my salary. They paid for me to be here. Nonfinancial Relationships: None
- 4. Not all of ASHA‟s web content works well on mobile devices. We are working on it.
- 5. I have worked in the digital technology field since 1998. My browser of choice back then was Netscape Navigator 4.
- 6. This is not a technical web design seminar. The focus is on developing a mobile strategy for your website.
- 7. I got my first iPhone in 2008. I use it a lot. Maybe too much.
- 8. I now use a Microsoft Surface. Please don‟t pity me.
- 9. Mobile = Smartphone and Tablet
- 10. This session is scheduled to run for one hour and thirty minutes. I cannot listen to myself talk for that long.
- 11. The Big Picture
- 12. Time Mobility Poll (2012) To better understand attitudes about mass mobility, Time, in cooperation with Qualcomm, launched the Time Mobility Poll, a survey of close to 5,000 people of all age groups and income levels in eight countries: the U.S., the U.K., China, India, South Korea, South Africa, Indonesia and Brazil. Source: http://techland.time.com/2012/08/16/your-life-is-fully-mobile/
- 13. 1/4 check their smartphones every 30 minutes. 1/5 check their smartphones every 10 minutes. - TIME Mobility Poll
- 14. "Three-quarters of 25-to-29-year-olds sleep with their phones.” - TIME Mobility Poll
- 15. "A third of respondents admitted that being without their mobile for even short periods leaves them feeling anxious.” - TIME Mobility Poll
- 16. “Twice as many people would pick their phone over their lunch if forced to choose.” - TIME Mobility Poll
- 17. comScore 2014 U.S. Digital Future in Focus comScore measures what people do as they navigate the digital world – and turns that information into insights and actions for our clients to maximize the value of their digital investments. Source: http://www.comscore.com/Insights/Presentations_and_Whitepapers/2014/2014_US_Digital_Future_in_Focus
- 18. “Virtually all of the growth in total internet usage over the past three years has come from usage of smartphones and tablets, which are responsible for almost doubling the amount of time Americans spend online" - comScore 2014 U.S. Digital Future in Focus
- 19. "Since December 2010, smartphone engagement has grown more than three-fold from 131 billion total minutes spent on the platform to a remarkable 442 billion by December 2013.” - comScore 2014 U.S. Digital Future in Focus
- 20. "Tablets, which were in their infancy in late 2010, have seen usage jump ten-fold over that same period to 124 billion minutes spent per month." - comScore 2014 U.S. Digital Future in Focus
- 21. "For the first time this year, multi-platform users (i.e. people who use both mobile and desktop devices) became the majority of the digital population — a milestone that was reached in April 2013.” - comScore 2014 U.S. Digital Future in Focus
- 22. Pew Internet Project Health Fact Sheet The Pew Research Center‟s Internet & American Life Project aims to be an authoritative source on the evolution of the internet through surveys that examine how Americans use the internet and how their activities affect their lives. Source: http://www.pewinternet.org/fact-sheets/health-fact-sheet/
- 23. "31% of cell phone owners, and 52% of smartphone owners, have used their phone to look up health or medical information.” - Pew Health Fact Sheet
- 24. "This finding is of particular interest to those interested in trends related to young people, Latinos, and African Americans, since these groups are significantly more likely than other groups to have mobile internet access.” - Pew Health Fact Sheet
- 25. “Mobile was the final front in the access revolution. It has erased the digital divide. A mobile device is the internet for many people.” - Susannah Fox Pew Research Internet Project Source: http://www.pewinternet.org/2010/09/13/the-power-of-mobile/
- 26. Mobile Traffic to ASHA.org in March 2010 Smartphone Desktop
- 27. Mobile Traffic to ASHA.org in March 2014 Smartphone Tablet Desktop
- 28. BBDO/AOL Seven Shades of Mobile (2013) BBDO/AOL asked 1,051 smartphone users ages 13 to 54 to fill out a 7-day diary and make video recordings each time they used their smartphones. This was followed by in-depth user interviews to determine the what, when, where and why for the variety of their mobile interactions. To give more context to their behavior, they also asked smartphone users to record three different moments in which they used their phone (excluding voice calls, email and texts). At the same time, they tracked their mobile behaviors for 30 days through a metered panel. Source: http://www.scribd.com/doc/119635563/BBDO-AOL-Seven-Shades-of-Mobile
- 29. “Mobile” does not mean mobile.
- 30. #7: Context does not equal intent. “68% of all smartphone minutes, take place in the home.” -BBDO/AOL Seven Shades of Mobile
- 31. Summary of Trends 1. People are very connected to their mobile devices. 2. Desktop usage is leveling off. 3. Mobile usage is skyrocketing. 4. Increased device fragmentation. 5. Mobile usage has virtually eliminated the “digital divide.” 6. “Mobile” is not necessarily mobile.
- 32. So What Do You Do Now?
- 33. "This isn't just an opportunity to create a mobile version of your web product; it's an opportunity to provide an improved overall experience for your customers." - Luke Wroblewski
- 35. Responsive web design is a tactic for providing an optimal experience for mobile, tablet, and desktop visitors. Adaptive content development is a strategy for making your content available for any device.
- 36. You can build a responsive website without adopting any adaptive content strategies. You can adopt an adaptive content strategy without building a responsive website. You should consider building a responsive website and adopting an adaptive content strategy.
- 38. “Responsive Web design is the approach that suggests that design and development should respond to the user‟s behavior and environment based on screen size, platform and orientation.” -Kayla Knight Source: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- 39. “The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.” -Kayla Knight Source: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
- 41. “…We developed a WWW browser for the Apple Newton PDA. Currently WWW access is restricted to stationary hosts. It would be a very promising approach to have access to this global information system via mobile devices.“ -Stefan Gessler and Andreas Kotulla December 1995 Source: Gessler, Stefan, and Andreas Kotulla. "PDAs as Mobile WWW Browsers." Computer Networks and ISDN Systems 28.1-2 (1995): 53-59. Web. doi: 10.1016/0169-7552(95)00093-6
- 42. Image source: By TECO, KIT (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
- 43. The original iPhone was released on June 29, 2007. Photo credit: https://web.archive.org/web/20070717181905/http://www.apple.com/iphone/?
- 44. “Users can see any web page the way it was designed to be seen, and then easily zoom in to expand any section by simply tapping on iPhone‟s multi-touch display with their finger. “ -iPhone Press Release January 9, 2007 Source: https://web.archive.org/web/20070112140741/http://www.apple.com/pr/library/2007/01/09iphone.html
- 45. “…The marriage of multi-touch with zoom and a full-featured browser means one thing: mobile versions of web sites just won't be necessary in the future once everyone catches up to Apple on this point." - Jacqui Cheng, Ars Technica iPhone Review on July 10, 2007 Source: http://arstechnica.com/apple/2007/07/iphone-review/6/
- 46. “…You really can't go to any mainstream site on the iPhone and expect to glean useful information from it without dragging, double tapping, pinching, and unpinching your way around. " - Ryan Block, Engadget iPhone Review on July 3, 2007 Source: http://www.engadget.com/2007/07/03/iphone-review-part-2-phone-mail-safari-ipod/
- 48. “Responsive web design offers us a way forward, finally allowing us to „design for the ebb and flow of things.‟" - Ethan Marcotte Responsive Web Design blog post on May 25, 2010 Source: http://alistapart.com/article/responsive-web-design
- 49. "With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change." - Luke Wroblewski Wroblewski, L. (2011) Mobile First. A Book Apart.
- 58. Responsive design does not involve a separate mobile site with a separate URL. mysite.mobi m.mysite.com mobile.mysite.com
- 59. Credit: http://xkcd.com/869/ (licensed under a Creative Commons Attribution-NonCommercial 2.5 License).
- 60. "...If you've got responsive design, everything is handled from one URL. And so the page rank doesn't get divided. Everything works fine. So you don't need to worry about the SEO drawbacks of responsive design at all." - Matt Cutts, Google Source: https://www.youtube.com/watch?v=D03wRb4s7MU
- 61. “…If you do a mobile version of your site, if you don't handle that well and you don't do the rel=canonical and all those sorts of things, you might in theory divide the page rank between those two pages.” - Matt Cutts, Google Source: https://www.youtube.com/watch?v=D03wRb4s7MU
- 75. Responsive Design Summary 1. Responsive design is a web design technique that developed in reaction to the proliferation of smartphones. 2. Responsive design involves one and only one version of your website. 3. Responsive design involves stacking, shrinking, and eliminating web content. 4. If you have a themed site, responsive design may be easier than you think.
- 76. Pause: What questions do you have about responsive web design? Where have you seen responsive design used effectively?
- 81. “At this point, we have no idea where, when, or how our content will appear in another decade.” - Garrett Moon Source: http://todaymade.com/blog/adaptive-content-chunks/
- 82. Make Your Content Future Proof
- 84. Blobs vs. Chunks
- 85. Blob
- 86. Chunks
- 89. Content and design should be separate.
- 90. My great content My great content My great content My great content
- 91. Adaptive Content Management Summary 1. An adaptive web content strategy can help future proof your content. 2. Adaptive web content involves making one and only one version of your content. 3. Adaptive web content is broken down into structured chunks. 4. Adaptive web content is easy to theme because the content and design are separate.
- 92. Pause: What questions do you have about adaptive content development?
- 94. #1: Create quality content.
- 95. #2: Avoid content sprawl.
- 96. #3: Don’t fork your content.
- 99. #4: Use tools that help (or force) you to structure your content into chunks, not blobs.
- 100. #5: Focus on responsive themed design and site development.
- 101. Five Final Recommendations Summary 1. Create quality content. 2. Avoid content sprawl (aka “ROT:” redundant, outdated, trivial). 3. Don‟t “fork” your content. 4. Use tools that help (or force) you to structure your content into chunks, not blobs. 5. Focus on responsive themed design and site development.
- 102. Further Reading & References McGrane, K. (2012). Content Strategy for Mobile. A Book Apart. Wroblewski, L. (2011). Mobile First. A Book Apart. Marcotte, E. (2011). Responsive Web Design. A Book Apart.
- 103. Taking an incremental approach is better than doing nothing.
- 105. Credits Unless otherwise specified, all images in this presentation are screenshots from the public web or they are licensed images from ThinkStock.com.
Editor's Notes
- Good morning.This is an early session for Las Vegas. Welcome to “Adapting Your Website to a Mobile World.” My name is Tom Jelen and I am the Director of Online Communications for ASHA. You can access these slides on Slideshare using the short URL:
- Before I get too far, I’d like to provide the required disclosure.
- As I mentioned, I work for ASHA. Not surprisingly, I am paid for that work. They also paid for me to fly out here and speak to all of you. I do not have any nonfinancial relationships to report. I’ve always liked the transparency that these disclosures provide. So, I have made it a habit of providing some additional disclosures and disclaimers for all of my ASHA presentations…
- The first disclosure is that not all of our content is optimized for a mobile device. I mention that to not only avoid have you throw tomatoes at me, but also to be clear that what I am talking about today is iterative in nature. The web is constantly evolving and we are trying to evolve along with it. Besides, if your speaker doesn’t have everything all worked out, then you may want to avoid beating yourself up if your website is not working amazingly well on all mobile devices. What we are talking may take time. By the way, we are working on optimizing more and more of our ASHA’s products and services to work on a range of mobile devices. I’ll share more about that later on.
- I do have some experience developing websites. I built a GeoCities website way back in 1997. I started working professionally on the web in 1998 (back when Netscape was still popular). I lived in San Francisco through the first dot-com bubble and bust. I witnessed first-hand the transition from web 1.0 to web 2.0 and I have helped shepherd ASHA’s digital strategy for the past 8 years. It’s been a fun ride.
- I want to make sure that everyone understands that I am not going to be getting into the technical details of web design. We will not be looking at HTML and CSS code here today. We are focused at a higher level – the strategies you might want to incorporate to adapt to a mobile world. I will give you some recommendations, and you are free to disagree with what I recommend.
- I got my first smartphone in 2008 (a year after it came out). It quickly became the most important piece of technology I use on a day to day basis. It was a life saver for someone directionally challenged like me. Text messaging was so much simpler than calling people. I loved to settle debates over trivia by simply looking up the fact being argued (even if the argument was with myself). In short, I use my mobile phone all the time.
- However, I do not have an iPad. I am trying to avoid having too many devices in my life, so several weeks ago I retired my old Dell laptop and became the proud user of a Microsoft Surface. Does anyone else have one of these? I love my Surface. It’s my main computer for work and my kids can’t open it up and play games on it.
- It’s a good time to point out that when I refer to mobile in this presentation, I am generally referring to both smartphone and tablet devices. I realize the lines are blurring a bit, so we’ll get into that a little further. I’ll try to be clear when I am talking about a specific type of device.
- To make this a valuable session, I need your questions and your input. I don’t pretend to have all the answers in my presentation and I am sure there is plenty of wisdom in this room to share.
- OK, enough about me and disclaimers… Let’s talk a little bit about the wider digitallandscape that we are working in online these days. I’ll start by sharing some research and data on how people are using mobile devices and we’ll see if we can identify some trends that impact our mobile web strategy.
- In the summer of 2012, Time Magazine, in partnership with the mobile company, Qualcomm, conducted a global poll of almost 5,000 people across a range of demographic profiles. They were exclusively focused on smartphone usage.
- They revealed that people are checking their smartphones all the time. Let’s do an informal poll here. How many people checked their smartphone when they first woke up this morning? How many people checked their smartphones right before going to sleep? That leads me to…
- A lot of people are sleeping with their phones. Or, as the case may be…. Not getting any sleep and browsing the web and texting instead.
- A lot of people admitted feeling anxious when they were separated from their phones. I have to admit that I have felt anxious when my phone has died. It’s hard to imagine that I drove all the way across the country without a cell phone way back in the day. I had to actually use a paper map. I don’t know how I survived. How many people have been able to take a smartphone break for a day? A weekend? An entire week’s vacation?
- The bottom line is we really, really love our smartphones. We would even choose them over eating! That is a line too far to cross for me personally, but I would imagine that the issue for many people is that they want to avoid feeling cut off from friends and loved ones – all of those contacts take place on a mobile device now. You can text with friends, connect on Facebook, and even look up a restaurant to find a place for lunch (so you can at least take a picture of the lunch that won’t be eaten while you look at your smartphone).
- comScore is a company that measures what people do as they navigate the digital world - they track actual mobile usage by combining on-device metering with census-level data.
- Comscore found that desktop internet usage has basically leveled off, while mobile usage has been responsible for a doubling of the amount of time we spend online. Not only does mobile now account for the majority (57 percent) of internet usage, but smartphones alone have surpassed desktop usage.
- If you have a teenager, this is probably not news to you… but the number of minutes spent on a smartphone has more than tripled in the past three years! We are spending huge amounts of time attached to our phones.
- Its hard to remember, but the iPad was only first released a little over four years ago… on April 3, 2010. They have proven to be extremely popular with kids (as well as some adults). Since late 2010, usage has jumped ten-fold and has taken off where desktop use has leveled off.
- Most people now are using multiple devices for accessing the web. How many people here have two devices? Three? Four? Five? It was not too long ago that an entire family shared a single desktop computer.
- The Pew Internet Project has been conducting research on internet usage for a number of years. It takes no positions on policy issues related to the internet and it does not make any endorsements. The project’s reports are based on nationwide random phone surveys, online surveys, and qualitative research. That data collection is supplemented with research from other expert sources (government, academia, and so on). The Project releases 15-20 pieces of research a year (like the recent Health Fact Sheet). Pew has done a variety of surveys that look at the intersection of mobile usage and health. That works is summarized in the Fact Sheet.
- They found that a majority of smartphone users have looked up health related information on their phones. That makes a lot of sense to me because smartphones are by their nature, more personal and intimate than desktop computers. We carry them in our pockets, we have them on our person at all times. We even sleep with them!
- From a public health standpoint, they have found mobile is a big market. Has anyone heard of the concept of the digital divide? It was quite real and very much in existence until smartphone usage took off. Many people in the country did not have reliable broadband wired access (many still don’t). Mobile has really changed the equation. Mobile allows you to reach a much wider audience than the wired internet could ever provide.
- One of researchers at Pew, Susannah Fox, wrote a blog post way back in September of 2010 that made this clear. “Mobile was the final front in the access revolution. It has erased the digital divide. A mobile device is the internet for many people.”
- If you want to look at data a little closer to home (or at least to my home),we can look at smartphoine and tablet traffic to ASHA’s websites. This pie chart shows our traffic in March 2010. Smartphone traffic was about 1%. You should note that there was zero tablet traffic. Remember that the iPad hadn’t even been introduced yet.
- Let’s fast forward four years to last month. Mobile and tablet traffic is now over a quarter of our overall traffic. For our audience, iPads and iPhones are the dominant device type, but there are a wide range of devices accessing our site now. Just this past November, Safari and Chrome surpassed Internet Explorer as the most used browser for accessing our site. That was an exciting moment for someone like me.
- BBDO and AOLdid some very interesting research on usage patterns for people using smartphones. They took a somewhat anthropological approach and asked people to fill out diaries and make video recordings, as well as conduct interviews. They also tracked the actual behavior through a metered panel.
- The word mobile implies what you see here. Someone using a smartphone for a brief moment while he or she is walking down the street. However…
- BBDO and AOL found the the word mobile is a bit misleading. The majority of mobile minutes are in the house and I doubt if people are walking around for too long inside their own homes. This is important because it tends to suggest that the idea that mobile users are just interested in quick information or they are distracted isn’t necessarily true. It is also interesting because it suggests that many people use their smartphones even when a larger screen may be close by.
- Ok, let’s take a moment to summarize some of the research we just went through. People are connected to their mobile devices. Maybe too connected.Desktop usage is leveling off.At the same time, mobile usage is skyrocketing.We are seeing increased device fragmentation where people us multiple devices to access the web.The really positive news is that mobile has virtually eliminated the “digital divide.”Last but not least, we know that mobile is a bit of a misnomer. While the devices are portable, the user is likely quite stationary.
- You may be saying to yourself… what am I supposed to do about all this? Whatever you do, don’t panic. Let’s talk about how you can adapt your website to this changing landscape.
- In my view, adapting to mobile is really an opportunity to make your web presence even better than it is now. Luke Wro-blewski, who wrote an influential book called, “Mobile First,” makes this argument and I tend to agree with a lot of what he says. Mobile forces us to confront problems that may exist in our sites now and forces us to it make decisions of focus and organization that will only improve our websites overall.
- Ok, let’s talk about the big buzzwords from my session description. Responsive web design and adaptive web design are two concepts that are fairly recent in the web development world. We’ll take them one by one… I do want to make clear that they are slightly different concepts and they can be complementary to one another.
- Responsive web design is really a nuts and bolts tactic for deliveringwebsite content to a variety of screen sizes. We are not going to get into the dirty details, but suffice it to say that this is where all the big jargon comes into play: CSS 3, media queries, HTML 5… and so on. Adaptive content development is really a content management strategy for future-proofing your content. It is a little confusing because you will find some people talking about adaptive web design… which is not what I will be talking about here.
- So, they are not mutually exclusive… You can build a responsive website without adopting any adaptive content strategies.You can also adopt an adaptive content strategy without building a responsive website. But, my recommendation is that you consider doing both. In my view, building a responsive website and adopting an adaptive content strategy is really the current answer for most websites to thrive in the multi-platform world we are living in.
- Let’s start with responsive design since this is the concept most people are familiar with and have experience using.
- Kayla Knight is a full-time web designer and developer. I think she does a nice job describing responsive design in fairly plain English. “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.” I did intentionally leave off the second part…
- “The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.” – you can read about all the technical details in a book I will mention at the end of my presentation.
- To understand how responsive design came into being, it is probably helpful to take a step back in time to the early history of the web. You know… a really long, long time ago… twenty years ago.
- In 1994, two researchers at TECO, a research institute in Germany, developed a web browser for the Apple Newton PDA. The Apple Newton was Apple’s first experiment with a PDA device and it was a bit ahead of its time. Anyway, Gessler and Kotulla presented their browser at the WWW2 Conference in Chicago, October 1994, where it won the best paper award. I think they were also ahead of their time… they wrote this abstracxt way back in 1995! They were definitely right!
- The web browser was called Pocket Web. This is a screenshot of what it looked like running on a Newton. Pretty cool, huh? Remember, this was in 1995! I have would say that things didn’t really advance much for mobile design over the next twelve years. Palm had a browser for its Palm Pilot devices. Blackberry had a pretty rudimentary browser for its early devices… but web designers pretty much ignored all of them. Without a lot of good web standards, they were more worried about making their sites look good on Netscape and Internet Explorer. Many sites had a mobile microsite version with text links for the brave souls who tried to use their feature phones to access their web site. That is until…
- The iPhone was released in the summer of 2007. This truly was the watershed moment in mobile web design. Did anyone here get an original iPhone? Besides the cool mapping feature, the touchscreen iPod, and the simple email interface, Apple included a small-screen version of its popular Mac browser, Safari.
- Here is the press release. As stated, you could view pretty much any webpage on the web and you could zoom in and out by simply tapping around with your finger. Of course, you had to make sure you didn’t visit any sites with Flash (which was still pretty popular at the time).
- In her review of the new iPhone, Jacqui Cheng ofArsTechnica was pretty dead on accurate when she said that the new browser eliminates the need for a separate mobile version of websites… once everyone catches up. And that is what we are still doing today!
- Ryan Block of Engadget, did point out that it’s a little hard to actually browse the web while doing all that pinching and zooming. While you got the whole image in fairly good resolution, the sites of the time were obviously designed for desktop users, not people on smartphones.
- Remember the ads that Apple released? A lot of them featured the New York Times website (like the webpage does here). If you actually went the New York Times website on your smartphone, you’d be doing a lot of work zooming in on headlines and trying to make sure you clicked on the correct article title. It actually wasn’t a great user experience.
- So over the course of a few years… web designers began leveragingadvancedCSS and HTML techniques to make their designs “respond” to the browser size and screen orientation. Ethan Marcotte, who coined the term, said that the intent was to design for the “ebb and flow of things.” He is actually quoting John Allsopp’s article the Dao of Web Design… who was actually quoting the Tao TeChing. I bet you didn’t know that web designers were so worldly?
- Luke Wroblewski and others elaborated on Ethan’s concept. He advocated for a “mobile first” design approach where by you start with the smallest screen and then progressively enhance the design with the capabilities of larger and larger screens. Ok, let’s see it in action.
- One of the first major media sites to go responsive was the Boston Globe.If you go to the Boston Globe website on your iPhone, you’ll see something much like this. This is the “mobile first” screen. It has your weather, headlines, a small ad, and a menu of sections that expands. It’s all in a single column format and the fonts and links are large enough so no pinching and zooming is required.
- This is the what the menulooks like when its expanded.
- The search boxalso dynamically expands when you click the magnifying glass icon.
- If you visit the same site on a tablet, you’ll see another column of content on the left is available along with a large image. Those same articles from the mobile screen are still available on the right column. The search box has expanded and there are now links to today’s paper, weather and traffic.
- When you visit the site on a larger screen (adesktop or laptop), you’ll see a full menu of sections, links to subscribe, and a third column of content with a Twitter feed. To build this site, the designer has to decide on breakpoints where columns of content will stack on top of one another or disappear entirely. You can basically still see the mobile and tablet screens in the main desktop view.
- The Boston Globe site illustrates how youneed to think a little differently about layout for responsive design. In my view you need to start focusing on shrinking some content (especially images and fonts), eliminating extraneous content, and stacking columns into a single column. If you simplify the Boston Globe site to a series of colored blocks, it would look something like this image here.
- So when you reduce the screen size for a tablet in landscape mode, you may squeeze some content tighter, and you may decide to simply remove the right green column altogether.
- For mobile, you have even less room. Everything really has to be stacked into a single column. While this makes for really long pages in some cases, you should remember that scanning up and down is a actually lot easier on a touch screen, than with a mouse. On a touch screen, you simply flick your fingers to quickly move up and down the page.
- The big message here is that the Boston Globe did not built a separate mobile site. The URLs (the web addresses) are the exact same across platforms and devices. You don’t have m.bostonglobe.com or bostonglobe.mobi and that is a big advantage because it means you don’t need to do any URL redirection when someone accesses your content from a mobile device.
- One problem with the approach of creating a separate mobile site that you automatically direct people to is illustrated well in this comic from XKCD. Has anyone ever had the experience of attempting to access an article or piece of content on a mobile device and getting redirected to the homepage? It drives me crazy, but a lot of major sites do it. Sometimes, you can’t even access the content you are looking for at all. You have to go to your desktop computer.
- Optimizing your site for search engines (also know as SEO), is an extremely important part of web design. If you are interested in maintaining your sites SEO, then you’ll want to listen to Matt Cutts from Google. He is currently the head of Google’s Webspam team – which is charged with keeping search quality as high as possible. As Cutts makes clear in a Q&A video from Google, using a single authoritativeURL across devices is advantageous from a SEO standpoint.
- He also notes that if you choose to build a separate mobile version of your site and you don’t handle the redirection well you may be dividing the page rank between two pages – page rank is the score Google gives to your content to influence where it appears in search results. The bottom line is that if you don’t know what rel=canonical means, then you shouldn’t create a separate mobile version of your site.
- You can see some major sites still use separate mobile sites. Remember the New York Times from the iPhone ads? They have a separate smartphone site. Granted, its got good redirection on it.
- You’ll know you are on a separate mobile site, when you see the infamous “View desktop version” link at the bottom of the page.
- At ASHA, we have been moving more and more of our content to a responsive design. In December of last year, our publications team did a great job working with Silverchair publishing to move all of our journals to a responsive design. Here you can see the AJA homepage on a smartphone and on a desktop screen.
- This is what an article page looks like. As you can see, they stacked a lot of content areas and removed extra navigation to simplify the design.
- Our Special Interest Group Perspectives publications apply the same concepts…
- And the ASHA Leader magazine is also using a responsive design. In all the designs, you’ll notice that the smartphone (the mobile first design) is a single column with a very simple menu,.
- The images on articles also shrink down to fit the mobile screen. I think it looks pretty great! Don’t you?
- Our first responsive design project at ASHA was the Practice Portal and we learned a lot from doing it. We found that if you go with a two column design to begin with, you may not need to make things very different for tablet size screens. You can make the more drastic changes at the smartphone level.
- So, when we designed the ASHA Store (which launched just a few weeks ago) we focused our attention on two layouts – one for smartphones and one for desktops/tablets. The content responds to tablet screens, but the two column layout stays the same. We’re really hoping it makes it a lot easier to purchase products from mobile devices.
- Responsive designs do not need to be complicated. For example, it’s really pretty simple to make a blog responsive. For ASHAsphere, we had a two column design with a simple header. The site was hosted in WordPress. So, we found an inexpensive responsive theme for Wordpress, we swapped in a new header, and we were pretty much done. I’ll give you a hint now that the reason it was so easy is that the content in the blog was adaptive. More on that later.
- Almost all of our new site development is being done responsively. The “Identify The Signs” campaign launched last year and we wanted to make sure people could access the content on any device. We were doing a lot of social outreach and it seemed likely that a lot of the traffic would come from mobile. As of yesterday, almost 46% of the traffic since the site launched last fall has been from a mobile device. That is well above the 25% we see for the ASHA.org site as a whole.
- We again used an off-the-shelf theme for WordPress that made it pretty easy to layout pages that would work well on larger and smaller screens.
- Last, but not least, I want to be clear that you can do responsive design for free. In this case… I did just that for my kids’ school’s PTA website. I helped them move the site content to Wordpress and then I found a free responsive theme that does a pretty good job of displaying the site across a range of screen sizes. The whole min-project took about 4 volunteer hours of time. If I can do it for a PTA website in about 4 hours, you can do it for your site, too!
- Let’s summarize what we have hopefully learned so far…Responsive design is a web design technique that developed in reaction to the proliferation of smartphones.Responsive design involves one and only one version of your website.Responsive design involves stacking, shrinking, and eliminating web content.If you have a themed site, responsive design may be easier (and cheaper) than you think.
- Let’s stop here for some questions. What questions do you have about responsive web design? Be brave.
- OK, so we hopefully know a little more about Responsive Web Design than we did 30 minutes ago. Let’s now talk about the concept of Adaptive Web Content.
- Rather than go back in history this time… let’s think to the future. Does anyone want to venture a guess about what devices we will be using to access the web in 10 years? We know Google Glass is here now. Will everyone be wearing them in 10 years? Has anyone tried Google Glass out yet?
- Maybe we will all have smart watches like the one Samsung introduced? Or maybe we’ll all be using some other wearable device? My wife loves the Fitbit she was given as a gift. Maybe those will advance to a point where they can display content in addition to tracking movement.
- Or perhapswe will be getting more and more web content from our smart TVs? The lines between TV and computer are very blurry at this point. I cut my cable years ago and I never looked back. My kids really have no concept of a timed show. They think everything is on demand and commercial free.
- The bottom line is that I tend to agree with Garrett Moon, a web designer in North Dakota. I have no idea where our content will appear in 5 years, let alone 10. I often tell people that I am willing to project web strategy for about 12-24 months into the future. Anything beyond that seems like pure conjecture to me. So, in the absence of a crystal ball, what should you do?
- My recommendation is that you want you to make your content work on any device now and in the future. You want your content to be able to adapt. Otherwise, you’ll find yourself stuck.
- That is the approach that WebMD has taken with its content. It creates one version of content and then publishes it to its website and to its mobile app and to everywhere else it syndicates content. So how do you create adaptive content?
- The fundamental concept of adaptive web content is that you want to avoid creating big blobs of text. Instead, you want to focus on creating chunks of well-structured content.
- Let’s start with a fairly simple example. Thishere is a blob of content. It’s actually the body of an article in the ASHA Leader. Some content should be in a blob like this, such as the body of an article. No problems here.
- However, some of your content should be structured into chunks. Issue date. Title. Short summary. Sub-title 1. Sub-title 2 and so on. We break up an author’s name and bio into 5 distinct pieces of content. And what does this let us do?
- Well it saves you from copying the same thing many, many times. In the simple example of an author for an article… that same content chunk showed youcan appear in different iterations on a single page.The author’s full name is at the top of the article. The name and the bio are at the bottom of the article. And the author’s name also appears in the citation. All of those items of content are coming from a single source. You can also show the content on another page – as in this case-- the table of contents page. The bottom line is that you don’t need to write Andrea’s name multiple times. Instead, you code templates to display the underlying content in different ways.
- The key advice you may hear sometimes is: write once and publish everywhere. That is the core of adaptive web content. You break down your listings of staff, or your blog posts, or your services, or your products into structured chunks of content than can be repurposed for a big desktop website or for a small smart watch sometime in the future.
- The separation of content and design is fundamental to adaptive content strategy. You should focus on chunking your content and then think about layering on a theme or design on top of that. Do you remember my references to WordPress theming? Because Wordpress makes you separate content and design, that is what makes it so easy to change the look and feel of a WordPress site (or many other themed sites, for that matter).
- When you have great content that is structured, you can then theme it to fit whatever design or screen layout you want. I promise you that it does say “My great content” on the smartphone screen.
- An adaptive web content strategy can help future proof your content.Adaptive web content involves making one and only one version of your content. Adaptive web content is broken down into structured chunks.Adaptive web content is easy to theme because the content and design are separate.
- What questions do you have about responsive web design? Be brave.
- This may go without saying… First, focus on good content. If your content isn’t relevant, well-written, professional, and helpful… nothing else really matters. Before you embark on any mobile initiative, you want to do an analysis of your website to see if what you have meets the standard of your business that you are trying to project.
- Second, avoid content sprawl. By content sprawl, I am referring to what my colleague has given the acronym R.O.T., ROT is redundant, outdated, trivial content. So many large sites end up with content dumps. This clutter, especially if its all “blob” content is very difficult to manage and adapt for the future.
- Hopefully this is clear by now, but I would suggest that you avoid building a mini mobile site. You don’t want to fork your content. It may sound like a simple idea at the time, but it often proves to be a bad one. Let me illustrate with a simple example.
- Let’s consider the scenario of my little hearing clinic. I have a small website. I share information about the practice, the providers, services, and so on. One day, someone gives me a call and says they can make me a mobile site for $99. I have noticed that a lot of my traffic is coming from mobile devices, so I say why not. It’s only $100. When someone goes to my site on a mobile device, they are directed to my cool mobile site. The problem starts when its time to make a content change. Say, your phone number changes…
- Guess what… you’ve got two places to update now. For a small site this may not seem like a huge problem, but it grows rapidly as your site gets larger. When you fork your content, you are fundmentallycreating more work for yourself.
- I would recommend looking for web publishing tools that help or force you to structure your content. You should see screens like the one here from a content management called Moboom. When you want to create a directory of people, you should enter fields of data, rather than a blob of content. Most content management products will allow you to structure your content. Wordpress is an inexpensive option. Moboom is another CMS product that is inexpensive and it is specifically built to create adaptive content.
- Remember the PTA website? The reason I could make that site optimized for mobile was that I used a content management system (in that case, WordPress) that separates the content from the design. The content was structured. The beauty of themed design is that you can easily change the look and feel as your site develops and your business needs change. For WordPress sites, there are thousands of free and low cost themes available to you that cover all kinds of specific business needs.
- Let’s review the final recommendations.Create quality content.Avoid content sprawl (aka “ROT:” redundant, outdated, trivial).Don’t “fork” your content.Use tools that help (or force) you to structure your content into chunks, not blobs.Focus on responsive themed design and site development.
- If you want to read more, I recommend the following three books. These are mobile web design classics and they are short and easy to read. If you are in Rockville, I’ll be happy to lend you a copy.
- Ok…I hope I haven’t overwhelmed you with too much information. I want to close by assuring you that you can adapt your website to a mobile world. It may take some time, but you’ll make progress and your web presence will be all the better for it.
- Ok, we are at the end of my prepared presentation. I want to mention again that you can access the slides from Slideshare. And now, I’d like to open things up for questions.