Tagged: css

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.

Tags: , , , , , , , , , , , , , ,
Posted in bloggersguide.net | No Comments »

May 26th, 2008

Blogging With Lists, Part II: Ordered & Unordered Lists

Last week, we established that lists are a great tool for bloggers because they can make your content more readable by grouping related ideas and simplifying complex processes. We also learned when to use a list and how to write a list, but we didn’t cover the specifics of using the different kinds of lists. In this post, we’ll get to the nitty gritty of ordered and unordered lists, and next week, we’ll wrap up with definition and nested lists.

Writing ordered and unordered lists on the Web is a little different than writing them, say, in Microsoft Word because you can manipulate them with code. As a blogger, it helps to know what’s happening behind the scenes in the code, so if something goes wrong in your WYSIWYG editor, you’ll know how to fix it. I understand that code can be a little intimidating, but the HTML and CSS you use for structuring and styling lists is pretty simple. That said, let’s dig in.

Using Ordered Lists
If you’ve ever watched the Late Show with David Letterman, then you’re familiar with his top-ten lists, and if you were putting one of his lists (or your own) online, you would use an ordered list. Ordered lists work best in these situations:

  • When you want to emphasize the total number of items
  • When you need to complete items in a specific order
  • When you want to communicate priority

Behind the scenes, your HTML won’t look much like a numbered list, which is why it helps to know what all those brackets and letters mean. An ordered list in HTML begins and ends with the <ol></ol> tags—ol stands for ordered list. Clever, huh? Individual list items go between the <ol></ol> tags and begin and end with <li></li> tag (li stands for list item). Your HTML might look like the code below:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Just as long as your list items are nested in the <ol></ol> tags, they’ll be numbered or lettered; we’ll discuss defining those specs in a moment.

Using Unordered Lists
Think of unordered lists as the twin brother to ordered lists. Whereas ordered lists are perfect for emphasizing a number, an order, or a priority, unordered lists are perfect for emphasizing that which is unnumbered, unordered, or without priority. On the outside, they have their differences, but on the inside—in the code—they’re almost the same. An unordered list begins and ends with the <ul></ul> tags (ul stands for unordered list), but their list items—the <li></li> tags—are identical to an ordered list. The only difference is the opening and closing tags. An unordered list’s HTML code might look like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

If you decide you need to switch your list type from one to the other in the middle of your writing, all you have to do is switch the opening and closing tags. How handy is that?

Styling Your Lists
Once you have your ordered and unordered lists written, you are free to style them. Now, I won’t go into the ins and outs of CSS or all of the style commands here, but I will discuss the CSS options for the unordered- and ordered-list types:

  • list-style-type (ordered list). Declares the marker system you want to use for your ordered list:
    • decimal
    • decimal-leading-zero
    • upper-alpha
    • lower-alpha
    • upper-roman
    • lower-roman
    • lower-greek
    • upper-latin
    • lower-latin
    • hebrew
    • armenian
    • georgian
    • cjk-ideographic
    • hiragana
    • katakana
    • hiragana-iroha
    • katakana-iroha
  • list-style-type (unordered list). Declares the marker system you want to use for your unordered list:
    • disc
    • circle
    • square
  • list-style-image. Specifies the image you want to use as your list marker. If you don’t want to use a number or a bullet from the options above, you can use a little icon instead.
  • list-style-position. Declares the position of your list marker. You might think of this as specifying whether or not you have a hanging indent. Outside = hanging indent; inside = no hanging indent.

Like I said before, writing ordered and unordered lists online is a bit different than writing them in your average word processor, but as long as you have a basic grasp on HTML and CSS, you’ll have no problems. Next week, we’ll wrap up this series of posts with definition and nested lists.

Previous List Posts

—–
Image Source

Tags: , , , , ,
Posted in bloggersguide.net | No Comments »

 

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