Up
A few days ago, I had to make my websites mobile friendly. Mobile friendly means that the website renders well, and is usable, on cell phones. Cell phones differ from desktops in two respects: first, the screen is small, and second, people tap their screens with fingers and not with a computer mouse. As someone who does obsolete machinery removal in Chicago for a living, and not a high flying Web expert, I thought I would share what I learned.
There are two reasons to make this upgrade: one is to make them better because Google will demote all mobile-UNfriendly websites from search, and also, because very many customers and users are using mobile phones to browse the web.
Below is a condensed version for people who know HTML but are not HTML experts. To keep track of your mobile transition, test your webpages with this mobile friendly test page from Google. I have a few typical mobile-friendly elements on this very web page and you can activate them by resizing your screen very small or visiting this page with a cell phone.
A viewport is a tag that tells mobile browsers the size of a window that they need to allocate. Most of the time, a default would suffice. Add this to the HEAD section of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Add the following to your IMG tag:
<IMG SRC=bigimage.jpg> becomes <IMG SRC=bigimage.jpg style="max-width:100%; height:auto;">
What the above is saying, is that the images would be proportionally sized down on small screens, while retaining their aspect ratio. Easy!
This is harder: if your website is like most, you have a lot of content that was designed to fit a big and WIDE screen. There is no way to fit all of it on a small sell phone screen, nor it is advisable. For example, let's say you have a huge legal disclaimer. You may want to make it invisible on cell phones.
In the HEAD section of your HTML, define a style sheel that is CONDITIONALLY invisible for screens under 900 pixels, and a style that is ONLY visible for such small devices.
<style>
@media (max-width: 900px) {
.mobile_invisible {
display: none;
}
}
@media (min-width: 901px) {
.mobile_only {
display: none;
}
}
</style>
What the above means is that you defined a CSS style "mobile_invisible", that has a display:none (invisible) property that is triggered if your screen size is under 900 pixels.
Let's say that you had a large disclaimer section that you do not want to be seen. All you need to do is surround it with a SPAN element (enclose it into a HTML span) and define that SPAN to have the "mobile_invisible" style.
<SPAN class=mobile_invisible>
Your disclaimer goes inside of this SPAN...
</SPAN>
You can also define "mobile_only" class that will be ONLY visible on small screens:
<SPAN class=mobile_only>
This text will only be seen on small screens!
</SPAN>
You are done! Now your disclaimer will DISAPPEAR if your resize your browser small, or visit your page with a small sized device. For example, look at the following disclaimer and see it DISAPPEAR when you make your screen small:
The Machinery Movers Chicago Web site is intended to support the company missions related to teaching, research, and service. Documents, search results, or information in any other form (collectively referred to herein as "information") that are found on the Company's Web site are provided by a diverse range of sources. The Company makes no warranties or representations, either expressed or implied, about the Web site or its content or about the accuracy or currency of any information on the Company's Web site. The Company further disclaims any and all liability whatsoever in any information, material, or content of any external Web sites or Web pages that may be accessed through or linked to the Company's Web site. Users are hereby notified that by accessing and using this Web site the user assumes the risk that information and content contained on the Web site may be offensive, inaccurate, out-of-date, incomplete, and/or may not meet the needs and requirements of the user. Any reference on this Web site to any specific commercial product, service, manufacturer, or company does not constitute its endorsement or recommendation by the Company or its employees or agents. All Web site information is subject to change without prior notice. The Company makes no warranties or representations concerning the availability or functionality of information contained on its Web servers or that this Web site will be uninterrupted and error-free. None of the material, information or content on this Web site shall serve as or create a contract between The Company and any person or entity accessing and using the Web site.
By using The Company's Web site, each user agrees to abide by the copyright laws of the United States, all other applicable federal and state laws, and applicable policies and guidelines of our Company. The Company shall have the right to terminate a user's privilege of use immediately by written notice upon user's breach of or non-compliance with the terms of this disclaimer. Users may incur personal liability for any copyright violations resulting from the user's failure or refusal to abide by the terms of this disclaimer.
Make your screen smaller and see this stupid disclaimer disappear!
A lot of people code their websites with CSS boxes that are sized, and especially placed, in pixels. This is, and has always been, wrong on many levels for anything besides most trivial things. They will not render correctly on screens that are significantly bigger or smaller than the screen you used for development. It may be a PITA to rework those, but you need to do so.
HTML links in a text with reduced font size (FONT SIZE=-1) or some such, are not mobile friendly and you need to change that font to be bigger.
Go to Google's mobile friendly test page and it will get you started with more information. Or see How this very web page checks out!
