Welcome!
This site might look a little better to you in Firefox, simply because it's the browser I always test in. Firefox seems to be the most strict with standards and interpretations, and Microsoft IE seems to be too lenient. However, I do try to make my sites look good in both, hens the compromise of a few positionings in these pages.
This page and the Resources page are projects for my Website Design, Implementation and Maintenance class at Moraine Park Technical College.
Web Site Design Considerations
These are lists of things that one should take into account when making a website. They will help your site be better looking, easier to use for all people (even those with disabilities), and help you make the site.
Basic Design Principles
- Clear and consice page titles are needed for each and every page. Keep in mind that this is the text that will define your page in someone's bookmarks/favorites. It's also usually the first thing a user will see while the page is still loading.
- Dividing information and sections with white space gives the user more room to keep things straight in their heads. The less time it takes them to understand your point the better.
- Using symmetry and balance in your designs will also cut down on the time the user will look around for something they can't find. If the design confuses the user, they won't stick around.
- Repeating colors and objects can hold the design together and make your site recognizeable.
- Letting users use your service temporarily or giving good tours of your service before they have to sign up and give you their personal information makes the user feel more confident in you and your service.
Interface Usability
- Test early in the design process and keep testing as you keep building the site, using outside people, not the coders themselves. This will give you more time to fix usability problems and stay away from other problems that may crop up.
- Another way of reducing the time it takes the user to find what they want is consistent layouts on all pages. Keep the navigation in the same spot on each page so that they don't have to search for it every time; use the same fonts, colors and sizes of text so that they're not confused.
- Validate your uploaded page with a validator such as Wave to check your accessibility for those with disabilities and who use different browsers for their particular disability.
- Every time the user must scroll down the page to continue reading something, there's a moment of disorientation and they have to find where they were in the text again before they can continue reading. Make sure your pages are short so that this happens less. The readers probably won't notice, but they'll be thankful for it!
- If your page must be longer, though, make sure to use 'back to top' buttons or links. Take it a step further and put in anchor tags at the beginning of each section and link them at the top of the page, if you wish. This makes it easier for the user to find what they need without sifting through pages of information for it.
Compatibility
- Learning to use liquid design will help your site look good in any browser in nearly any size. Using absolute sizes in anything from font to div size will prevent your users from being able to resize the page if they think an object is too small to see or too big.
- If you believe your site will become popular enough, linking a stylesheet for handheld wireless users (such as cell phones) is a great idea. Being able to use your site at any time is a huge benefit for both you and the user.
- Even if you love Firefox more than Microsoft IE, don't ignore the IE users. Making your designs look good in all browsers will help the viewers get to your page more often through references and good words from friends and family. Keep in mind that over 80% of Internet viewers use IE!
- Always use doctypes at the top of all of the pages for the site. This will help browsers format the page correctly. Also, older browsers may not be able to use what you have written, but will be able to know which parts it can display to the user.
- Always use CSS for styling. Your style sheet can be overridden by the user who is color blind, or has another disability, so that they can see your site better, and that means more customers.
Layout
- Your words must be able to be read! Some script type fonts are either too small or too pushed together to read, especially when your font is small. You must match up the font type with the size of your font. If you want to use script, make the font larger so the viewer can read it easily.
- Know your audience. If they're just regular people, keep the layout easy to understand. If you think they'll be more technically inclined or experienced web surfers, then you can change it up more. Either way, make sure it's still easy to find what they're looking for.
- When you know you need to make a new website, start it on paper. Draw it out and get all things down pat before you start coding. That way you know what you're doing from the first keystroke.
- Since any one of your pages could be linked to individually from other sites, the copyright information and some contact information should be on each and every page of the site, preferably in the same spot every time.
- Edges, patterns and motion draw the eye more likely than static colors and pictures. Using these things to get the most important information to them first is a good idea, but never over use these methods as they get too distracting.
Navigation
- Users expect instant gratification. If they can't find a link or a page with the information they want quickly, or at least a link that might get them there, they will leave the site more often than search for longer periods of time.
- Users don't expect clicking a link to open a new browser window. They like being able to use the back button when ever they want to go back to the previous page or site. It's good practice to make links open in the same window, not a new one. It's also good practice to not use frames, which often disables the back button.
- Links should be clearly defined. If it goes out of site, say it does. Every link should also have a descriptive title tag telling the user where it goes when hovered over.
- Every page should have links to every main page within the site, especially the index or home page. The user needs to be able to go between the main pages (if not the child pages of them) and back again easily.
- If your design uses pictures for navigation rather than plain text, make sure to provide plain text navigation links elsewhere on the page, usually at the bottom above the copyright information. This makes it easier for those who cannot see or use the graphics of your site to navigate the site.
Content and Organization
- Users don't read your page, they scan it, usually in an F pattern. Guiding them through the information with anchor points and graphics keeps their attention on what's important.
- Users don't like to think too much! Making the page's contents obvious and self-explanatory will go a long way in helping them stay on your site instead of someone else's. Using headers, bold and italics draw the eye to key points in your paragraphs and get the information to them faster.
- Being creative with your design will make an impression on the viewers. Even though left, right and three column layouts are the most used, that doesn't mean you have to use them or leave them as is. Just don't sacrafice content for design.
- Keeping your coding clear is also a helpful tool for everyone. Using whitespace in the coding will offset areas and make it easier for you to find something and change it if you need to.
- Putting your information in understandable and logical sections will help everyone understand the information you wish to give out. Using white space or horizontal rules to separate different sections will also help you and viewers find what they're looking for.
Web Graphics
- Moving graphics will always catch the viewers eye and hold it. If you want the graphics to draw attention to something important, then use it sparsely. If the graphic draws attention away from important information, get rid of it.
- Smaller resolutions and smaller graphics will help the loading time of the page go lower. The more time a viewer on dial-up has to wait for your pages to load, the more time they have to think about going elsewhere for what they need.
- While smaller graphics are all well and fine, be sure that the information the graphic is supposed to give is easily seen. If the graphic is too small, the information will be lost.
- Use jpeg graphics for the pictures that are more complex as it allows greater variety of color and contrast. Use gifs for smaller pictures which don't have as much information to impart.
- Always put in the width and height of your graphics. This will help people with disabilities or those who have turned off pictures in their browsers to see that you had something there. Speaking of which, always use alt tags, as well!
