Yesterday I finally broke down and bought Parallels and Windows XP to run on my MacBook Pro so I could do my CSS debugging and testing on IE 6 and IE 7 for Windows. After the ridiculously long Windows install and then security updates (74), I was pleasantly surprised with the speed and performance of Windows and IE within Parallels. I was quickly able view all my work in a Windows environment while also using my Mac browsers at the same time. This is awesome and I am quite excited to have this as an option.
If you do not have a lot of time or experience with CSS, here are some quick ways to save yourself headaches down the road. If you have read my blog before, this is nothing new, but I cannot stress these points enough.
- Validate your code. By simply validating your code, you can learn a lot about CSS, as well as find picky errors which might wreak havoc on your code (missing closing bracket, etc).
- Look at your site in more than one browser. I have been a part of several projects that have been built to “look ok in Firefox” but are a disaster in Safari and IE. Usually if you check your work in two browsers (IE and Firefox) or even just Safari and Firefox (for the more advanced developers that are aware of IE issues) you will save much frustration later.
- Look at your changes often. I will generally make small changes, then check out the changes in IE, Safari, and Firefox. If all looks good, I move on. If not, I at least know the problem lies in a small chunk of code.
- Use background colors to troubleshoot. In the last few months, this tip alone has saved me countless hours and bottles of Advil. Floats with margins and padding often appear correctly in one browser but not another. Why? Usually they have some issues with width. Do you really know where your float boundaries are? I don’t…so I will add a temporary background color to my containers so I can see exactly how wide everything looks. This also works well for general spacing issues. You can easily see if it is the rogue padding or margins belong to a certain class or div. When working with several layers of divs…this is an easy way to save time.
Questions? Comments? Let me know!
If you have thought it through and tried to make small changes but you are still unhappy with your site, here are some things to consider:
- Existing successful web sites. The first thing that I do as a web developer/consultant is ask my clients to list three-five web sites they like and find easy to navigate. This not only makes them think about what they consider good practices, it also helps me to create a “best of the best” web site for them based on real usable web sites and not abstract design thoughts.
- Color/Branding. I also ask to see their letterhead, logo, or anything else the individual or company uses. I feel it is very important for companies to set a consistent and professional tone for their users and visitors. Brand recognition is key in most markets. There are a number of web sites that can help you choose a good color palette – use them. (Adobe Kuler is a good example)
- Purpose. I recommend really thinking about what users are looking for when they come to your web site. If your site’s purpose is to provide information to the users, make it easy to find that information. Users will appreciate being able to find the information much more than the expensive flash animation when the site loads regardless of how cool it might seem. There is a time and place for most everything. Once you figure out your purpose, do not get distracted. (Think Google.com)
- Audience. Know your audience. If you expect a large number of users to be on a certain platform using certain browsers or using cell phones to access the site, make sure you spend some time and optimize your code appropriately. With a little effort, you can also do a lot to your site to make it more readable and accessible for people with disabilities. Be sure and also analyze your logs to get more demographic information (this is invaluable).
Although the list of items seems pretty straightforward, you would be surprised how many people do not consider any or all of them. If you can address all the items above, you will be on the right track to creating a successful web site. Have a project you need help with? Contact me, I would be happy to help out.
I have had a number of people ask me to help them with their web site redesigns/re-development because they are unhappy with how their current site looks. Usually I hear one of two comments:
- “I have been using this design for x years and I need a complete redesign.”
- “X in the company is complaining he cannot find anything on our web site.”
What most people fail to realize is that there are a lot of ways to revive aging web sites that are quick and easy – and best of all – do not require the users to completely relearn an interface. Successful web sites are successful, not because they constantly change, but because they constantly improve and build on their existing layout – and there is a big difference.
Two successful web sites in my opinion:
Why are these web sites successful? They have a strong foundation (navigation, general layout, content placement) and instead of doing complete redesigns, they have made tweaks, added new features, and addressed any problem areas over time. When users go to either of these web sites they know exactly what to expect – and users like that. Unless the web site is a complete disaster, the users would much prefer to have small fixes and general user interface changes than to have to relearn (and re-define new problem areas) something completely new.
So back to the quotes above…next time you think your company or personal web site needs a complete overhaul take a step back. Ask yourself if there are some small changes that you could make before you scrap what you already have. Perhaps you just need to move the search box, re-work the navigation, or change a few graphics to freshen it up a bit. If find yourself with someone constantly complain about something – sit down with them or talk to them regarding their issues and remember – not everyone will be happy with your user interface. It is always best to do surveys and to look at your log files with something like Summary or Google Analytics to see what people are searching for, what pages they enter and exit on, and what pages get the fewest and most page views. This data will help you highlight the most frequently referenced information as well as point out what users do not find important, or just cannot find.
To wrap it up:
- A little goes a long way. Take small steps to improve your existing framework (as long as it does not look like 1997 got stuck on your web site) Users like feeling comfortable.
- Talk to your users to find out what they like and do not like. Education works both ways.
- Use tools that will show you traffic trends so you have some concrete data to work with.
Recently I needed a way to align the bottom of a graphic to the bottom of the text and found the solution:
vertical-align:text-bottom; (More information on vertical alignment).
If you own a domain name or maintain a web site you have, at one time or another, wondered who is currently linking your web site. Wonder no more. If you have a Google account, you can log into the Webmaster Tools, add your site and view (and download) a table full of incoming links – both internal and external. Thanks Google!
A few months ago I read about Open DNS and thought “wow, I should really check that out” but then I never did. Finally I revisited it tonight, updated my router with the Open DNS servers, and wow – I can see a big difference in speed…and I am not over exaggerating. Doug – try this now. Ken – try this now (even though I know you won’t). Perhaps Dad M should also try this too. Not only is it super fast it also corrects common spelling mistakes on the fly. jappler.vom = jappler.com. To make it even better – it is free and you do not have to create any sort of account. Great service!
A few simple commands to help make your life working with UNIX a little easier:
- If you are looking for a certain programs, use:whereis. Example. You want to find out where ipfw is located. In the command line type
whereis ipfwand whereis will spit out the location (/sbin/ipfw).
- If you need to find a program or a file and you know what it is called, use:locate. Example. I know I want to uninstall MySQL, and I want to see every file that has mysql in the file path. In the command line, type
locate MySQLand locate will spit out every file with MySQL in the file path. (Note, locate is case sensitive).
Earlier today I was asked for the command to show a file size in UNIX and so I thought I would share. There are, of course, a few ways to do this. One great little command to keep handy is:
du -h. The du (display utility) will print out the size of a file or directory. The -h will make it “human readable” (put the sizes in Byte, Kilobyte, Megabyte, Gigabyte, Terabyte and Petabyte). So, next time you need file or directory sizes, use
du -h and be done with it!