Designing for mobile devices first is no longer optional after Google's most recent algorithm update. Learn what it takes to make your website truly mobile friendly.
eCom Growth Day - Helsinki 2016 - Changing Landscape of Mobile SearchBridget Randolph
Mobile is becoming an increasingly important traffic channel, and given recent developments like app indexation and AMP (Accelerated Mobile Pages), as well as the addition of new types of devices like wearables and smart tech, understanding how it fits into the bigger search marketing picture is more crucial than ever. This session will take a look at the history of mobile search, how mobile search behaviour has impacted on desktop search, the growing significance of app content and developments such as AMP and app streaming within the search marketing landscape, and some thoughts on where the future of search is heading.
Web Technologies for Mobile Engagement | JetJaw presentation @ MRMW11ResearchShare
Web technologies for mobile engagement: Navigating the entry points for engaging on-the-go
customers.
- Discussing the mobile technology landscape and technology choices
- Evaluating web apps vs. native apps for surveys and data collection
- Reviewing specific capabilities of HTML 5 and the mobile technology roadmap
Google: How to Make Your Website Work Across DevicesMatt Brocklehurst
Understand the why and how of building websites that work across multiple devices e.g. mobile, tablet, desktop. This deck explains and compares Responsive Web Design, Dynamic Serving and Separate Sites including market stats, design tips and case studies
The goal of this talk was to present alternative ways to address the growing fragmentation in the smartphone app world. The talk starts out discussing “web” apps then dives into “native” apps.
Mobile Distribution - No it's not Billboards and Neon Vacancy SignsRobert Cole
Mobile technologies have created incredible marketing and distribution opportunities for hospitality and travel organizations.
The presentation covers the importance of the mobile computing for travel and the challenges facing hotels, resorts and restaurants when engaging with guests through mobile distribution channels.
The importance of developing a mobile strategy and the related business and development considerations are covered.
Additionally, location based services and potentially disruptive mobile innovations are also profiled.
Presented by Robert Cole, Founder of RockCheetah at the 2010 Hospitality Financial & Technology Professionals (HFTP) HITEC Conference in Orlando, Florida, USA on June 23, 2010.
eCom Growth Day - Helsinki 2016 - Changing Landscape of Mobile SearchBridget Randolph
Mobile is becoming an increasingly important traffic channel, and given recent developments like app indexation and AMP (Accelerated Mobile Pages), as well as the addition of new types of devices like wearables and smart tech, understanding how it fits into the bigger search marketing picture is more crucial than ever. This session will take a look at the history of mobile search, how mobile search behaviour has impacted on desktop search, the growing significance of app content and developments such as AMP and app streaming within the search marketing landscape, and some thoughts on where the future of search is heading.
Web Technologies for Mobile Engagement | JetJaw presentation @ MRMW11ResearchShare
Web technologies for mobile engagement: Navigating the entry points for engaging on-the-go
customers.
- Discussing the mobile technology landscape and technology choices
- Evaluating web apps vs. native apps for surveys and data collection
- Reviewing specific capabilities of HTML 5 and the mobile technology roadmap
Google: How to Make Your Website Work Across DevicesMatt Brocklehurst
Understand the why and how of building websites that work across multiple devices e.g. mobile, tablet, desktop. This deck explains and compares Responsive Web Design, Dynamic Serving and Separate Sites including market stats, design tips and case studies
The goal of this talk was to present alternative ways to address the growing fragmentation in the smartphone app world. The talk starts out discussing “web” apps then dives into “native” apps.
Mobile Distribution - No it's not Billboards and Neon Vacancy SignsRobert Cole
Mobile technologies have created incredible marketing and distribution opportunities for hospitality and travel organizations.
The presentation covers the importance of the mobile computing for travel and the challenges facing hotels, resorts and restaurants when engaging with guests through mobile distribution channels.
The importance of developing a mobile strategy and the related business and development considerations are covered.
Additionally, location based services and potentially disruptive mobile innovations are also profiled.
Presented by Robert Cole, Founder of RockCheetah at the 2010 Hospitality Financial & Technology Professionals (HFTP) HITEC Conference in Orlando, Florida, USA on June 23, 2010.
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemLessing-Flynn
Why marketers should care about mobile marketing now. Includes statistics on mobile device proliferation, responsive website design, mobile websites vs. mobile apps, and how the market will continue to change.
Presentation given at Interact13 conference in January 2013, Springfield Ohio.
These are the slides used for my presentation on library mobile websites for NJLA 2010. These slides will also be the basis for a similar presentation to be done, as a webinar, in June sponsored by CJRLC, HRLC, and infolinik
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Paul Brown
This session ran on the first day of the a4u Expo 2012. The 1 hour slot focused on 3 mobile marketing perspectives for Advertisers, Agencies & Publishers to consider as they work there way towards joining the 10% of top 1 million domains that are mobile optimised. 3 core principles of mobile optimised web design are considered, as are methods of monetising that property, and how you might drive more traffic to it... Along the way Mobile Marketing Pioneers are flagged as examples. If you are interested in mobile of performance marketing, keep an eye on http://www.a4uexpo.com for future events.
Is Responsive the best solution to all our Mobile SEO problems>Jose L. Truchado
BrightonSEO conference presentation. Google recommends responsive design as their preferred option for mobile content, but does this solution apply to every case? learn how looking at solutions through the eyes of the user can help you define the best strategy for Mobile SEO
This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.
Build Mobile Websites | How to make a Mobile Website | Creating Mobile WebsitesClickTecs
Let’s start with the premise that, given the growing demand and popularity of mobile sites you decide it’s time to consider a mobile website for your business. However, you remain a somewhat skeptical whether you need a mobile website for ‘your’ business and the prospect of building one leaves you even more puzzled.
Why Create a Mobile Website?
The Revolution Will Not Be Televised: Managing Content and Experience in the ...Jonathan Stark
Mobile computing as we know it today is just one application of wireless technology, and a fairly limited one at that. The iPhone - perhaps the most advanced piece of consumer electronics ever created - is going to look like a fax machine compared to what's coming. Mobile is a warning shot - the coming wireless wave will profoundly change every aspect of society and potentially redefine what it means to be human. Please join mobile consultant Jonathan Stark for a look at the past, present, and future - and what we can do to prepare for the revolution.
Communication Design for the Mobile ExperienceDavid Drucker
Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemLessing-Flynn
Why marketers should care about mobile marketing now. Includes statistics on mobile device proliferation, responsive website design, mobile websites vs. mobile apps, and how the market will continue to change.
Presentation given at Interact13 conference in January 2013, Springfield Ohio.
These are the slides used for my presentation on library mobile websites for NJLA 2010. These slides will also be the basis for a similar presentation to be done, as a webinar, in June sponsored by CJRLC, HRLC, and infolinik
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Paul Brown
This session ran on the first day of the a4u Expo 2012. The 1 hour slot focused on 3 mobile marketing perspectives for Advertisers, Agencies & Publishers to consider as they work there way towards joining the 10% of top 1 million domains that are mobile optimised. 3 core principles of mobile optimised web design are considered, as are methods of monetising that property, and how you might drive more traffic to it... Along the way Mobile Marketing Pioneers are flagged as examples. If you are interested in mobile of performance marketing, keep an eye on http://www.a4uexpo.com for future events.
Is Responsive the best solution to all our Mobile SEO problems>Jose L. Truchado
BrightonSEO conference presentation. Google recommends responsive design as their preferred option for mobile content, but does this solution apply to every case? learn how looking at solutions through the eyes of the user can help you define the best strategy for Mobile SEO
This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.
Build Mobile Websites | How to make a Mobile Website | Creating Mobile WebsitesClickTecs
Let’s start with the premise that, given the growing demand and popularity of mobile sites you decide it’s time to consider a mobile website for your business. However, you remain a somewhat skeptical whether you need a mobile website for ‘your’ business and the prospect of building one leaves you even more puzzled.
Why Create a Mobile Website?
The Revolution Will Not Be Televised: Managing Content and Experience in the ...Jonathan Stark
Mobile computing as we know it today is just one application of wireless technology, and a fairly limited one at that. The iPhone - perhaps the most advanced piece of consumer electronics ever created - is going to look like a fax machine compared to what's coming. Mobile is a warning shot - the coming wireless wave will profoundly change every aspect of society and potentially redefine what it means to be human. Please join mobile consultant Jonathan Stark for a look at the past, present, and future - and what we can do to prepare for the revolution.
Communication Design for the Mobile ExperienceDavid Drucker
Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.
Content Marketing for the Beginner: A Guide to Getting StartedPercussion Software
Get the overview of content marketing foundations you've been looking for. Find out the advantages of content marketing, the key steps in the content marketing process, and how you can use it to drive business outcomes.
How is a website redesign like a dangerous polar expedition? What do you need to survive? Learn how marketers can successfully lead a website redesign project.
11 Signs It's Time to Break Up with Your CMS - 2015 MixtapePercussion Software
If you've lost that loving feeling towards your CMS and you're not sure if you should stay or you should go, check out the top 11 signs it might be time to break up with your CMS. It's not right, but it's okay, and you will survive.
How to Write a Request for Proposal (RFP) for Web Content ManagementPercussion Software
Writing an effective and useful RFP for content management can be a complex, lengthy process. Learn how to leverage available resources and templates to get a document that puts the vendors to work for you, and helps you get the right solution for your business.
Using Video Analytics to Measure Effectiveness and Set Metrics for SuccessPercussion Software
Video is the fastest growing form of web content, and by far the most popular on mobile devices. How do you know if your video content is helping your marketing efforts? Marketers want to do more with video, but when you have limited resources to invest, you want to maximize impact. Experts from Wistia discuss how.
Rhythmyx is a development platform ideally suited to organizations with a strong internal development team that has invested heavily in other core web applications, processes, and technologies and simply wants a development platform that manages the “content infrastructure” with the freedom to continue to build and integrate other web applications without restrictions.
Web Analytics: Defining & Driving Key Performance Indicators for Your Higher ...Percussion Software
Learn how using analytics can help you make better decisions and deliver higher ROI for your college’s website. Percussion Software will cover five easy ways to start using web analytics to increase your college’s student engagement and ultimately drive enrollment.
Learn more here: http://www.percussion.com/edu
Get actionable tips and strategies for using content marketing to support sales, SEO, PR, and more.
You will learn:
- How to execute and promote an effective content marketing campaign
- Marketing strategies for specific types of content Software tools you can leverage for content marketing
- Where to get the scoop on your competition
And last but not least find out how to build a strong foundation for your content marketing efforts by following best practices for the start.
Web Accessibility Compliance in Higher Education - Fully Meet Legal Requireme...Percussion Software
Universities face liability if their web content is inaccessible. As college campuses adopt new technologies and make their communication increasingly digital, disability rights advocates fight to ensure students with disabilities aren’t left behind. Navigating the complex legal landscape isn’t easy, and many schools aren’t aware of their unintentional violations.
View these slides to make sure your college website complies with sections 504 and 508 of the Rehabilitation Act, and that you can extend full web and IT access to every student.
Learn more about HiSoftware & Percussion's recent partnership announcement:
http://www.percussion.com/about/news-and-events/press-releases/2014/hisoftware-and-percussion-announce-partnership
Make Your Website Your Best Admissions Officer with Real-Time PersonalizationPercussion Software
Online research is a critical tool for students and parents choosing a college.
Personalization allows you to target students by academic, athletic, or any other interests, and to target parents with content they find most relevant such as cost and safety.
Learn more about Percussion CMS: http://www.percussion.com/products/index
Learn more about Evergage: http://www.evergage.com/
The number one killer of a successful web project is bad assumptions running amok. Whether it’s a complete redesign, switching to a new CMS, or developing a completely new digital property, faulty expectations can doom a project before it even starts.
Join Sara Murray from Boston Interactive to debunk the top 10 web design myths and break free of the most common misconceptions:
CMS selection can wait
- Visual design is the most important piece of any project
- Mobile comes in the next phase
- The project is done after you launch
- and more!
Make sure your next website project stays on track by separating fact from fiction. Plan for a successful design and launch with the right information and expectations from day one.
Don’t Stop at Responsive: Optimize Your Site to Increase Conversions on MobilePercussion Software
Optimizing the delivery of assets ensures that the most important content and calls to action are prioritized when the site loads. In this webinar Ari Weil of Yottaa will explain how Application Sequencing technology can boost site performance and serve up what you want your customers to see.
You will learn:
Why responsive design is just the tip of the optimization iceberg
How Application Sequencing intelligently serves content based on device, browser, and connection speed
How site speed and perceived responsiveness impact conversions and sales
Website visitors increasingly expect speed, responsiveness, social integration, and personalization on any device. See how you can still deliver a well-rounded experience and capture business without sacrificing performance.
Join Dan Flanigan, VP of Products at Percussion Software and Karl Wirth, CEO and Co-Founder of Evergage and learn how to personalize to make every website experience awesome.
Learn more at: http://www.percussion.com & http://www.evergage.com
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Survive Mobilegeddon: Designing for the Mobile Web
1. D I A L O G U E T H E O R Y
Designing Your Website for the Mobile Web
Survive Mobilegeddon
www.dialoguetheory.com
chris@dialoguetheory.com
2. DesigningYour Website for the Mobile Web
D I A L O G U E T H E O R Y
1. Mobilegeddon?
2. Mobile is the new normal
3. Designing for the mobile web
4. Useful Resources
5. Questions!
6. What exactly is happening?
D I A L O G U E T H E O R Y
“Mobile friendliness” will now be an important ranking
factor for websites, and sites that aren’t optimized for
mobile will appear lower in search results.
7. Who does this affect?
D I A L O G U E T H E O R Y
• All websites indexed by Google … globally
• Only mobile search results
• Applies to individual pages, not complete websites.
8. D I A L O G U E T H E O R Y
Google’s Mobile-Friendly Test:
https://www.google.com/webmasters/tools/mobile-friendly
9. What problem does Google intended to solve?
D I A L O G U E T H E O R Y
Mainly, Google is trying to provide a better experience
for people searching via smartphones.
There’s a propensity for consumers to abandon
your brand if they are struggling to see your
products, make purchases, get information, or
contact you.
10. The Message
D I A L O G U E T H E O R Y
Optimizing for mobile is no longer a matter of choice.
17. Three ways to design for mobile
D I A L O G U E T H E O R Y
• Responsive design: A single website, which flexes and
adapts to the screen it is viewed on.
• Dynamic serving: A single URL, using an agent to
detect device type and then serving the appropriate
HTML.
• Mobile website: Separate websites (with different
URLs) served depending on which device is being
used.
18. Three ways to design for mobile
D I A L O G U E T H E O R Y
• Responsive design: A single website, which flexes and
adapts to the screen it is viewed on.
• Dynamic serving: A single URL, using an agent to
detect device type and then serving the appropriate
HTML.
• Mobile website: Separate websites (with different
URLs) served depending on which device is being
used.
19. D I A L O G U E T H E O R Y
What does a responsive site look like?
20. D I A L O G U E T H E O R Y
What should I keep in mind when
starting a mobile redesign?
21. 1) Go – and plan for - responsive
D I A L O G U E T H E O R Y
• By far the best of the three website patterns for most
situations
• Keep critical goals in mind
• Use “chunkable” content that can condense cleverly
• Above all, design for user intent!
22. 2) Large text and calls-to-action
D I A L O G U E T H E O R Y
Design for fingers!
23. 2) Large text and calls-to-action
D I A L O G U E T H E O R Y
Design for fingers!
24. 2) Large text and calls-to-action
D I A L O G U E T H E O R Y
Text sizing: At least 16 CSS pixels.
Text spacing: At least browser default line height of 1.2em.
Most important tap targets: At least 48 CSS (7mm) pixels.
Target spacing: At least 32 CSS pixels (5mm).
25. 3) Avoid common technical mistakes
D I A L O G U E T H E O R Y
These include:
• Blocked code (robots.txt)
26. 3) Avoid common technical mistakes
D I A L O G U E T H E O R Y
These include:
• Blocked code (robots.txt)
• Unplayable content (replace Flash with HTML 5 or
Jquery)
27. 3) Avoid common technical mistakes
D I A L O G U E T H E O R Y
These include:
• Blocked code (robots.txt)
• Unplayable content (replace Flash with HTML 5 or
Jquery)
• Avoid interstitials: opt for simple banners instead!
NO: YES!
28. 3) Avoid common technical mistakes
D I A L O G U E T H E O R Y
These include:
• Blocked code (robots.txt)
• Unplayable content (replace Flash with HTML 5 or
Jquery)
• Avoid interstitials: opt for simple banners instead!
• Ignoring slow page load times. Use Google’s PageSpeed
Insights tool to test load times:
https://developers.google.com/speed/pagespeed/insights/
29. 4) Properly tag your pages
D I A L O G U E T H E O R Y
The meta viewport tag signals to browsers (and Google!)
that your site has been designed for mobile.
Make sure it is added to the head of your documents:
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
30. 5) Iterative improvement
D I A L O G U E T H E O R Y
1) Once you’ve gone responsive, watch usage!
2) Compare KPIs by desktop vs. mobile:
• Time on site
• Pages viewed
• Conversion, conversion, conversion!
3) Conduct A/B tests
32. Useful Resources
D I A L O G U E T H E O R Y
Google Mobile FriendlyTest:
https://www.google.com/webmasters/tools/mobile-friendly/
Google Mobile-Friendly Websites Guide:
https://developers.google.com/webmasters/mobile-sites/
How to Ace The Google-Mobile-Friendly Test:
https://moz.com/ugc/cracking-the-google-mobile-friendly-test-how-to-score-
100
Screenfly
http://quirktools.com/screenfly/
33. Contact Us
D I A L O G U E T H E O R Y
chris@dialoguetheory.com
www.linkedin.com/in/chrisoquist
www.dialoguetheory.com
Thanks for that intro – I should let David introduce me to everyone. That was awesome.
So welcome to Survive Mobilegeddon, an admittedly dramatic title but I think you’ll see that this is an important topic for making sure you’re getting the most out of your website.
Today we’re going to be talking a little bit about what exactly Mobilegeddon is, why mobile is so important, and then review a few important notes to keep in mind when designing for the mobile web. We’ll also learn about three popular methods for delivering websites to visitors on smartphones and tablets.
And then finally we’ve pulled together some useful resources for you and we’ll hopefully have time for a discussion and to field questions.
Ok, so what is Mobilegeddon?
It’s actually called “The Mobile-Friendly Update,” and is one of the biggest changes to Google’s ranking algorithm in the past few years. Any time Google makes these kinds of sweeping changes or introduces new rules, web people tend to freak out a bit.
If you read articles about SEO or web marketing you’re likely to have seen headlines like this. It can’t really be this dramatic – the world isn’t actually ending – but let’s take a look at what is happening.
On April 21st, Google rolled out a series of long-anticipated changes to the way they rank pages in their search results. The net effect is that Google now uses this somewhat ephemeral concept of “mobile friendliness” as a key factor in how pages are ranked. If your site isn’t seen as mobile-friendly, it will be heavily penalized in certain kinds of search.
So who is this going to affect? Or actually – who is this already affecting, as the changes have been in place for a couple of weeks already? (And just to clarify, Google mentioned that the changes would take a few weeks to impact rankings, so we’re likely just starting to see some of the effects now).
The new rules affect all websites in all countries.
They affect rankings on mobile search results pages – so basically, mobile-unfriendly sites are being lowered in rank when returned on searches people make while mobile.
And this “mobile-friendly” assessment is being made on a page-by-page basis. So it is possible for your homepage to be mobile-friendly, and other pages on your domain to fail the test.
Fortunately, Google’s put together a very simple way to find out if your website is mobile friendly or not. It’s called the Mobile-Friendly Test, and you can actually just click on this link, type your URL in, and you’ll get an answer pretty quickly.
So clearly there are is a checklist of attributes Google is grading against, but what’s the real goal here? When folks click on Google mobile search results, they can either land on a page that loads well, is legible, and helps them carry out whatever task they had intended, or they can land on a page that looks broken, requires zooming to read, or might have content or code that doesn’t render properly on a smartphone. Google’s interest is in providing the best possible experience for people with phones, so these changes are a way to ensure that when you use Google on your phone, you’re more likely to see pages that have been designed for usability on mobile. In other words, if you provide a better mobile experience, Google is delivering a better mobile experience.
But there’s a reason you should care about this regardless of whether Google is incentivizing you to as well: people who find your site unusable aren’t going to stick around. You put a lot of effort into getting your target consumer to visit your site: if when they get there, they can’t find what they’re looking for, buy what they want, or contact you, they’re going to bounce. Usually very quickly.
So Google’s message to web owners here is that optimizing your site for mobile is no longer a choice, it’s a need-to-have.
Let’s explore that a little.
When the first iPhone came out and pretty much revolutionized the way most consumers use their phones, the sale of mobile devices still trailed far behind those of desktop PCs and laptops. As you can see here, that trend very quickly reversed itself – 2013 was the first year people bought more smartphones and tablets than PCs. Sales of smartphones this year will dwarf sales of PCs. The technology as a platform of access is ubiquitous.
OK, but most people use their phones to play Angry Bird and browse Tinder and share selfies, right?
Well, not only. In early 2014, mobile surpassed desktop and laptop as the way most people access the internet.
So what’s this usage like? We mentioned before that these new changes only impact mobile searches, and not desktop searches. So does any of this matter? Are people actually using Google on their phones?
Yup, they are. This is the actual point last year in which mobile searches surpassed desktop searches in the United States. So more people are actually searching on Google on their phones than at their desk.
So we know that mobile-friendliness is affecting our rankings. What does it mean to create a mobile-friendly website? How does one design for the web in 2015?
Google recognizes three different configurations as being “mobile friendly”. These are “Responsive design,” essentially a website which flexes and rearranges itself to properly fit the best view.
The second method, referred to as dynamic serving, actually includes different versions of the website’s code on a single URL, and serves it up to the browser after detecting the device the user is on.
Under the mobile website method, there are actually separate websites (with completely different URLs) being served to the user depending on the device.
Dynamic serving can be complex to implement and error-prone, and the mobile website method requires you to maintain two or more versions of your content (that means any time you make a page edit on the desktop version, you must make an edit on the mobile version – or versions – as well). Fortunately, Google agrees that responsive is the way to go, and so while other types of sites do pass the mobile friendly test when properly implemented, Google actually recommends responsive as the best design pattern for mobile-optimized sites.
There are a few other benefits to the responsive approach:
From the standpoint of visitors, it’s really seamless – it’s the same URL and the same content, so if you view the page from multiple devices during multiple sessions, you’re getting a consistent experience.
From the standpoint of content editors and marketers, you’ve only got one site to edit.Finally, because there’s only one site, Google’s crawling bots only need to check it once, which saves them resources.
Let’s take a look at how responsive sites behave and look. We’ve got three websites here that we’ve completed recently that should give you an idea of what we’ve been talking about.
The first thing we would recommend is that you choose responsive as your design pattern. For the vast majority of situations, it’s likely to be the best fit, and it also happens to be the one that Google prefers. You can’t go wrong with a well-designed responsive site.
A few of the other recommendations I would make here, from a high-level, are things that any web designer worth your time should know. It’s important to keep the main goals of each page in mind at all times. Using a content management system also allows you to create chunkable content that can condense cleverly. As you saw in some of the examples we just showed you, not all content is important for all users. Some should be shortened on smaller screens, some will even disappear. Approaching the planning stage, and the content creation stage, with this in mind will yield web content that really can help users regardless of the context within which they are visiting your site.
Finally, design for user intent. DON’T approach designing a mobile or responsive site as a way to just hit all the checklist items on Google’s list. As we talked about before, Google’s interest is in providing the best user experience to people. If you were to totally forget about Google, and simply design the best, most intuitive and usable site you could for people on smartphones, you’ll be on your way to passing this with flying colors.
Secondly, people aren’t using their mouse and keyboard on their phones. Usually they’re tapping their fingers. So design for fingers. You can see in the example shown here, that that big prominent blue “DOWNLOAD” button remains just as prominent and easy to click on the mobile size. You can also see that text remains large and easy to read – they aren’t packing a ton of stuff into a smaller screen.
Here’s another example, from the World Wildlife Fund. You can see that in this case the DONATE and ADOPT buttons actually become even more prominent on mobile sizes.
This also happens to be a super easy one for search engines to check, and because of that is a super easy rule to follow.
Google recommends using a base font size of at least 16 CSS pixels, and resizing based on the font’s properties.
For tap targets, like CTAs and buttons on mobile, the rule is similarly easy. Google recommends that these be at least 48 CSS pixels tall or wide (which translates to 7mm if you have your viewport set up properly). There should also be at least 5mm between tap targets, to avoid users accidentally clicking on one button when they meant to use another.
#3 is to avoid technical mistakes that usually can lead to pages’ mobile experience coming across poorly. Some of these tips are more for the technical folks on the call, but it’s a good idea to take note of them and make sure your site isn’t making any of them.
Blocked code is one of the most common mistakes. You’ve spent a bunch of money and time building a beautiful, responsive site, but when Google crawls it, they see it. All the hours you or your agency spent making break points, image resizing instructions, and minimized design elements goes completely unnoticed.
Blocking image, CSS, and JavaScript resources from their bots is against Google’s webmaster guidelines and is the usual culprit here. The solution here is simple: don’t do it. Get rid of those meta robots instructions. Check your robots.txt files; especially if your resources are delivered via a CDN. Show off all those beautiful images and stylesheets to the search engines!
Unplayable content is another big problem. Most mobile browsers don’t render Flash-based content. Therefore, mobile visitors won’t be able to use a page that relies on Flash to display content, navigation, or animations. More modern techniques such as HTML5 and Jquery should be used and Flash eliminated whenever possible.
Many websites like to use interstitials to promote mobile apps or other offerings. This is essentially a pop up that stands between the user and the site content until it is closed or accepted. If you are using an interstitial that blocks site content, you will be penalized. The correct way to promote web apps is using banners, as seen in the example on the right.
Finally page load times are an important piece of the puzzle. Users are impatient, and anything slower than 2 seconds for a page load is generally perceived as slow. In one study, over three-quarters of web users actually abandoned pages that took longer than five seconds to load. Accordingly, Google uses page load as a ranking factor. There are many ways to cut down the size of the page you’re making a browser render, including minimizing HTTP requests (which are the number of components being downloaded), optimizing images, enabling browser caching, optimizing CSS delivery, and reducing redirects. However, the first thing to do is know where you stand. Google provide a tool called PageSpeed Insights which allows you to quickly test your load times.
#4 is the really the low-hanging fruit.
Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should include the viewport tag, which tells browsers how to adjust the page’s dimension and scaling to suit the device.
Google takes this tag to mean that your site has been designed with mobile in mind. Once your site is responsive, make sure this tag has been specified.
The last piece here is being iterative. You can’t think of a website anymore as a property that is “finished” and just sits there doing its job. It’s a living document that should be in a constant state of flux. If you’ve got a web content management system and it’s been properly set up with a design that encourages iteration, your life will be a lot easier. Once you launch, pay a lot of attention to how people are using your site.
We recommend taking your Key Performance Indicators, those measures you’ve decided give you a good idea if your site is working or not. So look at time on site, look at how many pages are being viewed – and compare these between desktop and mobile. If things seem off-kilter or one is performing worse than the other, try different things (possible run A/B tests) to improve, continuously.
And focus on conversion, especially. If you’re an manufacturing or a high-tech or a software company, this might mean forms filled out, new contacts registering. For an e-commerce company this can mean sales, or items added to the shopping cart, or downloads. Universities and colleges might be looking for online applications or alumni donations. For a bank or credit union, we’re talking about new account opening, or loan requests. These actions that are the main point of your site – watch them constantly and try to always improve.
And we also thought it would be useful to leave you all with a set of resources that you might find valuable. I would assume that many of you would opt to work with an agency or a designer who should be aware of the guidelines above, but if this is fully on your plate or you have an in-house team that will be helping you go mobile-friendly, these can be great to bookmark.
The first, again is Google’s Mobile Friendly Test, which you’ve already seen.
The second is a really substantive, great, and very easy to understand guide that Google has put together to document the requirements and guidelines for going mobile-friendly. This contains both general recommendations as well as more technical documentation for developers.
The third is an article from Moz.com (the provider of a suite of SEO tools) that I thought did a good job of providing another perspective on the changes.
And finally, Screenfly is a cool tool I like to use sometimes
So, we’ve tried to focus here on info that will be useful to you and not spend a bunch of time selling, so if you do need to explore a redesign with mobile in mind and want to learn about how we can help you – or even if you have questions about the presentation, feel free to reach out to us.
We’ll also accept funny pictures.
So, that’s it. I know we wanted to leave a bit of time for questions. Anybody got one?