From WikiEducator
< VirtualMV‎ | Multimedia‎ | Design‎ | Web
Jump to: navigation, search


VmvIcon Objective.png

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)[1].

  • 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)
    • 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 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
  • 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.

Cite error: <ref> tags exist, but no <references/> tag was found