I was attending a Startup Marketing Seminar yesterday and the speaker reminded the audience of a very important fact: Google, as of April 21, 2015, is now putting your website LOWER
in their search results if it is not Mobile Friendly (also called RWD Responsive Web Design). But what does that boil down to in the real world for non-web-designers? What ACTUALLY makes a website mobile friendly? Or what do I need to ask my web developers about how my site was made? The answer in short => does your website have 3 or more BREAKPOINTS built in the CSS? (Cascading Style Sheets are a subset of the HTML coding language that ALL webpages are created in).
Whew… that was a lot of techy talk, but the point I am making is => Breakpoints ARE the crux of the issue. You can have a webpage made with HTML and CSS that does not have Breakpoints. So what are CSS Breakpoints anyway? Breakpoints can be looked at as CSS code sets (or a grouping of code) that gets swapped out/changed when a device hits your webpage. The webpage will determine the screen resolution of your device and PICK the set of CSS (Breakpoint) to use to display your content. I mentioned a minimum of 3 breakpoints earlier => one for a computer monitor, one for a tablet and one for a phone. For most websites though... you will actually want to have more – many are made with 5 breakpoints. The extra 2 are for a tablet or phone when looked at in landscape. But these days you could add a TV and the list goes on... (Very handy to have one for PRINTING!!)
My PowerPoint Presentation turned YouTube Video that sums it up in under two minutes...
A Breakpoint can even include the ability to hide bulkier objects that would not show up nicely on say… a phone. Typically though what the CSS Breakpoint does is determine the width-percentage of the object being shown and the location of where the object will be placed on the page. I could say a lot more, but I don’t want to belabor the point (pun intended ;~D). This is being written for those of you who do not know HTML/CSS and just wanted someone to tell you what makes the difference between a mobile friendly website site and a non-mobile site.
I know, I know some of you are still thinking... I can see ANY website on my smart phone and I wouldn't argue with you. It's just => how much fun are you having on those sites you have to pinch and pull to be able to read the very small text. Can we all say => NOT! And the WORST!! Accidentally hitting a hyperlink and having to keep going back to the page you really want to be on.... Just sayin' => not good. That is why Google has made this a page ranking issue. In my opinion they gave everyone out there 3 years to get their act together and now are determining that if you haven't changed yet => perhaps peer pressure will help ;~D
If you are wondering if your website will PASS the Google test… Go to the following URL and type in your company’s web address (If you dare ;~D) http://bit.ly/1GaLZnX
Google’s article to Webmasters explaining the new rule: http://bit.ly/1Gx4MNm
Below is a sample of code generated by Adobe Dreamweaver illustrating breakpoints in the wild ;~D