Technical How-To's for Making Your Website By Stoney deGeyter
-
Upload
search-marketing-expo-smx -
Category
Internet
-
view
640 -
download
0
Transcript of 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