I've also included a little advice on how you can apply these concepts to your own blog. If you are trying to make your blog accessible to as many people as possible, then it would be a good idea to follow these tips.
BUT, please keep in mind that your blog is YOUR blog, and ultimately you should do what makes YOU happy.
Screen resolution
What is it? Screen resolution is a measure of pixels displayed in each dimension. Don't know what that means? Don't worry. For our purposes, screen resolution means how your blog looks on different screen sizes.
Why is it important? Screen resolution immediately affects how people view your blog. If your blog does not fit comfortably on their screen, then readers are more likely to leave and never return.
What should you do? You will never be able to please everyone, so try to design for the majority. Sign up for Google Analytics to see what screen resolutions are most popular among your readers.
 |
| The majority of my readers run 1280x800, 1388x768, and 1024x768. Your readers are probably similar. |
Then test your blog on different screen resolutions. The higher the screen resolution you're using to test this, the better (because otherwise you're limited by your own computer's resolution).
Um, but what do you DO? There are three ways that you'll apply this practically: Your header, your sidebars, and your post body.
- Design your header so it takes up no more than 45% of the screen (less is better!).
- Horizontal scroll bar = BAD! You need to make your blog narrower.
- Images cut off on the sides? Not good! You need to make your blog narrower.
 |
| This is what my blog looks like on a screen with 800x600 resolution. Good thing the vast majority of my readers use larger screen resolutions! |
HTML, CSS, JavaScript, Java, Flash, etc.
What is it? These are different kinds of programming languages (sort of). For our purposes, think of this as your blog having a conversation with your readers' computers. Your blog's code is the language your blog is "speaking" in. The result of this conversation is what your readers see on their screens.
Why is it important? If your blog is speaking one language and your readers' computers are speaking a different language, then you won't be able to communicate.
Some people use older browsers or devices (phones, some tablets, feed readers, etc) that cannot speak these languages. Some people have installed blockers like NoScript, which are the equivalent to saying "Lalala I'm not listening" to languages like JavaScript, Java, and Flash.
Bottom line: If your readers' computers can't or won't speak your blog's language, then your readers won't see and be able to use your blog properly, or even at all. See how dramatic the difference can be:
 |
| Stop & Shop's website as viewed with scripts disabled |
 |
| Same page, but now with scripts enabled. |
What should you do? Design your blog using basic HTML and CSS whenever possible. Avoid using JavaScript, Java, Flash, and similar languages or plug ins. This will ensure the largest number of people can see and use your blog.
Um, but what do you DO? Some features that are commonly written using these languages-to-avoid are:
- Countdown widgets
- Drop down menus
- Widgets from sites like LibraryThing and Goodreads
- Rotating images
- Videos
- Images that change when you roll over them
- Certain types of spoiler tags (more on this in a future T&T post!)
- Pretty fonts
- Toggle menus (like the "Readers Also Enjoyed" menu on Goodreads)
- Certain commenting systems
If you're really curious, try installing NoScript and see what it blocks. Everything that's blocked isn't written using basic HTML or CSS and may not be visible or functional for all your readers. Keep in mind: Just because NoScript doesn't block something, that still doesn't mean the element will display for everyone (ex: pretty fonts).
 |
| Scripts not allowed or Flash not compatible. This is what I see in your sidebar. Attractive, huh? |
 |
| Scripts allowed or Flash compatible. Oh! It's a loud, moving poster! Er, great. (or, it would be a loud moving poster if this example weren't just a screen cap) |
Stay tuned for part 2 with even more tips!
Click here to read previous Tips & Tricks Posts
This is so fabulous! I'm not fond of Flash or Java in blogs. I generally think simple is better. And I agree that a horizontal scroll bar is a deal breaker.
ReplyDeleteI'm in total agreement. I like nice, clean webpages so much better. :)
DeleteGreat advice! Since I started off with WP.com and they don't allow Java or Flash in widgets, I think I was able to avoid having a lot of that stuff on my blog. Now that I'm self-hosted, I like the simplicity of not having a lot of flashy widgets in my side bar. I can't live without my drop down menus, though. So, like you said, it's about compromises. :)
ReplyDeleteOh neat, I didn't realize that about WP. Drop down menus are pretty awesome. There is a way to make them so they don't get blocked with things like NoScript, but I'm still working on figuring that out.
DeleteGreat advice! Thank you!
ReplyDeleteI love that link that lets you check your page on different resolutions.
I think mine's designed pretty good for that but I'm curious where on Google Analytics do you find the screen resolution info?
You're welcome! Here's where I found the screen resolution info:
DeleteClick on "Standard Reporting" on the top menu bar.
Click on "Demographics" on the left column.
Scroll down. See the heading "Mobile" all the way toward the bottom on the left of the body of the page (not the FAR left menu)?
There should be three options underneath "Mobile" Click on the one that says "Screen resolution" and that should show you a breakdown toward the right of the screen.
Did that work? I can show you with pictures if you can't find it (I'm a total visual learner) :D
I always love your blogging tips! Thanks for putting so much effort into them!!! :)
ReplyDeleteAnne (from Living in a Fairy World)
I'm so glad to hear that! You're very welcome :)
DeleteThis post is great!
ReplyDeleteI love how you always make me understand these things :P
As always, great advice! :)
I try :) I'm totally anti-jargon. Why use a big word when "thingy" will suffice? :P
DeleteAs always, great tips!
ReplyDeleteHeather
Thanks! :)
DeleteVery helpful. I want to redo my old blog design so bad - and I may have the time to do so in the next coming weeks hopefully.
ReplyDeleteNOOOOOOOOOOOOOOOO! Seriously, I adore your blog design. Please at least keep the Potterpuffs and their dialog bubbles. I smile every time I see them. :)
DeleteBrilliant, insightful advice, as always! <3
ReplyDeleteLove your blog tips! Simpler is definitely better most of the time. I just started this book review blog, so all of your tip blogs really help! :)
ReplyDelete