technical how-to's for making your website by stoney degeyter

#SMX #22C @StoneyD

Stoney deGeyter | Pole Position Marketing

#SMX #22C @StoneyD

• @StoneyD• +StoneydeGeyter• linkedin.com/in/stoneygd

Web PresenceOptimization

Stoney deGeyter

THIS IS ME I do this

Follow me

here

Check out my

book

Hire m

y team

WebM

arketingChecklist.com

PolePositionMarketing.com

#SMX #22C @StoneyD

CHOOSING YOURCONFIGURATION

#SMX #22C @StoneyD

Uses the same URL regardless of device, but generates a different version of HTML for different device types.

Mobile Redirects

Configuration Same URL Same HTML

3 different mobile configurations

CHOOSING YOUR MOBILE CONFIGURATION

DynamicServing

Responsive Design

Serves different code to each device on separate URLs. Server attempts to detect users’ device, then redirects to the appropriate page.

Serves the same HTML code on the same URL regardless of the users’ device, but renders the display differently based on screen size.

#SMX #22C @StoneyD

COMMONMISTAKES

#SMX #22C @StoneyD

Blocking JavaScript, CSS and Images

COMMON MISTAKES

User-agent: *Disallow: /js/Disallow: /CSS/

User-agent: *

robots.txt robots.txt

#SMX #22C @StoneyD

Unplayable content

Use HTML5 standards

Use video-embedding that’s playable on all devices.

Optional: Provide a transcript of the video available.

COMMON MISTAKES

Image: developers.google.com/

#SMX #22C @StoneyD

Mobile-only 404s

COMMON MISTAKES

Allow visitors on mobile devices to pass through to your mobile URLs without error.

Image: developers.google.com/

#SMX #22C @StoneyD

Redirecting to wrong pages

COMMON MISTAKES

Redirect each URL to the appropriate mobile counterpart. NOT homepage!

Make sure redirects work on all devices.

Image: developers.google.com/

#SMX #22C @StoneyD

Interstitials

COMMON MISTAKES

Use banners instead.

Image: developers.google.com/

#SMX #22C @StoneyD

COMMON MISTAKES

View Mobile ViewDesktop

Irrelevant cross-links

View Mobile ViewDesktop

Image: developers.google.com/

#SMX #22C @StoneyD

Slow loading pages

COMMON MISTAKES

Image: developers.google.com/

#SMX #22C @StoneyD

Non-responsive images

COMMON MISTAKES

Use the html picture element to serve different size images to different devices based on their screen size.

Cheat: Use automated “Adaptive Images” tools and plugins.

#SMX #22C @StoneyD

Small touch sizeCOMMON MISTAKES

Design for fat fingers!

#SMX #22C @StoneyD

Unreadable text

COMMON MISTAKES

Use EM or REM units on your fonts, and then adjust the base font size for different screen resolutions using media queries.

#SMX #22C @StoneyD

RESPONSIVE WEBSITECONFIGURATIONS

#SMX #22C @StoneyD

RESPONSIVE WEBSITE CONFIGURATIONS

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Imag

e:

deve

lope

rs.g

oogl

e.co

m/

Add viewport tag

#SMX #22C @StoneyD

Dynamically ServedDevices are served the same HTML, but the JavaScript is served dynamically depending on the device’s user-agent.

Combined DetectionWebsite uses both JavaScript and server-side detection to serve different content to different devices.

JavaScript AdaptiveDevices are served the same HTML, CSS, and JavaScript content. When executed JavaScript alters the rendering or behavior of the site.Pr

efer

red

for M

obile

Configuration

Responsive JavaScript configurations

RESPONSIVE WEBSITE CONFIGURATIONS

#SMX #22C @StoneyD

THANK YOU!

SEE YOU @SMX WEST

SAN JOSE, CAMARCH 1-3, 2016

WebMarketingChecklist.comDownload Presentation: ppmkg.com/mobiletech