My Blogger template has been causing me some major headache, and it's only gotten worse. On top of that, I recently discovered some stats regarding sites which look ugly, which has shocked me to the core. Admittedly this blog definitely doesn't fall into the beautiful category, so I guess I shouldn't have been so shocked! All in all, I think the time is right for me now to take a short break from blogging to create a nice template for my blog, from the ground up. Stay tuned, and please subscribe to my feeds via your reader or via email. I promise I won't disappoint.
Wednesday, February 25, 2009
Monday, February 23, 2009
Using tags to improve speed, convenience of webpages - pt 1
February 23, 2009
Background
When it comes to designing webpages, be it for a personal blog or for a full-blown commercial website, the web designer is faced with a dilemma:
- The less code you can have on your webpages, the faster they will load. Hence, even the top websites ignore standards on a regular basis.
- The more structured your webpages are, the more accessible they will be to screen readers, aggregators, search engines, and even to browsers. This often means more code.
I gleefully call this the Speed vs. Accessibility Paradox. However, there are two good reasons for why you may not have given it conscious thought, or probably hadn't even realized that it exists.
Firstly: the consistent demand for loading web pages and web-based applications faster. Web 2.0 and beyond presents and insists on a fluid, desktop-like online experience. The number of readers who do not use screen readers or scripts to gather information far outweighs the number of those who do. Browsers will ignore most common markup violations anyway, and in addition, web pages are no longer expected to behave as documents per se -- database management systems have evolved enough to handle that department, and some of the great ones are free.
Secondly: history, and practice. It all started when, overwhelmed by the popularity of the World Wide Web in its early days, there was a desperate need to include stylistic markup in HTML pages, e.g. <font>. The browser wars escalated the trend of deviating from HTML specifications, and although CSS eventually kicked in, no browser today is 100% standards compliant yet. Therefore it's no wonder that many web designers continue to ignore web standards; likewise, there seems little chance of deprecated HTML/XHTML tags becoming obsolete overnight.
It goes without saying that the trade-off between reducing code to make web pages load faster and including code to adhere to standards and improve accessibility won't have a significant impact on the site's performance -- unless of course the site in question draws in a large traffic on a daily basis and could do with some optimization (such as search engines, which constantly need to improve), or is seeking to explore a potential audience.It's up to the web designer to choose which factor to compromise on, and how much.
In this series I'll look at some 'foul styling', i.e. using XHTML tags to sidestep CSS when we can, and some ways to make your web pages more accessible to screen readers and regular readers alike:
Using tags to improve speed, convenience in webpages - pt 2
*hang on*
Using tags to improve speed, convenience in webpages - pt 3
*soon*
Sunday, February 22, 2009
What is the slowest day of the week for your blog?
February 22, 2009
Generally it's the entire weekend1 for the internet; however, depending on your site it could even be a Wednesday that produces the least traffic.
In my case the weekends are always dry, and especially so if there's something like the Oscars on air (drat...). My stats are too poor to put up for display here, but yes, events of note do woo away your readers, you can take my word for it. I think I'll cut down on my weekend blogging...
1The figures provided in this link are from 2004, but unfortunately there doesn't seem to be any recent statistics on this.
Saturday, February 21, 2009
Attack of the bx- errors
February 21, 2009
In case you’re among the uninitiated, bx- error codes are randomly assigned to template issues in Blogger blogs that are currently irresolvable. I had thought I had seen the last of my share of bx- errors last year, but apparently the gods of Blogger certainly don’t think so. I tried to perform the simple task of moving the lines of CSS mentioned in this post higher in the header section of my blog, and got a bx- again. Worse, when I tried to edit anything in that post at all, the code got garbled, and at times the page would even refuse to load. The solution? As I had figured out myself. It’s going to be a rough summer…
Friday, February 20, 2009
How to write things like <head> in webpages
February 20, 2009
Whenever you try to write code including tags like <head> in webpages, the browser steps in and refuses to process angle brackets. There's actually a simple solution, but being moronic I keep forgetting this: just type "&" next to "lt;" or "gt;" (without quotes), for left and right angle brackets respectively. There.
The opposite? To write the actual code to get <head>, type "&" next to "amp;" and followed by "lt;" or "gt;" (without quotes again) to get the left and right angle brackets, in that order. Hence: &+amp;+lt;+head+&+amp;+gt;, sans the +'s. Voila.
Standards compliance, huh?
February 20, 2009
I decided to run quick CSS and HTML/XHTML markup validation tests on major sites using the tools on the W3C website (here: markup and CSS). Here’s what I found:
| site | markup errors | CSS errors |
| 62; 9 warnings | 1 | |
| Slashdot | 145 | none |
| Wordpress.com | none | 52 |
| Technorati | 13; 6 warnings | 19 |
| Yahoo! | 48; 44 warnings | none |
| NYTimes.com | 318; 69 warnings | 52 |
| Microsoft | 176; 36 warnings | 33 |
| Lifehacker | 314; 70 warnings | 2 |
Despite such errors, since browsers will almost always load pages the way they were intended to, it makes sense to reduce code, especially when your site receives millions of hits. Google’s homepage, for instance, doesn’t even have a DOCTYPE declaration. But as web designers and students of the trade who are persistently insisted across textbooks, websites and workplaces to follow standards, where does that leave us?
Thursday, February 19, 2009
Wednesday, February 18, 2009
It’s incredible
February 18, 2009
It’s incredible. It took my close to two hours just to publish my last two posts on Blogger. Every time Blogger was scrambling up code I was trying to display; I finally realized that I had to change a setting (read here). On top of that, I’ve tried out so many bits and pieces of code (call them widgets, modules, plugins or whatever) that my Blogger template right now, having accumulated years of dilapidated apps, is pretty close to a digital scrapyard. Looks like there’s no way other than hand-coding a brand new template from the ground up…
Tuesday, February 17, 2009
How to get rid of the Blogger navbar
February 17, 2009
There's hardly a Blogger user to be found who hasn't been irked by the navbar. True, it’s not entirely useless – it lets you quickly log on to Blogger and provides a quick customization link. But by just being there the navbar brings a generic look to your blog, which is enough to make readers not take it seriously. On top of that, the navbar allows any Blogger user to flag your blog! (Which, assuming you’re one of the good guys, puts you at the mercy of the goodwill of your diverse readership.)
Therefore it’s imperative that you hide your Blogger navbar, or at least know how to. In case you’re wondering, the Blogger Terms of Service doesn’t say anything about the navbar, so you’re good to go.
Hiding the Blogger navbar1. Sign in to your Blogger account. This will take you to your Dashboard. Click on the Layout link of your blog.
2. Click on the Edit HTML link on the Layout page. Don’t worry, you don’t have to know anything about HTML! I’ll take care of the code.
Scroll down the Edit Template field and paste the following immediately before the Profile section as in the following picture:
#navbar-iframe {display:none; visibility:hidden; height:0px;}
You ought to add a comment (/* for example, this part would be a comment */), just in case you wonder someday why you inserted this particular line of code. Anyway, what this line of code does is hide the navbar – but this will leave some empty space above your header, or as in my case, leave less space and make your template look like it’s been trimmed on the top.
3. If there’s an empty space above your header, scroll up the Edit Template section and paste the following immediately within the curly braces of the body section and as shown in this screenshot:
margin:0; top: -20px; position: relative;
Once again, don’t forget to add comments. What we’re doing here is negatively positioning the body of your template to hide the area left vacant by the absence of the navbar. (Some bloggers have proposed solutions using the !important tag, but this might cause problems with screen readers and is therefore not advisable.) Please note that the margin section might already be defined in your template. In that case, just skip pasting the first line. Also, -20px might be too much or too less; tryout a few values to see what works best for you.
4. If your template looks like it needs a tad more space on the top (whether step 3 applies to you or not), just increase the margin a few pixels. For instance the following did the job for me:
margin:2px;
5. Save your changes by clicking on the big orange Save Template button beneath the Edit Template field. Click on View Blog -it should now be navbar-free! If you want to bring back your navbar, simply remove the lines of code you’ve added and save your template.
Happy blogging!
Subscribe to:
Posts (Atom)