VirtualMV/Internet & Web development (2)/Course materials/Overview/Design Tips

Introduction

Overview

By the end of this overview you will be able to: Identify techniques that will improve web page design

Overview

Web Design Tips By the end of this page you will be able to: Have some tips for successful design

The following web design tips are based on those identified by Buchanan(2007).

• Who is it for?
  • Who is your target audience?
  • What level of computing experience and computer hardware do they have?
  • What content do you have, and how best can you sectionalise it so as not to over-load any one area of your site?
  • If you're building a site for a client, what are their expectations and requirements? (this phase can take days, even weeks to finalise)
• Say something
  • Content is king
• Users can navigate around quickly
  • Build your designs to help navigation. Avoid huge graphics.
• Minimise page size (including graphics)
• HTML or WYSIWYG?
  • Learn HTML
• HTML tools
  • Invest in good HTML editor
• Design first
  • Spend some time designing your site navigation on paper both how it works and what it looks like.
  • Should be clear, concise, easy to use and carefully planned
• Get the map out
  • Provide a site map … but … design so you don’t need one.
  • Good navigation answers..
    • Where am I?
    • Where was I?
    • Where can I go?
  • Consider adding a search engine
• Three clicks, you're out
• Screening your audience (Responsive design)
  • The most popular PC screen resolution in use today is 1024 x 768. With browser toolbars and other OS clutter on-screen, the designer needs to take this into account when developing sites.
  • Mobile Web browsing is becoming important so your site needs to take this into account if you expect users to view your site on a mobile device.
• What's your name?
  • keep your naming conventions consistent. Lower-case/Camel-case file names, no spaces
• Manage your fonts
  • Use CSS
  • If you need special fonts use images but don't forget the alt/title tags
  • Don't embed fonts
• Attaining balance
  • Try and keep a balance between the amount of text and the number of images on a page. Any more than two screens worth of text is probably too much, and you should consider breaking your page into smaller chunks. No scrollbars in both directions.
• Use CSS
• Watch your use of multi-coloured backgrounds.
• Not-so-greatest hits (your eyes only)
  • Avoid Hit or page counters (If you have a database driven web site you can collect them there or if a public access consider Google Analytics.
• Avoid frames
• Use images smartly
  • specify a width and height (allows page to render before images loaded)
  • Reduce image colour and depth and compress
  • Use alt and title tags for images
  • Create thumbails for large images
  • reuse images where possible and check that the same images on different pages point to the same actual file. (e.g. logos) as they are cached.
• Size does matter
  • Hosting is cheap, data transfer costs
  • Keep file sizes small
  • No more that 10-20 second downloads
  • Visitors you lose
    • 7% if under 7 seconds
    • 30% between 8-12
    • 70% if over 12
  • Not everyone has broadband!!
    • Reduce the number of files,
  • Optimise the file sizes
  • Compress HTML
  • Reduce sound quality
  • Use optimising software (especially if you have pasted from products such as MS-Word, or Internet pages)
• Keep things simple
• Saviour of the universe?
  • Use Flash judiciously
• Use common plug-ins (Quicktime, flash)
• Use Sound sensibly
  • Flash or HTML5, but remember may not play in client browser, use sparingly.
• Don’t just use a new effect (it shows)
• Test, test, test ..
  • Check your work thoroughly (Spelling/grammar)
  • Browser speeds
  • External links on your site – they do date
  • Check no absolute links - always use relative links for your own site E.g. Instead of http://virtualmv.com/webdesign/gooddesign.html use webdesign/gooddesign.html
  • Be consistent with your file names (and therefore links) and avoid special characters and spaces
• Good v’s evil
  • Check different browsers (IE, Firefox, Safari, Chrome)
  • Don’t expect a page to look the same in every browser
  • Not all Browsers render the CSS the same
  • Don’t expect a perfect solution
  • Design for the one you expect the users to use (and your favourite hopefully), then modify to meet different browsers. Consider responsive design
• Get others to test your site
• Analyse this
  • Use an HTML validation tool (http://www.webpageanalyzer.com)
• Promote the site
  • Use Social Media
  • Use linking from other sites
• Don't steal
  • use graphics you have created yourself, obtained from a royalty-free source or purchased the rights to. Borrowing or doctoring an image from another site still amounts to theft.
• Backup
  • Keep copies of your web site. Backup the database if using a CMS. Check the backup works!!

Under Construction

• No end in site
  • No Web site is ever finished. Its always under construction so don’t point out the obvious!

Burj Khalifa, Dubai

You may like to think of a web site as something like the Burj Khalifa, Dubai. It will always need work on it!!!

Burj Khalifa, Dubai : (approx US$1.5billion) Exterior completed in 2009, and officially opened Jan 2010, it is the tallest man-made structure in the world and the tallest building by a long shot with a height of 828m. The skyscrapers below the Burj Khalifa used to look tall. Note: previously the tallest building on earth, excluding an antenna, was Taiwan's Taipei 101 at 509m.

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/Internet & Web development (2)/Course materials/Overview/Design Tips. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 22, 2024, from http:https://wikieducator.org/VirtualMV/Internet_%26_Web_development_(2)/Course_materials/Overview/Design_Tips    (zotero)