Sophisticated Design & Platform Agnosticity
I’m a big believer in creating sophisticated web solutions rather than making a one-sized-fits-all design. OK I’m not a graphic designer, but I like to think that with a little love and a tweak here and there it can all come together… so I’ve been tweaking again.
One thing that you may not know is that this website looks entirely different in IE6. That’s right, when I last performed a major redesign I said IE6 is going to look different – and not in a bad way. I did this to highlight how simple it is to feed IE6 any corrections… and I did it because I really believe the IE6 haters who just cut this browser off are misguided (even malicious).
Internet Explorer 6 Gets a Different Experience
IE6 is just another browser of many in the web landscape… sophisticated solutions try to overcome this impediment. Lacking a full page screen grabber for IE6 here is a header area screenshot of what IE6 users experience.
The IE6 Footer is also Different
And you will notice that the footer area is structurally and aesthetically different than the ‘better browser’ alternative.
Better Browsers Get a Better Experience
So this website after recent tweaks to the aesthetic (for those reading this in IE6 thinking I’m a mental patient) supports a totally different structural and aesthetic approach.
This Was to Prove Several Points
Developing in Firefox and then fixing IE6 after the fact is not only more logical and economical but you have more power as a designer to achieve a sophisticated solution. You’re basically playing with the shit that falls out of the funnel instead of hacking your way through the development hoping your spaghetti code isn’t too injurious to future maintenance.
Eventually if IE6 doesn’t appear on the commercial landscape I can just cut that IE6 stylesheet away like a scabby old band-aid. This is a real benefit of using web standards methodologies from the beginning.
Also, there is no rule that says a website must look the same in every browser – take mobile platforms as a good example.
Minor Changes in Recent Days
Regular readers of this website using better browsers will notice I’ve recently incorporated CSS3 opacity, rounded corners and shadows and I’ve changed the dark background image that caused the annoying flickering effect. You will also notice that I don’t much care if these are not supported by some older browser and that the luxury of not caring comes from ensuring that it gracefully degrades for lesser capable browser experiences.
None of this even affects the IE6 stylesheet so it’s simply not an issue.
Mobile Users (Hopefully) Get a Usable Experience
This website is also intentionally designed to degrade for smaller screen browsers so that it becomes a single column layout. For example put this URL into this iPhone emulator – http://iphonetester.com/ [If any iPhone users have feedback about the right of wrong of this simulator I'd really appreciate knowing if it's worthwhile or completely useless]. The website should be at least readable. I’ve got a few tweaks that need to be done again for Opera Mini but I’m leaving that for the next step in the experience evolution…
Enter CSS Media Queries
Rather than continue with the clunkiness of this approach to mobile browser experience, I’m considering the article published on A List Apart by Ethan Marcotte on Responsive Web Design which has inspired Simon Collison and Jon Hicks to pursue responsive web solutions. The trick is to incorporate CSS media queries… although I did read somewhere that CSS media queries have inherent processing inefficiencies. But there you go.
Ethan has a conversation about CSS media queries on the The Big Web Show episode 9: Responsive Design with Dan Benjamin and Jeffrey Zeldman. While I don’t agree with much of what they discussed about large file sizes on websites it does lend some insight into strategically pulling off the technique.
With the mad growth in mobile web experiences we’re bound to be drawn into mastering the mobile web design information space… it’s a part of the industry evolution we’ve all bought into as ‘web professionals’.
I guess like everybody’s weblog this one is just another work in progress. We’ll see how it goes in a few days as I find the time to rework the code. As always, expect a bumpy ride.
Update: 25 June, 2010
CSS media queries are currently partially implemented… highly recommended and not that difficult to achieve.
