While I was there I met the managers, who have been using the internet pretty much since it was invented, and what he doesn't know about web design isn't worth mentioning. We loaded my website up in IE7 and...
...have you ever had someone creep up behind you and throw a bucketful of something horrible all over you right when you were trying to impress someone? I was totally humiliated by this out-of-date minority browser. they were gracious despite the fact that my site looked like someone had thrown a hand grenade at it, and kindly gave me the following advice:
1. Don't design for modern browsers, then hack for IE
This was the mistake I had made. You see, when I was learning web design I'd come from a background of tweaking blogs, forums, and other PHP-based website applications programs to look and feel the way I wanted them to.
Where it all went wrong
When I started learning web design in earnest, I was on such a steep learning curve, I went to the design blogs of the hip and the happening (see my blogroll below? That's my web design bible) to learn my craft, and they said I had to design for modern browsers such as Firefox and Chrome and hack for IE with if-statements and JavaScripts. Following the gospel according to Cats Who Code and W3C had convinced me that this was the way to go. The result was having a stylesheet for IE6, IE7, and my normal one which I called via the if-statements. What if you make changes and forget to change your fallbacks (as I did. D'oh!)? That's why they're wrong.
Getting it right
The first thing I did when I got home was to immediately implement their sage advice. I used Adobe Browserlab, IE Tester, and other sandbox tools to show me what my website looked like in IE7 and built for that. What IE7 does is show you up as a lazy coder. It makes you put in the 0 border value for your images and use floats and alignments instead of CSS positioning, which only has value if everyone has the same monitor size (they don't, believe me. It's one of my bugbears). The result is my website looking fine in all browsers.
2. Don't justify your text
If you saw my site before the changes you would have seen that on every page, the text was justified on both sides. I honestly believed that justified text looks neat based on my experience of the printed page.
Where it all went wrong
Usability. Some time ago, one of the managers had a vision problem that nearly sent him blind and as a result, he is passionate about usability. He says — and he's right — that justifying text makes it stretch awkwardly because the internet doesn't offer the kerning that newspaper software does, and this can render text unreadable. He's actually had to train people out of justifying text in Word documents for that reason.
Getting it right
Choose between left, right, or centre. It's not just about stretching the text or not, it has to be legible at different browser resolutions, too. If there was just one standard monitor size and resolution, problem solved, but the multiplicity of different sizes make it essential to keep text flowing freely. It can't if it's justified.
3. Make your menus relevant
When I showed him my portfolio, my shortcomings on IE became even more apparent. First of all, the menu text was obscured by my titles and the background. Secondly, he had to click four times to see the particular albums I wanted him to see to prove I'm not a total chump.
Where it all went wrong
IE7 lays your coding bare. Anything that has or hasn't been done will be exposed with every click of the mouse. The menu isn't part of the portfolio, I tacked it on to make it match the rest of my site, and boy, did it show! I'd also assumed that people know how gallery programs work and would click to get to the particular albums that display my work. I was wrong.
Getting it right
I added a z-index to the menu to make it show above the portfolio container area. Then I added links to the albums that display my work so they show below the main link to the portfolio.
4. KISS content
In the web design world, KISS means, "Keep it simple, stupid." Your message should be easy to understand and be presented in short, sweet bursts.
Where it all went wrong
In my drive to be as informative (and keyword-rich) as possible, I piled in content, often repeating myself. I suppose it comes from my background in creative writing but compared to other websites offering a similar service, I've got a flippin' essay on each page.
Getting it right
I was actually praised for the content, because as a rule, getting some words to put on the page is the problem. All I had to do was take out the repetition, shorten the sentences, and trim the actual word count down.
5. Use a cross-browser-compatible layout system
Back when I used tables for layout (I didn't have a clue how to implement divs), it was easy. Set your widths and height, and nest them for inner special effects like rounded corners for small panels.
Where it all went wrong
When I switched to divs for layout, I got layouts from the internet saints and prophets whose blogs I subscribe to and used them BUT I was still thinking in terms of tables. The problem with CSS3 div layouts is that I was using them the way I used tables, expecting them to stretch like tables to accommodate any changes I made to image sizes, padding, and things like that. Erm, they don't. Not the way tables do.
Getting it right
Use the 960 grid layout. The alternative was to change my website over to WordPress but the problem is I've already got a blog on b2evolution and it won't migrate to WordPress. I'd lose everything I have on it if I switched to WordPress and it might hurt my SEO. Besides, it's silly to run your website on one blog for CMS and another for your blog. I could use the blog as a CMS but I'd have to use tables for layout in order to keep the site looking as it is. Besides, I've been advertising myself as offering support for IE6 and IE7, haven't I? So that's why I changed my layout system. The guttering and other padding/margins provided by the 960 grid system preserve the layout whatever I do to it.
Okay, but why does IE7 still matter?
I was getting to that. The people who matter are still using it because budget constraints have prevented them from getting modern computers and operating systems. Decision makers. Remember, on the older computers these people use, it's not possible to upload a new browser because the system is set up to stop you doing that (it saves the IT department a lot of headaches. And time spent removing viruses).
Those kind people at Salford Hundred Venture who give me the advice I need to run my company are stuck on old computers and operating systems. These people can't give me sound advice while looking at a website that looks awful.
The fact that the market share has fallen below 10% is no excuse for failing to keep IE7 in mind. Until it's dropped off the edge of the world like that dinosaur IE6, we still have to take it into consideration when designing.
What about web standards and whatnot?
CSS3 rounded corners, drop shadows, text shadows and gradient backgrounds really appeal to me aesthetically, but IE7 won't render them without code fixes. IE PNGfix and CSS PIE have got those covered. Use them sparingly and you'll be delighted with the results.
No comments:
Post a Comment