VirtualMV/Internet & Web development (2)/Course materials/Overview/Design Tips
|Internet & Web development (2)|
|Overview||Web Browsers | Web Development Ecosystem | Web Page Layout | Design Components ( Design Tips | Accessibility ) ||
By the end of this overview you will be able to:
Web Design Tips
By the end of this page you will be able to:
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.
- Keep copies of your web site. Backup the database if using a CMS. Check the backup works!!
- No end in site
- No Web site is ever finished. Its always under construction so don’t point out the obvious!
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.
- Buchanan, M. (2007) 35 great web design tips, Netguide. MSN NZ. Retrieved December 10, 2007 from http://www.netguide.co.nz/Home/TheGuide/HowTo/HowtoArticle/tabid/195/ArticleID/1546/Default.aspx