Above is the new Birch Carroll & Coyle website. 80% of the website is made of flash including the menu. This is a problem when I want to look up movie times on my iPhone as I can't see the menu at all.
The Cedar website has moving clouds without using flash. Instead it uses jQuery to move an element across the screen.
Solution
- Most menu designs can be acheived with the use of CSS. Using a normal unorded list for a menu and then styling it with CSS you can produce the same look and functionality as Flash.
- Simple animations such as slideshows can be reproduced in javascript. Prototype, Scriptaculous or jQuery can all acheive animation without Flash.
2. Nested nestings
It's the old saying less is more and it is correct with website design also. What you can do with three tables you can probably do with one DIV.
Planning is a big part of web design and stops the 'we'll just make do' approch that creates line after line of code that you probably don't need.
For example using an unorderd list for a menu instead of table cells is less code, easier to style and more cross browser friendly.
Usually, the more elements that make up a website the more there is to go wrong in providing that website across multiple platforms.
Solution
- Plan out your website by sketching it out on paper. That way you can see what has to be written in order to acheive your design.
- Where there is an avenue to cut down on elements take it. If you have an image tag inside a DIV why not make that image the background of the parent DIV.
- Try not using tables for design. They are good for ordering data but not design.
3. Positioning
I definately understand this one. You get frustrated, you want to move an element to where your concept says it should be and you have a deadline. So, what the hey? you'll force it right? Use absolute positioning and make it move to the spot you want it.
Unfortunately this often leads to more work in the end and occationaly embarresses you as a designer if you don't cross-check your website with other browers.
Positioning too many elements as absolute in your website usually causes a mess along all the browsers as they translate pixel coordinates differently. For example, Internet Explorer has hidden margins on some elements that need compensating for.
Solution
- Making your code simple and straight forward means that you shouldn't need to many positioned elements.
- If you can't position an element where you want it go back to your code and think about how you can make things more simple. (point 2 above).
- If you are using an absolute element, make sure it's parent element is relative. (unless the element is a direct child of the body tag)
Conclusion
Keeping your website simple and straight forward with clean code you shouldn't have a problem with cross-browser compatability. Planning such as wireframe, sketches and concepts help to keep the process clean without frustration.
Are you working on a website now that have some of these problems or can't figure out why your website is acting weird on another browser? Comment on this article and we can discuss your problem.
