@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

@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 Share Report – 6/14

@timcannon

#SESATL

On average, 62 percent of organic searches show different results depending on

whether the search was performed on a desktop or smartphone

@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%

@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.

@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

@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 everyone’s situation is not the same

@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.

@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.

@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

@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) Customizable

3) Save time, therefore save money

@timcannon

#SESATL

@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

@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

@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 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.

-

@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.

-

@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)

@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.

-

@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.

@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

@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

@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

@timcannon

#SESATL

For a list of tools & other resources used in the presentation go to www.healthitjobs.com/sesatl.aspx