Category Archives: accessibility

accessibility, templates, web design

The age old question – fixed vs fluid (vs. elastic)

Fixed vs. flexible design is one of the main arguments of the modern web design era. Much of the argument derives from the fact that IE (Internet Explorer) did not support the min- and max-width properties until version 7. As of this date version 6 and lower are still in such high usage that you cannot count on these properties to work. So the question “fixed vs. flexible” is asked at many a new design meeting.

Fixed

What is fixed design? Fixed design is essentially defining a width on a page – no matter the size of the browser window. You can find fixed designs at sites like Helium, CNN and Yahoo. A typical fixed layout has containers, text, images and most other elements defined in pixels.

The main benefit to designers in using fixed layouts is that they have total control over the design. Unlike traditional media outlets – like newspapers and magazines – the web can be viewed through a large variety of devices from cell phones to PDAs to computer screens to widescreen HDTVs. With traditional media you always know how your page is going to appear. With the web, the same page viewed on a cellphone and a computer can appear vastly different – or even 2 computers with different screen resolutions. Fixed layouts give a designer more control over how their content is viewed. Finally, because you are defining the layout of the page you have more freedom with background images – if you notice the examples above all but CNN make extensive use of background images for design.

There are 2 main faults of fixed designs. One is that users with large screens and resolutions viewing sites with small widths have lots of wasted space. This is a bad user experience because you are dictating to the user how they should experience your site. The second is that if a user is using a smaller screen or resolution some of your design might flow outside the window – causing the dreaded horizontal scrollbar. This also creates a bad user experience.

Fluid

What is fluid design? Fluid design essentially allows the user to decide the how the page looks based upon the size of their browser window and display settings – the page “flows” (hence fluid) to fill the entire available space. Fluid designs can be found at sites like Google, Wikipedia and Reddit. A typical fluid layout has containers, text, images and most other elements defined in ems or percentages.

The main benefit to designs using fluid layouts is that they can use all of the space available to them. The philosophy is that you can’t predict the user’s setup so you want to make your design as adaptive as possible in order to increase the user experience. A fluid layout puts the control of the design in the user’s hands.

There are 2 main faults with fluid design. One is that if someone has a very large/small screen or resolution your site can appear “wonky” – extremely long/short lines of text and distorted containers. The second is that fluid design makes it extremely hard to use background images because of container distortion. They require vast amounts of testing in order to function properly – if at all. In the examples above none of the sites use background images extensively – which severely limits your design creativity.

Hybrid/Elastic

A new design not mentioned in the title goes by several names and is basically a hybrid of the two. It uses min and max width (using javascript for IE6) to try and get the best of both worlds. Basically it defines a range of values in which the design can flow – so that you still have some control over the design (like fixed) but users with larger screens/resolutions can expand the width somewhat. 456 Berea St and Digg use something along these lines.

The main benefit of hybrid/elastic is that it gets some of the benefits of both fixed and fluid – users and designers split control over the design. It’s main fault is that like any hybrid it doesn’t do either of those things as well as the original.

So which is better?

If you haven’t figured it out by now, there is no right or wrong answer. The correct choice depends on the purpose of your site and your design preferences. The sad fact is that any choice you make is going to alienate some user. The old saying is that “You can please some of the people all of the time and all of the people some of the time, but you can’t please all of the people all of the time.”

Typically if you have a site with shorter blocks of text and/or you are more Web 2.0 you lean towards a fluid design – utilizing large font sizes to lower the impact of some of it’s faults. If you have a site with long blocks of text – like a news or article/blog based site – then you lean towards a fixed width design.

Random Tidbit: Speaking of design what about Time.com’s 50 coolest websites?

accessibility, css, web design, webstandards

Designing for cross browser compatibility

One of the best and worst things about the web is the fact that when it comes to your choice of web browser the program you use to access and view the internet – you have multiple options. From the standard Internet Explorer (PC) or Safari (Mac) to open source projects like Firefox to outsiders like Camino and Opera.

The problem is that all of the browsers interpret (X)HTML – the code websites are written from – very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues – having the right tools, designing with web standards, and utilizing filters or conditional statements to feed alternative styles to less compliant browsers.

Tools

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer’s Toolbar and Firebug.

The Web Developer’s Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally) and many other useful features outside the scope of this article. Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML on page so that you can quickly test for different scenarios. Both of these will save you a great amount of time while you are designing your site.

Web Standards

Web standards is the practice of writing (X)HTML using standards compliant code – basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough “hooks” for your CSS. Some of the benefits include improved Search Engine Optimization and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation – allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site.

If you’ve done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers – Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize filters and conditional statements.

Filters and conditional statements

Filters should only be used when nothing else can. If you have designed in Firefox then at this point you should have no issues in that browser. Internet Explorer will be covered in the next paragraph. Opera has no way to filter CSS to it. It typically has few rendering issues that do not pop up in Firefox though and any that do typically you must live with. The only browser not mentioned is Safari which does have a large user base. In your main style sheet you can define styles to target only Safari by using the following rule:

:: root (parameters) { styles }

So now you’ve covered the most compliant browsers: Firefox, Safari and Opera. The only one left is IE. IE has it’s own set of filters but utilizing them is not advised because they get messy as you have to override main styles for IE6 then in many cases re-override those for IE7. The best practice is to use conditional statements. You simply define additional style sheets – for example looking at the source of this site you’ll see a sheet called mainIE6.css – and put the rules for those browsers in them. Microsoft has defined conditional statements that can then feed those styles to whatever IE version you define and only IE. The standard way to do this follows:

<!–[if IE 6] (style sheet link) <![endif]–>

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above – and so on.

Now you have the tools to correct any rendering issues that might pop up.

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either filters or conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Random Tidbit: I really like SEOmoz. I like their article on getting traffic from Digg comments even better – though I’m a bigger fan of Reddit personally.

accessibility, css, web design, webstandards

Merits of Good Web Design

Good web design is about reaching the widest possible audience. To reach the widest possible audience you must design with two thoughts in mind web standards and accessibility.

Accessible designs allow users to resize text even non-compliant browsers like Internet Explorer 6. They provide alt tags for images, in case someone is using a text browser, and those alt tags are descriptive of the images so that those users can gain value from them. They offer a design in which the user can skip navigation and get right to the content both for ease of use and for someone using a text browser. Many people don’t realize when they’re designing a site that the source code is how text browsers will read their site so if you have the header, navigation ads and all other non-content related items before the content in the source code than people using those browsers will have to navigate through that on each and every page. Offering them an alternative to that is one of the keys to accessibility.

What many people don’t realize is that is also how search engines read their sites. So by making your site more accessible you are making it easier for search engines to decipher what exactly is important on your site increasing your rankings and making it easier for them to understand the keywords that your site should rank for.

Web standard based designs function in much the same manner. Designing with web standards means separating content from appearance. Anything that does not deal directly with the content or present some semantic value to your site should be relocated to the CSS. You place all your non-semantic images backgrounds, bullets, etc, colors, font sizes and faces into the CSS. Then your (X)HTML contains only the relevant markup in semantically correct tags H elements for headers, strong for important text, p for paragraphs, em for text you want emphasized, ul/ol for lists, li for list items, dd/dl for definition lists and items, etc. You can then use additional classes and ids on those elements to style your site and match almost any design you can come up with typically with additional div and span tags used sparingly to help provide additional hooks for your CSS.

Designing with web standards also allows you to optimize your site for search engines since you are now declaring to them what your header elements are including hierarchy, what the title of each individual page should be using the title tag, one of the highest ranking SEO tags; and laying out the content with semantic tags so it is able to electronically “read” your content and make keyword associations like the human eyes does naturally.

So by practicing good design you are not only naturally increasing your audience by allowing the largest number of users to view your site but also helping to improve your rankings in search engines for terms relevant to your content. In addition, by separating content from appearance you can easily update the look of your site by changing the CSS and potentially adding a few more hooks cutting redesign time drastically.

In conclusion, good design means using accessible designs and standards compliant code. This brings you the largest possible audience, the lowest possible redesign time for future updates, lower bandwidth (because CSS is cached), and search engine optimized code.

Random Tidbit: The Google maps flight sim is pretty cool.  Though I wish they had more cities.

accessibility, css, web design

IE 6 == bad

So I’m designing the other day in Firefox and everything is going fine.  My code is clean, simple and rendered correctly.  It looks good and matches the mock I had.  Life is good.  So I fire up Internet Explorer (IE) because, unfortunately, the majority of users still view the web through it.  And not only does it not render anything like Firefox – my beautiful design now looks ugly and out of whack – but it is also broken.  So I now have to take time to utilize hacks to make it render similar – not even alike, just functional – to compliant browsers.  For those of you that don’t know hacks are (typically incorrect) snippets of CSS that are read by less than all of the browsers – I have been using the Holly hack as of late.

As a fan of web standards and accessibility this grates on me.  Not only because IE makes it so difficult to make things accessible unless you use em’s instead of px’s, for one, but also because I spend 25% of my time or more just fixing things that shouldn’t be there in the first place.  That’s time wasted that could be spent making my designs more clean or adding new features.

IE6 has gone from the top browser (many years ago) to now being that uncle that you’re embarrassed to have people meet.  I have heard how many people have adopted IE7 – which I haven’t used much but is much closer to being compliant – but when will it finally be the staple?  When will I stop having to code for IE6?

Unfortunately, professionally, I can’t stop yet.  Depending on which statistics you look at – compare the earlier ones to these for example – IE6 is still used by 42-61% of the users out there.  That kind of majority you can’t ignore as a business.  As an independent designer though, I can.  I’m drawing a line in the sand.  I will be soon upgrading my designing computer(s) to IE7.  After that, none of my templates will be tested in anything lower than 7.  So if you want it to work in 6 and it doesn’t – you’re on your own.  I realize that this may hurt me for sites I list my templates on – like OSWD which just recently got around to uploading the (very bad looking, since I was much more inexperienced then) templates I sent them over 8 months ago – but I simply have stopped caring.  Designing for IE6 is like Microsoft designing a new 360 game and testing it on the original Xbox to make sure it still works – they wouldn’t.

So that’s my line in the sand.  Hopefully more designers will join me and more users will become aware of the fact that there really is better out there.  Firefox and Opera(which I personally prefer) are both excellent browsers and if the user is really sold on IE then 7 is a free update.

I will also be sending OSWD 2-3 more templates (hopefully) in the next week.  No telling when they’ll go up though.  Don’t judge me for the work currently there – you’ve seen that I can do much better now.

Random Tidbit:  Since I’m harping on Microsoft, I wanted to share an interesting article about how the world would be if Microsoft was no longer around.  Don’t think I’ve shared that one yet.  Also, an excellent article on 456 Berea St. citing 10 reasons to learn and use web standards.  As someone who has had to explain why standards are important to both clients and employers, I kind of wish I had this article 7 months ago.

accessibility, css, web design

Keeping Accessibility In Mind

I saw this article awhile back and meant to blog about it, but haven’t had the time.  In working on my site redesign though it struck my eye as I was perusing my links and felt the urge to share it.

Recently, Target was sued in a class action suit because their site was inaccessible to the vision impaired.  It has been a law for awhile now that web sites, like other facilities open to the public, must be accessible to all.  When doing a redesign you must keep in mind not only the various browsers and screen resolutions it’s users might have – but also other mitigating factors that might cause them to be unable to use your work as intended.

I am not well versed on the subject, but I would check out Molly’s blog – she has done a lot for the web standards and accessibility community.

Random Tidbit: In further perusing my links I found another link from Juicy Studio talking about Validity and Accessibility – well worth a look and a bookmark on del.icio.us.