Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation
-
Upload
stoney-degeyter -
Category
Internet
-
view
589 -
download
0
Transcript of Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation
![Page 1: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/1.jpg)
#SMX #22C @StoneyD
Stoney deGeyter | Pole Position Marketing
![Page 2: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/2.jpg)
#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
![Page 3: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/3.jpg)
#SMX #22C @StoneyD
CHOOSING YOURCONFIGURATION
![Page 4: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/4.jpg)
#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.
![Page 5: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/5.jpg)
#SMX #22C @StoneyD
COMMONMISTAKES
![Page 6: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/6.jpg)
#SMX #22C @StoneyD
Blocking JavaScript, CSS and Images
COMMON MISTAKES
User-agent: *Disallow: /js/Disallow: /CSS/
User-agent: *
robots.txt robots.txt
![Page 7: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/7.jpg)
#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/
![Page 8: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/8.jpg)
#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/
![Page 9: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/9.jpg)
#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/
![Page 10: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/10.jpg)
#SMX #22C @StoneyD
Interstitials
COMMON MISTAKES
Use banners instead.
Image: developers.google.com/
![Page 11: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/11.jpg)
#SMX #22C @StoneyD
COMMON MISTAKES
View Mobile ViewDesktop
Irrelevant cross-links
View Mobile ViewDesktop
Image: developers.google.com/
![Page 12: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/12.jpg)
#SMX #22C @StoneyD
Slow loading pages
COMMON MISTAKES
Image: developers.google.com/
![Page 13: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/13.jpg)
#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.
![Page 14: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/14.jpg)
#SMX #22C @StoneyD
Small touch sizeCOMMON MISTAKES
Design for fat fingers!
![Page 15: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/15.jpg)
#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.
![Page 16: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/16.jpg)
#SMX #22C @StoneyD
RESPONSIVE WEBSITECONFIGURATIONS
![Page 17: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/17.jpg)
#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
![Page 18: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/18.jpg)
#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
![Page 19: Technical How-To’s for Making Your Website Mobile-Friendly - SMX East Presentation](https://reader036.fdocuments.net/reader036/viewer/2022070514/587e88ef1a28abd6038b7ee9/html5/thumbnails/19.jpg)
#SMX #22C @StoneyD
THANK YOU!
SEE YOU @SMX WEST
SAN JOSE, CAMARCH 1-3, 2016
WebMarketingChecklist.comDownload Presentation: ppmkg.com/mobilehow