Skip to content
Building Mobile Friendly. There was a time, when my biggest worry as a graphic designer and web developer was making my CSS function in Internet Explorer. Not only is IE still a pain in the rear, now we have to worry about numerous screen sizes and operating systems.
There will be a time when mobile overtakes desktop browsing. Since mobile has become so prominent in our everyday lives, there are times when we web designers need immediate results. If you’re one of those designers or programmers that just doesn’t have the time to convert a static website into a WordPress theme, one that’s mobile friendly, there is hope for you my friend. When it comes to viewing all of your content on mobile devices, you can accomplish this with a little CSS and HTML optimization.
Globally, mobile devices account for more than half of the minutes spent online, according to comScore
Mobile friendly or responsive websites have the ability to configure the width of your website automatically, to fit the viewer’s device. Horizontal scroll bars are a no-no in responsive design. If you view your current website on a mobile device, and you see a scroll bar at the bottom of your phone or tablet, chances are your website (or elements of your site) isn’t mobile friendly. These horizontal scroll bars ruin the user’s experience and will most likely click the back button. People are so accustomed to scrolling vertically on their devices, so that when users find themselves having to scroll vertically as well as horizontally to view content, they become uncomfortable and leave the site.
It’s all-inclusive from this point going forward, design websites have CSS classes and ID’s for everything, and I mean everything.
From the header and menu div’s to the <p> tags in the footer. You’ll want to adjust the size of all these things based on screen width. Moving, sizing, and scaling are a lot easier when the element can be targeted via CSS.
CSS Media Queries are easier to use than you think.
The first time media queries were brought to my attention, I thought it was part of a programming language, and not a form of CSS. I was overcome by a sense of relief, when I found out what it truly was, and I’ve been using it ever since on ALL of my web projects.
Media Queries are basically CSS rules. If your screen is this width, then apply this CSS to these elements only. Take a look below.
@media only screen and (min-width: 100px) and (max-width: 699px) {
body {background-color: blue}
}
So the above code is simply saying that if the user’s screen is between 100px and 699px wide, then change the body’s background color to blue. This is where labeling every div and span in your site becomes crucial. Manipulating these elements for different screen widths become easier with proper tagging.
Css-tricks.com list many mobile widths for us as a quick reference.
/* ———– Galaxy S5 ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
/*****YOUR CODE HERE*****/
}
/* ———– HTC One ———– */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
/*****YOUR CODE HERE*****/
}
/* ———– iPhone 5 and 5S ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
/*****YOUR CODE HERE*****/
}
/* ———– iPhone 6 ———– */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
/*****YOUR CODE HERE*****/
}
There is much more media query code for Galaxy, HTC, and Apple phones. Additionally, the widths for Ipad, Galaxy and Nexus tablet widths are listed. All you have to do is input this code to your site’s CSS file and fill in the blank CSS brackets with your own code! Done!
Your site’s responsive, but it still doesn’t feel quite right
You may start to notice that some elements on your site take up quite a bit of space on mobile devices, like your main menu. In making it responsive, you most likely applied a “float: none” on the <li> tags in your menu. But now the menu is taking up a huge chunk of real estate at the top of your site. You’ll need to convert your main menu to a dropdown menu with jQuery and CSS media queries. Css-tricks.com also explains how to do this.
You may also deem certain elements as insignificant, ones that can found be on both desktop and mobile devices. . You can get rid of them using CSS:
#main-content .sidebar img {display: none}
}
These site adjustments have a tendency to make websites’ really long, compelling users to scroll a lot. This is where anchor text (for sighted users), or skip links (for screen readers) become your friend.
Anchor text is a clickable link that allows users to skip to a certain section of your web page, without having to scroll. It’s a handy method for mobile friendly sites. The code below is an example of anchor text linking.
<a href=”#skip”>Click here to skip to Main Content</a>
<a id=”skip”></a>Main content starts here
Skip Links are mainly used for screen readers and allow users with disabilities to bypass or skip over repetitive web content, like menu navigation, and get right to the information that interests them.
If skip links have a CSS rule of “display:none”, screen readers the link becomes “inaccessible”. So, a way around this is to position the links off screen, that way screen readers can still recognize your links, and allow them to skip through your newly mobile site.
.skip-link {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
So, that’s the quick and easy way to convert your fixed width website into a mobile friendly one. Also, don’t forget to set all your images to “width: 100%; height: auto.” Any images, div’s or spans that have a set width in pixels, will create to the horizontal scroll bar on mobile devices, so remember to set them to either percentages, or different widths for the varying devices using media queries.
It can be a bit time consuming, but trust me, once you learn it, you’ll use it forever. You’ll use this method on every website you’ll ever do, because even the newest WordPress or Joomla responsive themes and templates require a little doctoring to get them to look the way you want them to. That is especially true, with the ever-changing market for mobile devices.
[bctt tweet=”It can be a bit time consuming, but trust me, once you learn it, you’ll use it forever.” username=”ThatCompanycom”]-Izzak Hale, Senior Graphic Designer
