best practice website design content functionality
DESCRIPTION
This presentations is designed to help small business who are about to build a new or modify an existing website. Using some examples from websites built using the Anicca Solutions Reflex website and content management system. This is a seminar presented by Ann Stanley on behalf of Business Link at the HM Customs and Revenue business roadshow in Northampton.TRANSCRIPT
![Page 1: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/1.jpg)
eBusiness Programme workshop programme
BEST PRACTICEWEBSITES
Presented by: Ann Stanley
MD of Anicca Solutions
![Page 2: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/2.jpg)
Agenda• How important is your website?
• Design & Layout
• Good and bad examples
• How design effects usability?
• Tools to improve your design
• Content
• Functionality
• Is your site accessibly & search engine friendly?
• Is your site performing?
![Page 3: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/3.jpg)
How important is your website to your businessScore Customer types Purpose of website Offline
equivalent
0-3 Majority of regulars, repeat & recommendations (R-Factor) Passing trade
Business card:•Contact details & Map
4-5 Large R-factorSome new customers (eg from advertising)<50% enquiries or bookings have seen or used the website
Brochure site:•Credibility•Check out offer•Contact details & Map
6-7 Small R-Factor, so rely on new businessNeed to advertise regularly>50% enquiries & bookings have seen or come from the website
Shop-window:•Lead generation & enquiries•Most customers use & enquire through the site•Credibility & information
8-10 Mainly new customersCurrent customers also use website to book>80% of enquiries and bookings come from website
Transactional:•Lead generation & online marketing•Enquiries, registrations & booking engine•Email marketing•Integration with back-office
![Page 4: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/4.jpg)
“How to look good naked” beauty parade –most people have the wrong image of themselves (and their websites!)
![Page 5: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/5.jpg)
Score your site as compared to othersSCALE1-4 = you consider the site poorly designed or unprofessional5 = you would not bother to browse the site6 = you would browse the site8 = you would consider buying or using the service from this site
5 8
![Page 6: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/6.jpg)
Very important
Best
Importance to your business
Site Performance
Need to develop a new site
No more effort required
Quality matches importance –not worth investing
1 5 101
5
10
Not important
Poor
Importance of your website vs how you perceive the site (performance)
Plot your importance score vs your quality score
![Page 7: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/7.jpg)
The 3 “conflicting approaches” used in web design
Design – first impressions
counts
Content – what the site says to
the user and search engines
Functionality –what the site does for the
user and your business
These approaches are often used by different types of web designers or developers and can conflict with each other
![Page 9: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/9.jpg)
User-Centred Design
“Unless a website meets the needs of the intended users it will not meet the needs of the organization providing the website.”
Jakob Nielsen
• Who is your audience?
• What are their demographics?
• How will they use the site?
• What technology do they have?
![Page 10: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/10.jpg)
Target audience - site aimed at parents and kids
![Page 11: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/11.jpg)
Target audience - site aimed at techies
![Page 12: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/12.jpg)
Branding – lifestyle & aspirations
![Page 13: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/13.jpg)
Branding – lifestyle & aspirations
![Page 14: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/14.jpg)
Branding – design & imagery
![Page 15: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/15.jpg)
Effective well laid out web design
![Page 19: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/19.jpg)
Building Trust: Good Example
![Page 20: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/20.jpg)
Building Trust: Bad Example
![Page 21: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/21.jpg)
Building Trust: Bad Example
![Page 22: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/22.jpg)
How design effects usability
![Page 23: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/23.jpg)
Usability – Common Problems
• Confusing navigation/links
• Breaking the Back button
• Pop-up windows
• Page elements that look like adverts
• Ignoring common conventions
![Page 28: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/28.jpg)
Navigation: Breadcrumb Trails
![Page 30: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/30.jpg)
Tools to improve your design
![Page 31: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/31.jpg)
Layout Planning: Wireframes
![Page 32: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/32.jpg)
Cascading Style Sheets (CSS)
• Enables different style elements to be controlled across the site:
• Typography
• Backgrounds
• Borders/margins
• Structural elements, e.g. navigation
• Benefits:• More control over layout
• Quicker loading pages
• Quicker development & updates
• Easier to support multiple platforms eg pda
• Allows use of different font sizes and colours for accessibility
• Better for search engines (page layout data stored in CSS not diluting page text)
www.csszengarden.com
![Page 33: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/33.jpg)
Cascading Style Sheets (CSS)
![Page 34: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/34.jpg)
Cascading Style Sheets (CSS)
![Page 35: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/35.jpg)
Website Management Systems –that allow you to modify elements of the layout, design, menus & footer
![Page 36: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/36.jpg)
Website Management Systems –that allow you to modify elements of the layout, design, menus & footer
![Page 37: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/37.jpg)
Website Management Systems –that allow you to modify elements of the layout, design, menus & footer
![Page 38: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/38.jpg)
Try it for yourself – www.anicca-web.com
![Page 39: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/39.jpg)
Try it for yourself – www.anicca-web.com
![Page 40: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/40.jpg)
Try it for yourself – www.anicca-web.com
![Page 42: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/42.jpg)
Images: no text = no keyphrases
![Page 43: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/43.jpg)
Images: no text = no keyphrases
![Page 44: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/44.jpg)
Multimedia - Flash
www.mowbot.co.uk
![Page 47: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/47.jpg)
Nottingham City Council – Text Size
![Page 48: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/48.jpg)
Nottingham City Council – Text Size
![Page 49: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/49.jpg)
Content Management System – DIY changes
![Page 51: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/51.jpg)
See changes on the live site
![Page 52: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/52.jpg)
Multi-lingual content management system
![Page 53: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/53.jpg)
Functionality – what the site can do for you and your customers
![Page 54: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/54.jpg)
Search on every page
“Calls for action” –registration & latest deals
Search results from property database
Features of a property website
Log-in
![Page 56: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/56.jpg)
Using your site as a sales tool – searching the customer database
![Page 57: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/57.jpg)
Clicking into a customer profile
Customer databases and profiling –
should be modified to meet your specific
needs
![Page 58: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/58.jpg)
Ability to create your own customer registration forms (with the corresponding database)
![Page 59: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/59.jpg)
Ability to create your own customer registration forms (with the corresponding database)
![Page 60: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/60.jpg)
Is your site accessible and search engine friendly?
![Page 61: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/61.jpg)
Accessibility
• Risk of excluding large audience:14% of the UK population registered disabled
• Accessible sites work better in less popular browsers/platforms/sizes
• Accessible sites are more flexible
• Accessible sites are more search engine friendly
• It’s the law! Disability Discrimination Act 1999 (2002)
![Page 63: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/63.jpg)
How design, functionality & content influence visibility in the search engines
• Design • Images can’t be indexed
• Certain technologies such as Flash, Frames and JavaScript can’t be indexed
• Design can limit the space for optimised text, or too much text can spoil the design
• Functionality• Certain database functionality such as dynamic urls, ecommerce sites and
some content management systems can’t be indexed
• Content• Amount, structure and keyphrases within the content (on-page factors) all have
significant influence on positions achieved for keyphrases used by searcher
• Content consists of the visible content (ie elements seen by the user) and the content in the code and tags (meta-data) both are important for search engine optimisation
• Search engine optimisation is the process used to build or modify a site to improve its rankings in search engines for the keyphrases used by customers
![Page 64: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/64.jpg)
Is my content listed in Google? – Yes!
This technique also allows you to see how your web developer has set-up your urls, titles and descriptions for your site (key for being found in the search engines)
![Page 65: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/65.jpg)
Is my content listed in Google? – No!
These sites have been constructed in Frames and Flash, technologies which can't be indexed (or spidered) by the search engines
![Page 67: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/67.jpg)
Do you need to invest in your website?
Offline advertising
Online advertising
Website
>50% exit due to poor design or usability
Less than 50% browse
<1% call or email
No online Enquiry/
Booking/Shop
No traffic due to poor search
engine positions
![Page 68: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/68.jpg)
Get free site metrics from Google
![Page 69: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/69.jpg)
Pulling it all together!
Getting traffic to your website
Quality & performance of your website
![Page 70: Best Practice Website Design Content Functionality](https://reader034.vdocuments.site/reader034/viewer/2022042607/55535300b4c90503618b552c/html5/thumbnails/70.jpg)
Improve Your Search Engine Rankings
Presentation: email [email protected]
Workshops & events: www.ebusinessclub.biz
Further support:
eBusiness Programme:Workshop programme advice: Joanne Mobbs:
Business Link Business Support Adviser appointment:
0845 058 6644