How I Mobile Optimized My Website in 5 Minutes
We’ve all heard that the mobile web is “the next big thing”. And if you’re like me, you spend at least a few hours each week browsing the web on a mobile device. As a site owner, I knew that I should make my blog mobile optimized, but it sounded hard.
Would I have to create a whole new stylesheet for mobile users? I’d probably have to change the structure of my site or else just install a new theme, which I wasn’t happy about.
And how would I even detect that a visitor was on a mobile device? Using a list of mobile user agents? Aren’t there new ones coming out every month? What would I even have my site do if it detected a mobile browser? Redirect to a mobile subdomain? Gah, that sounds too complicated, I’ll do that next weekend…
But then I read an article on responsive web design using media queries, and five minutes later, I had a mobile optimized site. Here’s how.
What Does it Mean to be "Mobile Optimized"?
Before I dive into what I did, I want to briefly explain what I think it means for a website to be mobile optimized.
A mobile optimized site is one where text is easily readable and links are easily clickable. You shouldn’t need to “pinch in” or magnify the site in order to use it. Just like on the desktop, there shouldn’t be any horizontal scrolling. Everything should fall in a nice vertical line that makes use of the available screen space.
There should be very few distractions. Mobile users are more likely to be focused on one specific activity – like reading your articles – and less interested in browsing and clicking around your site than desktop users. A mobile site should make it easy for them to do what they need to do without a lot of fuss and distraction.
The screen shouldn’t be cluttered and the layout should lean more towards functional than artistic. That’s something that I believe holds true for any website, but it’s even more crucial on a device with a tiny screen and weak processor.
I’ve come across websites that looked beautiful on a desktop computer, but because of all the fancy effects, I couldn’t even scroll down the page when I tried accessing them on a mobile device. Not ideal.
Make Your Blog Mobile Optimized
There’s a powerful trick in CSS called “Media Queries“. When used properly, they can create responsive websites that automagically adapt their appearance based on how the site is being viewed.
For the mobile optimization we’re going to be doing, you’ll need to have access to your blog’s main CSS file.
If you’re on Wordpress like me, you can edit it from your administrative dashboard by going to “Appearance” > “Editor”. Make sure you see the words “Stylesheet (style.css)” across the top of your screen. We’ll add our code to the bottom of this file.
Define Your Media Query
First, you'll need to define what criteria you want to use for your mobile browser. For my site, I went with ``` @media screen and (max-width: 1020px) { } ``` This says, "for every device that's accessing our site that has a screen that is less than 1020 pixels wide, use the CSS that's coming up between the curly braces..."
Sidebar: There’s a lot of hair pulling over screen sizes that goes on in the mobile web design world. For awhile, people defined a “mobile” screen size as the size of a horizontal iPhone screen, 480 pixels. But then Apple came out with the retina display which doubled the number of pixels they could fit on an iPhone screen to 960 pixels. There are probably thousands of mobile sites that broke when they made this change. As you’ll see, I find that there’s beauty in simplicity…
I chose 1020 pixels as the cutoff for my mobile styles because that’s how wide my site’s layout is on a normal screen, from edge to edge. There’s no need to go looking up device specifications or worrying about future hardware changes. If a visitor’s screen size isn’t wide enough to fit my normal website, then it’s time to present a mobile version. Boom, done.
But if you’re curious or if you want to get fancier with how you define a mobile visitor, there’s more info on media queries here.
Strip Your Site Down
As I mentioned earlier, a mobile site shouldn’t be too wide. It should strike a balance between filling the screen with usable content and not jamming so much onto the screen that the site is unreadable or requires sideways scrolling.
The first thing I did was remove all of the width and positioning from the main components of my site’s layout. This put them in a nice, neat vertical line. I used width: auto;
to let the content take up the full screen size, regardless of how wide the screen is.
Note: For the non-technical, you can find out what these elements are called on your site using Right Click > “Inspect Element” in Google Chrome. Look for the id=
or class=
on the element you’re inspecting.
@media screen and (max-width: 1020px) {
#container, #header, #content, #footer {
float: none;
width: auto;
}
}
Hide All the Unnecessary Flourishes
Next, I hid elements of my site that were meant to add a visualize flourish, but would by annoying and awkward on a small screen. I also decided to hide all of my social media sharing buttons since they rendered awkwardly on mobile devices anyways.
I had a tough time deciding what to do with the sidebar. At first, I wanted it to fall in line beneath the rest of my content using the same styling that I did above. It would have naturally fit in underneath the posts on my site, since it appears after the div#content
in my site’s layout.
Unfortunately, my sidebar wasn’t happy with width: auto;
and it started to look really screwy, so I decided to classify it as an unnecessary flourish and hide it. I wanted to get this done quickly.
That left me with:
@media screen and (max-width: 1020px) {
#container, #header, #content, #footer {
float: none;
width: auto;
}
#subtitle, #share, #slider, #sidebar {
display:none;
}
}
Already, my site was looking slim and sexy on my iPhone, but it wasn’t quite ready.
Readability
While the layout on my site was looking good, the text was still small and hard to read. So I added a boost in font size for all of the text in my articles.
I decided I’d only apply it to the body text (p
elements) and not headings or other words on my site, so that things didn’t get too squished. Besides, you probably care a lot more about the content of my articles than you do about their titles or any other headings on my site.
So now I had
@media screen and (max-width: 1020px) {
#container, #header, #content, #footer {
float: none;
width: auto;
}
#subtitle, #share, #slider, #sidebar{
display:none;
}
p{ font-size: 2em; }
}
I had to make a few additional tweaks to handle other specific elements on my site, but that was mostly it. Five minutes and 10 lines of CSS had taken my site from an obnoxiously squint-inducing mobile experience to one that I was rather proud of. :-)
As always, feel free to reuse my code wherever you like.
Update August 2016: After 5 years, I’ve updated the style and layout of my blog, so the exact CSS in this article isn’t being used anymore. But I still referred to this article when doing the mobile redesign.