Developer Tools For Mobile Friendly Websites
by Chad Flick
Friday January 24, 2020
Chad Flick is a web developer and and has been doing online marketing since 2001. In this article he'll share the tools that developers can use today in 2020 to ensure you're building mobile friendly websites. The tools recommended are sure to help you make your websites mobile ready for any device.
Before I get started let me make something clear to you. I have dabbled in many different kinds of code and scripts in my years of developing webpages. With that being said, I am by no means a master of any of them. The reason this is important is that even if you aren't a multi-techy person you can still use these tools to your advantage.
So let's get started. Did you know that in 2016... The number of people accessing the internet through mobile devices worldwide surpassed those using desktops?
And it was not just in numbers, but in usage too. To keep an online presence in 2020, you NEED to go mobile.
With the tools and resources I'm going to show you today, you can start on an mobile-focused online presence.
There are several tools I'm going to share with you but the first one is what I've been using for most of my newest webpages.
Are you ready for it? LOL... Ok here it is: AMP Html!
AMP is a way to build web pages for static content that render fast.
AMP in action consists of three different parts:
1. AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
2. The AMP JS library ensures the fast rendering of AMP HTML pages.
3. The Google AMP Cache can be used to serve cached AMP HTML pages.
When I first looked at AMP I was really looking for a new way to bring myself up-to-date with the newest mobile friendly code because I was used to using the coding I'd been using for years, which was definitely becoming outdated fast... LOL. So it was kind of confusing until I just went in and learned how it works.
This article page was built using AMP HTML!
I would like to suggest and actually encourage you go visit their page and learn how AMP works and how you can incorporate it for yourself or update your existing pages using AMP.
You could also just build an AMP page for your existing Non-AMP pages, to let the search engines know that you also have a mobile version of your page, but that is another subject I won't be discussing today, so I digress. I just wanted you to know that this can be done as well.
While there are some other tools I'll be showing you, AMP happens to be my favorite code to use today. And I have one more AMP tool and one more AMP reference tool that you need to see before we move on.
The way "The AMP Validator" works is simple! When you've finished building your AMP page, you can stick the URL into The AMP Validator and it will literally tell you how to fix errors on your page if you happened to have them.
It will save you tons of time and you will have less frustration.
Let's move on to the AMP reference that you will find yourself scouring once you start building with AMP!
AMP by Example is where you will find an introduction to building amp pages, and the components, as well as advanced techniques used in creating AMP pages.
You'll also find great examples and demos on what each component is capable of doing and for what purpose.
Moving along now that we have the tools to build our mobile frienly websites, it's time to see if our website in fact "mobile friendly"!
For this you can use the tools that I'll list below:
1.
2.
There are several mobile validation tools out there but these are two that I personally use most often.
Finally now that we know how to build and validate that our websites are mobile friendly, we'll want to be sure we prepare them properly for distribution.
By that I mean now that we have mobile friendly websites we want to optimize them for the search engines and social media websites and let them know how to find our nice new mobile friendly pages.
You will want to refer to this page: Make Your Page Discoverable - Here you will learn the exact method you need to accomplish making your mobile friendly pages discoverable. References will also be included.
This is actually a topic that requires more detail, but I'm going to share some other resources below to help you achieve this, that you will most likely encounter at some point in your mobile friendly endeavor. In no particular order...
For Your Reference:
Card Validator | Twitter Developers
Sharing Debugger - Facebook for Developers
W3Schools Online Web Tutorials
SSL For Free - ***IMPORTANT FOR 2020!***
Google Structured Data Testing Tool
Hopefully you will make use of the information given here today and have a better understanding about all the things you need to build a search and social optimized mobile friendly website!
Check Out Some Of My AMP Pages!These offers might be interesting for you as well: |