Web Design Tips

Design Tips for Websites

Web Design Tutorials

Design Tips

Website Design Tips for building Effective Websites

Listed below are some important and useful tips for designing an effective and high quality web site. If you are a beginner-to-intermediate level designer we suggest that you read our articles on Design Concepts and Design Basics first.

  1. Give Priority to the Website User's Needs: A web designer must be focused on the user's need at all times - usability, accessibility, user experience and user interaction considerations are all part of this. Learn to see things from a visitor's perspective while designing.
    1. Use Clear, Maintainable and Easy Navigation: Navigation links placement on your website plays a big role in determining the stickiness factor of your site (how long your visitor stays and explores your site). Your navigational structure should be neat, consistent and easily accessible for an optimal undistracted user experience. The navigation should be flexible enough to accommodate any amount of additional links as required. Read our Website Navigation Tips before you start designing your site.
    2. Clean and Consistent Layout Design: A clean layout that uses a lot of white space enhances a site's look and readability. The layout should also keep the focus on your content. Use fonts that will be available on all computers to prevent your site looking messed up. We recommend the use of dreamweaver templates for website design consistency.
    3. Design for all Screen Resolutions: A responsive site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
    4. Make sure the website is Cross Browser Compatible: Make sure you check your website in the most used versions of all top browsers Google Chrome, Internet Explorer, Mozilla Firefox, Opera and Safari as they constitute 95% of the world's browsers.
  2. Program using pure CSS and latest technologies: The world has moved away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
    1. Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing and Line-through Effect
    2. Bullets in HTML or Dreamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
    3. Links without Underline: Use CSS Styles to display links without the appearance of the underline.
    CSS3 and HTML5 coding is what is widely used now even if they are not fully supported by all browsers. Try simple features like shadows and rounded borders in CSS3 and switch to HTML5 coding to make use of the latest trends in web development.
  3. Optimize Load Time: Make sure your load time is low and test for your website's performance often. For this you must:
    1. Minimize Graphics, Flash and scripts: They hugely increase your file size.
    2. Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.
    3. Use Server Side Include (SSI) files wherever possible. Includes once called from the web server reside in its cache so on subsequent requests they load faster.
    4. Use Server and Client caching of your web page static content (Images, JS, CSS and HTML files).
    5. Set Expires Header - The optimal expiry time for your static content is 'more than 7 days'.
    6. Minify CSS and JS code - remove all spaces, comments and line breaks from your CSS and javascript files.

    Related article >> Tips for a Fast Loading Site

  4. Ensure a Scalable, Reliable and Responsive Website: As technology advances and configuration of computers & their monitors keep increasing and varying, it is impossible to test your site in all screen sizes, platforms and user scenarios. Make sure your design, code and hosting are scalable by being error free and able to withstand increased user loads smoothly. You would have designed a reliable and responsive website if you know that it perform well under most user circumstances and would look good on most devices.
  5. Test Early Test Often (TETO): Its extremely important to carry out usability and user interaction tests as early as the design phase of building your website. Also keep testing and improving your website as it grows. Try to test out your site in 80-90% of the top device types used to view your site. An easy way to find out important parameters like the types of devices and screen resolutions mainly used to access your site is thru your Google Analytics account.
    Browsers: Audience > Technology > Browser & OS
    OS: Audience > Technology > Browser & OS > Operating System link (default data shown is Browser Types, locate the links to other dimensions just above the data table)
    Screen Resolutions: Audience > Technology > Browser & OS > Screen Resolution link
    Mobile Devices: Audience > Mobile > Devices

Design a Website

Design a Website: Learn how to easily design and build a professional website. Create step-by-step the cool website shown above.

Related Links :: Design Concepts | Design Basics | Web Design Tips
Design a Website | Website Header | Website Background
Website Navigation | Design Ideas

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!