Part I - How to troubleshoot, design, and make friends with ie6

For those of you who don’t spend your days wrestling with cross-browser compatibility (read: making the website look the same in all browsers) you may be unaware of the constant battle therein.

Of the many browser choices out in the wild world web, the three most used are Internet Explorer 6, Internet Explorer 7 and Firefox. Those three are the ones we primarily troubleshoot for here at MoreVisibility, and in doing so, attempt to ensure that the greatest number of users will be able to view our sites as the designer intended. Of course we check Safari on a Mac too, but it is rarely problematic.

So all three programs are browsers, all designed to do the same thing, turn code into a readable page, and transmit data from server to client, right? So why are there so many cross-browser issues?

That’s what I’d love to know! In programming these browsers, some companies got it right, some didn’t. A certain software conglomerate’s early browser incarnations couldn’t handle, for one, valid CSS. This means, for designers that code in CSS, a myriad of ‘hacks’ and shortcuts must be engaged to force ie6, yes you guessed it, to render the layout correctly. This is not only exhausting, but incredibly frustrating for someone who has spent hours laying out a design in, say Firefox, then switches over to ie6 to find that the right sidebar is above the header and all the links are pink!

Microsoft made many improvements in ie7, which does a far better job of paying attention to what the coder meant, but there are still bugs. In addition, not all users have upgraded to ie7 and are still browsing daily on a severely outdated browser.

Firefox is my browser of choice, and it rarely lets me down. It is an open-source software, meaning that updates and fixes come regularly, ensuring that you always have the latest and best version of the browser.

But as much as I am tempted to force users into switching to Firefox, or any standards compliant browser, the reality is that it won’t happen. I have to work around the ie6 bugs and learn from the curveballs it throws me.

In my next blog, I will share some ie6 secrets, and shed some light on how to get your layout to function in ie6 with minimal pain and wasted time!!

The hardest parts of a website re-design or improvement are the aspects of the site that are not immediately visible. We can all form a quick opinion on the look and feel of a site, but critical aspects, like usability, navigation and user experience, are harder to assess. The way a visitor can and does move through a site shapes their experience on that site in a significant way. It is not enough to make a site clean, informative and aesthetically pleasing, the controls and navigation must be intuitive and clear as well. Page organization under category topics must be logical and functional. Once the user has found the desired information, they must be able to easily navigate back to the start, or onto related pages.

It is often difficult for designers and developers to assess the usability of a site, as they tend to be over-familiar with the design and the back-end, and have never been a true user of the site. When implementing a re-design or new navigation, have colleagues and associates test the site for these navigational and usability issues, and take their feedback seriously. Watch how they navigate through the menu, and how they use features of the site to find desired information. Then, if you must, give up some design high ground, and modify your structure to give your visitors the smoothest possible experience!

Optimized, or search engine-friendly, Design is a growing topic for us here at MoreVisibility, and I am glad to have the chance to blog on behalf of our Optimized Design Department! Our crack team of designers and programmers has been assembled to optimize and re-design clients’ sites for greater crawlability, relevance, and of course, beautiful design and functionality. As you would expect there are many aspects of a site that need to be modified to make it SEO friendly, but one of the most critical and difficult components is implementing stylesheets, or CSS.

CSS stands for cascading stylesheets, one of the prettiest names I think that the web development community has ever come up with. CSS was standardized by the W3C in the mid-nineties, but it wasn’t until the current decade that all browsers supported the platform. In recent years, a growing numbers of forward-thinking web developers have been using CSS exclusively to format their sites, with very efficient and beautiful results.

So what does CSS do? CSS is a stylesheet primarily, so as you can imagine, you can use it to format paragraph text, headers, sub-texts, etc. The stylesheet is referenced in each html tag, <p> for paragraph, <h1> for header, so that when you change an element of your <p> tag in the CSS, your text will change throughout the entire site. Online projects have been set up to showcase just how much you can change the look of a site, by simply formatting the stylesheet. CSS Zen Garden (http://www.csszengarden.com/) is one such project, where designers are challenged to just change the .css file, not the html, with amazing results.

But wait, there’s more! In addition to providing you with a consistent and energy-saving website, CSS can be used to format the entire layout of your site, from header images to navigation bars, and from separating columns to making input forms. Through the magic of a <div> tag (division- a catchall “box” that you can resize, stack, nest, and generally manipulate), your site can be built- out entirely using CSS, giving you clean code, table-free layout, and one place to reference your formatting. The amount of code on each page is cut drastically, and gives you a site that search engine spiders find a lot more crawlable.

So why aren’t we all swimming in CSS accessibility? Developers have been slow to adopt CSS, out of comfort with their old methods and the different interpretations with which the browsers read stylesheets. These issues can be remedied by a developer with plenty of CSS experience, who can create a site that looks great, is search-engine friendly by nature, and maintains a consistent look and feel on every browser and every system.

But if you cannot spring for an entire re-design, try implementing CSS for just your fonts, headers and links. You will soon fall in love with its ease and accessibility!

To check out the range of CSS-design possibilities, see CSS Remix (http://www.cssremix.com/), a showcase of the best and most beautiful designs out there. For fun, click on one of the featured sites, and in your browser window, go to View>Source, and marvel at the scarcity of markup! It’s magic! And the engines will love you too!