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.
@timcannon
#SESATL
Overview: De-Mystifying Mobile Technical Architecture
• 2014 mobile trends
• Defining the popular metho...
@timcannon
#SESATL
@timcannon
#SESATL
@timcannon
#SESATL
Mobile Usage as % of Web Usage, by Region, 5/14
@timcannon
#SESATL
Global PC (Desktop / Notebook) and Tablet Shipments
by Quarter | Q1:95 – Q4:13
@timcannon
#SESATL
Global Users of TVs vs. Mobile Phones vs.
Smartphones vs. PCs vs. Tablets, 2013
@timcannon
#SESATL
Smartphones and tablets together command
1/3rd of organic search traffic
+ =
Source: Brightedge Mobile ...
@timcannon
#SESATL
On average, 62 percent of organic searches
show different results depending on
whether the search was p...
@timcannon
#SESATL
Carefully decide which mobile approach is right for you &
make sure you implement it correctly.
72%
% o...
@timcannon
#SESATL
What are the most popular methods to enable your website
for mobile?
Dedicated Mobile - Created specifi...
@timcannon
#SESATL
What do search engines say about mobile & SEO?
1) Sites that use responsive web design, i.e. sites that...
@timcannon
#SESATL
What do search engines say about mobile & SEO?
@timcannon
#SESATL
What is the best option for you to mobile enable your website?
Every company is different therefore eve...
@timcannon
#SESATL
What is the best option for you to mobile enable your website?
Advantages of Dedicated Mobile
1) Speed ...
@timcannon
#SESATL
What are some of the advantages of each mobile approach?
Advantages of Responsive Design
1) Future frie...
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments against…
1) Designer can do a better job
2) Code blo...
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments for…
1) Browser compatibility & testing is easier
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments for…
2) Customizable
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments for…
1) Browser compatibility & testing is easier
2)...
@timcannon
#SESATL
@timcannon
#SESATL
Bootstrap versus Foundation
Bootstrap
• Open source framework created and managed by Twitter that has
b...
@timcannon
#SESATL
Bootstrap versus Foundation
Foundation
• Front-end framework created by Zurb which also uses a fluid, g...
@timcannon
#SESATL
SEO Considerations with Responsive Design
• Indexing/Crawlability
• Architecture
• UX/UI
@timcannon
#SESATL
SEO Considerations with Responsive Design
Indexing/Crawlability
• Depending on what approach you take w...
@timcannon
#SESATL
SEO Considerations with Responsive Design
Architecture
• When performing keyword research identify “mob...
@timcannon
#SESATL
SEO Considerations with Responsive Design
UX/UI
In a recent study that included responsive sites like S...
@timcannon
#SESATL
SEO Considerations with Responsive Design
UX/UI
• Make performance enhancements a priority with your
pr...
@timcannon
#SESATL
Performance Considerations with Responsive Design
Google has specifically mentioned that page load time...
@timcannon
#SESATL
• Images - Optimizing your images can be something as
simple as using a better compression method and
d...
@timcannon
#SESATL
• Compression/Zipping - An easy performance
improvement you can make is enabling file compression
on yo...
@timcannon
#SESATL
• Conditional Loading - valuable when you have a lot of
content do display to your mobile users, but do...
@timcannon
#SESATL
For a list of tools & other resources used in the
presentation go to www.healthitjobs.com/sesatl.aspx
Upcoming SlideShare
Loading in …5
×

Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session

2,085 views

Published on

As mobile internet usage continues to climb having a solid mobile experience for your website is vitally important. This session will dive into choosing the right approach for search engine optimization (SEO), responsive or dedicated mobile site, and then explore the more technical and strategic aspects of SEO for responsive design which is Google's recommended approach. There are a lot of things to consider from using frameworks, architecture, indexing, and UX. We will explore all of these and also outline recommendations for performance improvements which is critical to successfully implementing responsive design.

Published in: Marketing
  • Be the first to comment

Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session

  1. 1. @timcannon #SESATL Overview: De-Mystifying Mobile Technical Architecture • 2014 mobile trends • Defining the popular methods for mobile enabled websites • What the does Google say about mobile sites? • Advantages of the most popular methods • Frameworks to consider • SEO considerations • Performance considerations
  2. 2. @timcannon #SESATL
  3. 3. @timcannon #SESATL
  4. 4. @timcannon #SESATL Mobile Usage as % of Web Usage, by Region, 5/14
  5. 5. @timcannon #SESATL Global PC (Desktop / Notebook) and Tablet Shipments by Quarter | Q1:95 – Q4:13
  6. 6. @timcannon #SESATL Global Users of TVs vs. Mobile Phones vs. Smartphones vs. PCs vs. Tablets, 2013
  7. 7. @timcannon #SESATL Smartphones and tablets together command 1/3rd of organic search traffic + = Source: Brightedge Mobile Share Report – 6/14
  8. 8. @timcannon #SESATL On average, 62 percent of organic searches show different results depending on whether the search was performed on a desktop or smartphone
  9. 9. @timcannon #SESATL Carefully decide which mobile approach is right for you & make sure you implement it correctly. 72% % of mobile site configuration errors dedicated mobile dynamic responsive 30%
  10. 10. @timcannon #SESATL What are the most popular methods to enable your website for mobile? Dedicated Mobile - Created specifically to provide an optimized design to mobile devices. Usually this a completely different set of source code than the main website and has its own domain/URL. Responsive - Creates a fluid layout that changes and responds to different screen and device sizes. The key elements are incorporating CSS3,media queries and fluid grids to accomplish this goal. Adaptive/Dynamic - This one gets thrown around a lot and seems to mean something different, depending on who you ask. For my purposes today I am defining it as utilizing dynamic loading using something like server side detection to serve up different HTML based on device type or platform type.
  11. 11. @timcannon #SESATL What do search engines say about mobile & SEO? 1) Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. 2) Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device. 3) Sites that have separate mobile and desktop URLs. Google Officially Supports
  12. 12. @timcannon #SESATL What do search engines say about mobile & SEO?
  13. 13. @timcannon #SESATL What is the best option for you to mobile enable your website? Every company is different therefore everyone’s situation is not the same
  14. 14. @timcannon #SESATL What is the best option for you to mobile enable your website? Advantages of Dedicated Mobile 1) Speed – One common argument for building a dedicated mobile website is that it will be faster than a responsive one. 2) User Experience – If you have a dedicated mobile website you can completely tailor and customize the user experience to mobile visitors. 3) Cost – A mobile website will not require you to essentially perform a complete redesign like a responsive site often does therefore costing you less money.
  15. 15. @timcannon #SESATL What are some of the advantages of each mobile approach? Advantages of Responsive Design 1) Future friendly/Scalable – As different screen sizes and devices come out, responsive is well suited to accommodate these. 2) SEO benefits – Like we mentioned earlier this is Google’s preferred method for SEO, but I think it really boils down to having a single URL which makes everything around SEO much easier. 3) Maintenance – Responsive design allows you to build one website with a single set of source code which means it is much easier to manage and maintain.
  16. 16. @timcannon #SESATL Looking at responsive frameworks? Common arguments against… 1) Designer can do a better job 2) Code bloat which leads to slower loading sites 3) Everything looks the same
  17. 17. @timcannon #SESATL Looking at responsive frameworks? Common arguments for… 1) Browser compatibility & testing is easier
  18. 18. @timcannon #SESATL Looking at responsive frameworks? Common arguments for… 2) Customizable
  19. 19. @timcannon #SESATL Looking at responsive frameworks? Common arguments for… 1) Browser compatibility & testing is easier 2) Customizable 3) Save time, therefore save money
  20. 20. @timcannon #SESATL
  21. 21. @timcannon #SESATL Bootstrap versus Foundation Bootstrap • Open source framework created and managed by Twitter that has become the most popular framework in terms of responsive websites using it • Fluid, grid based system that pretty much has everything you will ever need for front end development • Browser support, documentation and development community is very robust to support any project
  22. 22. @timcannon #SESATL Bootstrap versus Foundation Foundation • Front-end framework created by Zurb which also uses a fluid, grid based system and is completely free as well • Minimalistic approach to frameworks by providing you the basics or “laying the foundation” • Browser support, documentation and development community is not as robust as Bootstrap
  23. 23. @timcannon #SESATL SEO Considerations with Responsive Design • Indexing/Crawlability • Architecture • UX/UI
  24. 24. @timcannon #SESATL SEO Considerations with Responsive Design Indexing/Crawlability • Depending on what approach you take with responsive design this could be very simple or more complicated. • Use the Vary header response to tell Google that this page’s content can “vary” or is different depending on the type of device/platform that accesses it. • If your site uses AJAX and more advanced javascript implement thins like the _escaped_fragement and pushState to avoid issues.
  25. 25. @timcannon #SESATL SEO Considerations with Responsive Design Architecture • When performing keyword research identify “mobile specific” keywords so you include those in your content and optimization strategy. • A true native responsive design approach could make this more difficult, so look at other hybrid approaches like dynamic serving to accomplish this. -
  26. 26. @timcannon #SESATL SEO Considerations with Responsive Design UX/UI In a recent study that included responsive sites like Starbucks and Engadget. 69% of the sites did not have an acceptable load time. Source: Trilibis (April 2014)
  27. 27. @timcannon #SESATL SEO Considerations with Responsive Design UX/UI • Make performance enhancements a priority with your project since that impacts both user experience & rankings. • Remove “app” landing pages after your launch and replace with “smart” banners if you still want to drive users to your apps.
  28. 28. @timcannon #SESATL Performance Considerations with Responsive Design Google has specifically mentioned that page load times and user experience are two variables they are already using or will be using to rank the mobile web.
  29. 29. @timcannon #SESATL • Images - Optimizing your images can be something as simple as using a better compression method and defining your image sizes to more complex methods like SVG vector images or something like Picturefill 2.0. • TTFB (Time to First Load) - The two most important things to look at for that are your TTFB (Time to First Byte) and Critical Render Path. Shoot for under 3 seconds to display everything in the initial viewport. Performance Considerations with Responsive Design
  30. 30. @timcannon #SESATL • Compression/Zipping - An easy performance improvement you can make is enabling file compression on your server and zipping up all your css and javascript files. (GZIP) • Asynchronous Loading - Separate your javascript from the rest of the page so you don’t “block” other elements on the page from loading. Performance Considerations with Responsive Design
  31. 31. @timcannon #SESATL • Conditional Loading - valuable when you have a lot of content do display to your mobile users, but don’t want to display or load it until they “need” it. • Server Side Detection – Use this to determine exactly what the user needs based on their platform/device and only serve them what they need based on that info. Performance Considerations with Responsive Design
  32. 32. @timcannon #SESATL For a list of tools & other resources used in the presentation go to www.healthitjobs.com/sesatl.aspx

×