If your site is not ranking as you feel it should, based on its content, age and value, it could be time to think about making your site more device friendly. It seems that there is new importance being placed on sites that conform functionally across the spectrum of desktop, mobile, laptop and tablet regardless of the platform.
Maybe you have a small business site or an informational site and can't budget a major redesign but you want to regain visibility and traffic. This article has some basic ideas and suggestions for the site owner who wants to know what they can do on their own. It is primarily useful for static or dynamic (php) html/template sites since WordPress has integrated responsive design in its free templates. This article supposes that you edit your own pages and css or could do so. Note - this requires the use of a
viewport tag in a page's header which I'll bring up further along.
1.
Leverage the default font size. Start to rethink the way you think of pixels because devices use device specific css pixels and a font-size of 14px in your css is not at all the same across devices. The best piece of information I picked up in looking for ways to do this as simple as possible is quite basic. Every browser has a default font size and 16px is the default if it hasn't been individually tweaked by the user. Leave the font-size out of your css except to set it in the body settings to be 75% or 76% or 74%, to accomplish the font-size your site is accustomed to using and it will appear the same as ever and be translated to the corresponding size automatically in mobile or table or desktop browsers. 75% of 16px is 12px so it is exactly the same appearance as a 12px font setting. If you need a larger or smaller font size, specifically for an element, set it as font-size: large; or font-size: x-large; or font-size: small; in the css. If you have been using Microsoft font sizes such as 2 or 3, time to undo that and join the rest of the world. Read more here: [
developers.google.com...]
2. Switch your document type to
html5, for simplicity and added features you will get better performance. At the top of each page insert your doctype declaration:
<!DOCTYPE html>
<html lang="en">
(or your page's language tag)
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
(here's that viewport tag)
<meta charset="utf-8">
(recommended character set for better usability on mobile devices that do not support all charsets)
3. Might as well cover that
viewport thing here:
<meta name=viewport content="width=device-width, initial-scale=1">
The viewport tag is a metatag that tells the browser of the device to scale everything to it's own defaults. This is a very basic description, to learn more about its variables read: [
developers.google.com...]
Without a viewport setting your site is not considered by search engines to be device responsive in its design, even if "it works fine" on mobile devices.
4. If you have
javascripts in the header, two things: change them to external .js files and insert the script tags just before the closing </body> tag on your page. Wherever possible, use compressed (or minified) versions with extraneous whitespace removed. Javascripts in the head are are considered as render-blocking elements. There are apps for that:
5.
Split up your css file into two parts:
a. essential to rendering the page layout
b. color, design, image, specific elements
The (a) file link goes into the header as always but it is limited to a few specific elements such as body, img, <h#> colors - the things required to render your page in the layout you use.
The (b) file link goes after the footer though as some point soon, browsers are expected to universally accept media imports and the css file is considered "media" in that respect.
Use compressed (or minified) versions with extraneous whitespace removed. More information here: [
developers.google.com...]
6.
Image optimization would be a complete article itself, I just add these few points as things that are important to responsive design. Let your images resize. Control the image size by setting the % width of its container. In css the image element should have this setting:
img,
embed,
object,
video
{
max-width: 100%;
}
..and it will resize to fit the downsized elements automatically. If you are using things like
width="nn"
in your image links, please don't use that kind of markup, it is long deprecated.
Control the size of image files you use. (Not talking about art/photography sites here) Wherever possible use a size large enough for desktop and nothing larger. Optimize your images for the web. The dpi settings you see are print resolution settings, convert those to 72 dpi for most common image types. Use 8 bit color if you can or 16 bit, but you don't need 64 bit color depth for most website viewing. Read more here: [
developers.google.com...]
7.
Avoid inline styling. If you have been using style elements in your html, it is something you need to learn to replace, because inline CSS on HTML elements is blocked by default with Content Security Policy implementation that is about to make it stop working. Read about CSP here: [
w3.org...]
8. Remember that the
smaller screen size means users of mobile devices won't appreciate scrolling through several screens of text that may look fine on a desktop. There are more advanced ways to make their view different, but this is about the basic and simple things anyone can do, so we want to see what we have at the top of the page that could go below the main content and still work fine. Banners in the header won't be appreciated, time to take another look at the above the fold content. and organize the content by its importance to the visitor
9. Convert your css elements that are set in pixels to
use ems instead. The em measures using the browser's defaults (as long as that's what you use) so you can change a 2px; border width to .2em and it will look the same although technically it is not the same as 2px. Ems are a relative measurement, the default body font size is what you use to calculate ems, so 75% font-size = 12px = 1em. Don't let your pages go to full screen width, it looks pretty bad on a 27" monitor and is difficult to read, so set a reasonable width and use a container div to limit the body width. I stick to 1026px, just because that is what I was using before making these changes. Once you have a container, you can use percentages for your width and everything resizes down or up without scrollbars. If you have used the image settings shown above, your background and foreground images will resize to look the same on a desktop or smartphone screen without using pinch or zoom.
10. Keep in mind that
mobile devices do not have link hover states. Rather than clicking a link, there is a "tap and hold" (on some devices) that can reveal link destination much as "hover" would for desktops. A second tap would be the same as a desktop click. Think about a background color change that will look OK with the normal state of a link rather than just a font-color change. Space links so that there is at least .8em space above and below your vertical nav links so that even a fat finger only clicks what they meant to click. I set <li> elements to a 260% line height but this can be handled a number of ways. Tap target size can be particularly tricky on dropdown menus that don't work right without javascript enabled. Look for other ways to present content that are more user friendly. A quote from the Google developers [
developers.google.com...] site gives these tips regarding tap targets:
Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.
The Android developers have more at [
developer.android.com...]
There is much more, but these are the basics. The rest is found when you start looking around to find more information from the links I've included here. I'm hoping that others can share their ideas on this to help the small site defend their viability when they don't have access to specialized development tools or expertise.
