Tagged: xhtml

March 9th, 2009

7 Best Practices for Adding Mobility to Your Blog

Front face of an Apple iPhone, including default iconsI’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.

December 9th, 2008

You Don’t Have to be a Programmer to Hand-Code Your Blog

Last week, in a fit of motivation, I submitted five continuing education class proposals to the local community college; three of the five proposals were for blogging classes. I haven’t heard a yea or nay on my classes yet, but when I looked at my tentative class outlines once more, I realized that I better get my butt in gear and actually think through some of my micro units, which is the impetus of today’s post.

Today I want to talk about XHTML, also known as eXtensible Hyper Text Markup Language. Long before I started seriously blogging, I learned XHTML and CSS (cascading style sheets) in a graduate technical writing/web development class. Now, when I say learned I mean that I learned how to hand-code an entire website without leaning on Dreamweaver or any other web development software. I’ve heard nightmares from web development teachers whose students say they want to learn how to code when they really want to learn how to use Dreamweaver. Not in the class I took. We hand-coded everything. And I loved it!

I can hear you asking, “Sarah, what does this have to do with blogging?” Well, let me ask you, Have you ever wanted to change something–anything–about your blog’s appearance or functionality but you were afraid you’d mess up your template? Here’s the thing: Knowing how to hand-code XHTML can give you greater control over your entire blog template and your individual blog posts, building your confidence as a blogger and as a web developer.

Let’s be clear: I’m not advocating building an entire blog template from scratch. I mean, you can if you want, but there are so many free templates to choose from, why not pick one that’s close and tweak it until it’s exactly what you want? Want that elusive third column? Need to increase the height of your header? Hoping your images will line up on the first try? Hand-code, people!

Hand-coding your XHTML has other benefits, too. When you use a WYSIWYG (what you see is what you get) editor in Blogger, Dreamweaver, etc., you’re likely to get “extra” code that is automatically generated. This code can slow down your blog, hinder site performance, and invalidate your blog with the W3C. By hand-coding your blog, your blog will more than likely load fast, perform better, and be search engine friendlier. And who doesn’t want those things?

If you’re ready to learn how to hand-code XHTML, so you can have tighter control over your blog’s appearance and functionality, check out the list of resources below to get you started:

Even with these resources, you’re not going to be whipping out mind-blowing site designs immediately; however, learning XHTML, its tags, and its rules is pretty simple. Concentrate on it during a long Saturday or with a series of evenings at a coffee house, and you’ll be a hand-coding expert! Happy coding!

 

You need to log in to vote

The blog owner requires users to be logged in to be able to vote for this post.

Alternatively, if you do not have an account yet you can create one here.

Powered by Vote It Up