I’m one of the lucky few who do not yet have a smartphone. That’s right, no iPhone, Blackberry, or Android for me; I’m stuck with an ancient brick of a phone, which is fine because in general, I hate the telephone. But Chris has an iPhone, so I’ve become quite aware of the need for mobile web sites, for I always hear his complaints when he’s on a web site that does not have a mobile version of itself. After checking the browser statistics on LifePointOzark.com and SarahJoAustin.com and noting that on both sites, access from a mobile device has increased even in the last month, I’m more than convinced that our blogs need to be “mobilized.”
So what do we do? The easy answer is to add some mobile plugins that will do all the work for you, and I will get to those plugins tomorrow, but today, let’s consider seven best practices in our everyday blogging to make them mobile friendly.
Best Practice #1: Base Your Blogging on Text
Unless you have a photo or video blog, more than likely, your blog posts are text-based, and text-based posts have smaller file sizes than those with video, photos, or graphics. Smaller file sizes allow for faster load times on a mobile device, which increases the likelihood that a reader will get to your blog and read it.
Best Practice #2: Optimize Media for the Web
If you must have video, audio, photos, or graphics in your blog posts, that’s OK. As you edit your media, find a balance between quality and file size. No, your media shouldn’t look or sound like crap, but at the same time, you shouldn’t ask your readers to wait five minutes for something to load. For images, this means using a compressed JPG format and setting the resolution to 72 dpi; for video, this might mean sacrificing HD quality; and for audio, this might mean compressing an MP3 file.
Best Practice #3: Add Title Attributes to Links
As good bloggers, we should already be adding title attributes to our links for search engine optimization, but I’ll confess, I just started being deliberate about this on SJA. For every link you add, include a title attribute that tells the reader more about the link before the reader clicks on it. Give your reader all the information they need about the link, so they can make an educated decision about whether or not to follow it.
Best Practice #4: Add Alt Attributes to Images
Assuming you’ve followed Best Practice #2 and have only essential graphics in your post, your images are already worth your readers’ time. But some readers turn off graphics to quicken load times, which means they won’t see your illustrative image. Instead they’ll see the image description from the alt attribute. Give them incentive to turn images on by adding a short but powerful description of the image (i.e. not picture of flower but pink and white stargazer lily, close-up). Think of an alt attribute this way: How would you describe the image to the blind? Whatever your answer, that should be your alt description.
Best Practice #5: Don’t Resize Images with XHTML
When you resize images with XHTML, your web page loads the full-sized imaged before resizing it to what you’ve specified. This takes precious time on a mobile device. Instead, edit your image in Photoshop, iPhoto, Picasa, or GIMP; note the dimensions; and add width and height attributes to your image tag. Both Blogger and WordPress allow you to resize images with XHTML when you add images, but don’t take them up on their offer.
Best Practice #6: Keep Text and Style Separate with CSS
This goes without saying for all the blogging platforms I’ve used, but I mention it nonetheless. If you add styles to your XHTML to specify how your text looks, your mobile browser has to “think” through all those styles at it loads the page. Plus, it increases file size. Instead, keep your blog’s structure and text in the XHTML and keep your visual specifications in CSS files. As an added bonus, you can create a mobile style sheet that will render your blog exactly as you like in your mobile device without affecting how it renders on a regular screen.
Best Practice #7: Minimize Javascript
Javascript gives our blogs functionality that is often useful on a regular screen but usually unnecessary on a mobile device. Sacrifice this functionality, and you’ll make your blog load faster by decreasing file sizes. If you don’t want to sacrifice functionality, add Javascript by linking to an external file rather than embedding the Javascript code into your XHTML. As with media, there’s some give and take with this best practice. For example, because I want to collect traffic data for my blog–wherever it is accessed–I leave my Google Analytics Javascript in my XHTML.
Faster Mobile Blog = Faster, More Accessible Blog
These seven practices will not only minimize your file sizes and speed up your blog on mobile devices, but they’ll do the same for your blog on a regular browser. Not only that, your title and alt attributes and CSS will make your blog more accessible to non-traditional readers: primarily those with visual disabilities who use screen readers or those who still have dial-up connection speeds. It’s good blogging either way.
Stay tuned tomorrow for tools that will make mobile blogging and reading easier for you and your readers.
