DIESEL

							Multimedia Authoring
            COM315
                       Week 8
    Web site design & planning
                        issues
Lecture topics
•   Planning a website
•   Elements of web design
•   Web Medium/ Web site types
•   User types
•   Web conventions
Lecture topics
•   Accessibility & Usability Issues
•   Screen prototyping
•   Screen resolutions
•   Site optimisation
I want a website!
•   That’s Ok!.. I’m a Web Designer
•   It needs to be ecommerce enabled
•   With real time online credit card processing
•   It must support individual personalised user
    accounts
•   With secure login
•   Oh and ….It needs to support a database of
    10000 products
•   Dynamically updated hourly
With the following features..
   Email site to a friend
   Add me to your mailing list
   Discussion forum
   News & events
   Need a quote
   Click here to have someone call you back
   Quick order entry form
   RSS feeders
And
   Bookmark this page
   Add me to your outlook contacts
   Payment methods/Terms and conditions
   Security policy
   Returns policy
   About us
   Can we add a video streaming server?
   Etc………………
By the way…..

I want it last week
 Can you do it for £500!!
Where do I go from here?
•   You need a Plan!
Choose a development model
Planning a website
•   Define goals of site
•   Brainstorming
•   Narrow goals
•   Concepts
•   Implementation
•   Evaluation
Web design facets
Five areas cover major facets of web design

•   Purpose
•   Content
•   Visuals
•   Technology
•   Delivery
Web design facets
• Purpose
The reason for the sites existence


• Content
Deals with the form, structure and organisation
of site content

• Visuals
Deals with screen layout i.e. HTML & Flash
Web design facets
• Technology
Refers to interactive elements. Client side &
server side scripting

• Delivery
Deals with issues related to site reliability,
platforms & download times.
Formal Planning
Site requirements document

•   What kind of content?
•   What look/feel/theme?
•   Programs/applications
•   Visitors type
•   Known restrictions

Requirements leads to site plan document
Formal Planning
Site plan document contents

•   Short goal statement
•   Detailed goal discussion
•   Audience discussion
•   Usage
•   Content requirements
Formal Planning
Site plan document contents

•   Technical requirements
•   Visual requirements
•   Delivery requirements
•   Site structure diagram
•   Budget
•   Timescale
Helps you make decisions
Web medium
Decision time…Considerations
   Design… HTML/Flash/HTML 5/CSS
   Technology… Asp/Perl/Php/Coldfusion
   Database type…Access/MySql
   Off the shelf/custom design/customisation…
   Delivery platform. Web TV, iPhone, Android,
    Playstation 3
Decision time…Considerations
   Hosting… NT/Unix/Linux/Cloud
   Bandwidth usage.. Standard.. Business..
    Enterprise
   Upload/download times
   Backend Ecommerce… Worldpay.. Netbanx..
    Paypal
   User consideration …. Novice to expert
Decision time…Considerations
   Facebook integration
   Twitter integration
   Mobile to Website integration
                          http://mobileroadie.com/
Tools
User connections
Download speeds
Design fast loading web sites
   Always be aware of download times

   Minimize the use of images. Very often simple
    designs are the best.

   Optimize images for the web

   Using tables creatively can lead to interesting
    designs. Tables have fast download times because
    it is just HTML code.
Design fast loading web sites
   Don't use animated gifs unless it is
    necessary.
   Use background images instead of big
    images whenever possible
   Use CSS Styles to maximum effect
   Use Flash sparingly
   Keep checking your load time: NetMechanic!
Design fast loading web sites
   Keep checking your load time and site
    performance
   NetMechanic!
   http://www.netmechanic.com/
   Free analysis of your web site
NetMechanic
NetMechanic Load times
Web site types
Site architecture
Site style versus complexity
Site plan
Screen prototyping
Paper Composite
Decision making aids
• Audience information/ View stats logs / User
  profiling.
• Google analytics. http://www.google.com/analytics
Website features
Website features
Cloud hosting




https://order.1and1.co.uk/xml/order/CloudDynamicServer;jsessionid=CEA0AEC679961A414F397160EF606FAC.TC
pfix152b?ac=OM.UK.UK274K06735T5518a&ovm_kp=Server&ovm_sc=Servers
Other considerations
• Usability definition

Usability is the extent to which a site can be
used by specified group of users to achieve
specified goals with effectiveness, efficiency
and satisfaction in a specified context of use.
Usability
Nielsen defines five elements of usability

•   Learnability
•   Rememberability
•   Efficiency of use
•   Reliability of use
•   User satisfaction
Accessibility
Legal requirement

• To cater for users with restricted vision,
  hearing, movement or other disabilities.
Web conventions
Web conventions
Delivery platforms
Delivery platforms
 Brower wars
Internet Explorer Vs Firefox Vs Opera Vs Chrome Vs Safari
Browser differences
Design considerations

Be wary of low percentages…
this could be your target
audience !!!
Considerations
•   Understanding each of these elements
    essential !
•   Influences all aspects of end product
More……Screen resolutions
• Developing fixed-size Web pages is a
  fundamentally flawed practice.
• Results in Web pages that remain at a
  constant size regardless of the user's
  browser size
• Fails to take advantage of the medium's
  flexibility
1024x768
           The current standard page
           size was 1024x768 pixels.
           Based on average screen
           resolutions worldwide
           Source: onestat.com
           http://www.onestat.com/html/aboutus_pressbox43-screen-resolutions.html
1024x768
   Statistics are used to justify layout sizes for
    Web pages.
   Currently, about 50%+ of the Web population
    can view a page at 1024x768 without
    unnecessary scrolling.
   Resulting in a majority of sites created to
    meet this assumption.
Screen resolutions
Screen resolutions
Chrome
Chrome
Viewable Browsing Area
Screen resolution wrong statistic to determine
optimum display size for Web pages.
• More appropriate metric would be viewable
  browsing area.
• Viewable browsing area isn't the same as
  screen resolution. Many factors lead to a
  discrepancy between the two measurements:
Viewable Browsing Area
Viewable Browsing Area
• Any or all of these factors can reduce viewing
  areas.

• Web page designers account for this by
  developing pages that are about 770x430.

• Still, pages size is fixed and don't fit many
  user-end settings and conditions
Viewable Browsing Area
• Comparison of screen resolutions and
  average viewable browsing areas reveals
  significant differences.
• Generally, as monitor resolutions increase,
  average viewable browsing areas tend to
  level off.
• Next chart demonstrates this relationship.
Viewable Browsing Area
Viewable Browsing Area
• Users with large resolution screens tend to
  have multiple browsers or applications open
  at smaller sizes and jump back and forth
  between them
• On average, users don't surf with viewable
  browsing areas equal to their screen
  resolution.
Viewable browsing areas
• Little published information about average
  viewable browsing areas.

• Surprising since these statistics can be
  gathered easily with a simple JavaScript
  function.
The Challenge of Web Design
• Designing Web sites for all sizes seems like
  an impossible task.
• Idea of accommodating a wide range of
  viewable browsing areas is frightening.
• Web page creators continue to insist on
  absolute positioning of page elements.
Basic guidelines
   Optimize for 1024x768, which is currently the most
    widely used screen size.
   Do not design solely for a specific monitor size
    because screen sizes vary among users. Window size
    variability is even greater, since users don't always
    maximize their browsers.
Search Engine Optimization
    Target search engines

•    Yahoo, Google, Msn
Click throughs on searches
                    •According to research, the top
                    result on any search engine gets
                    42.1% of the click throughs; the
                    second 11.2%.

                    •More than 50% in 2 results

                    •10th result only garners 3% of
                    click throughs.
Search Engine Optimization
   Yahoo/Google/MSN directories accounts for
    the majority of traffic referred to most sites.
    So getting your site listed here and your
    traffic can literally double overnight.
   Portal sites like Excite, Lycos, and AltaVista
    still draw lots of traffic, but together
    Google/Yahoo/Msn outweigh the entire rest
    of the field.
Submit your Site
   There are a lot of automated search engine
    submission services that you can use to
    submit your site to as many search engines
    as possible. Example: Submit It.

   http://www.submit-it.com/
Pay for Rankings
   Msn and other sites have introduced a pay
    for inclusion service.
   One option to consider
Getting Ranked (Organic)
Focus on the following elements of your web
Page
 Keywords

 HTML tags.

 TITLE

 META tags

 KEYWORDS and DESCRIPTION

 Links
Title tag
   TITLE makes a big difference, especially with
    Google. It should be short (less than 40
    Characters seems to work best)

   More importantly it should match the search
    queries people will be using to find your site.
Title tag
Title tag
   Good TITLE tag that will generate traffic from
    people searching for "picasso":

   <TITLE>Pablo Picasso</TITLE>
Title tag
   This is a mediocre one:

   <TITLE>Artstuff: Pablo Picasso</TITLE>
Title tag
   This one will put you out of business:

   <TITLE>Artstuff: Your Number One Online
    Resource for Fine Art Solutions!!!</TITLE>
META NAME="Keywords"
   For a page promoting Picasso, something
    like this would work

   <META NAME="keywords" content="Pablo
    Picasso, Pablo, Picasso, painting, cubist,
    painting, ceramics, collage, Spain, Guernica,
    Paris, 20th century, Girl Before a Mirror">
META NAME="Keywords"
   Repeating the most important keyword twice
    seems to work with some search engines, but
    repeating more than that will cause some of
    them to ignore the whole page.
   What keywords are people searching for? It's
    important to focus on the right ones.
   Main point is that you need to match the top
    keywords people use.
META NAME="Keywords"
META NAME="Keywords"
   Keyword spamming.
   Be careful
META NAME= Description
   This field gets used for the page summary so
    don't cram it with keywords.
   An inappropriate description on a search
    engine's results page could discourage
    people from clicking through to your page,
    even if it scores high
META NAME= Description
Page Text
   Include search terms you want to match near
    the top of the page.
   But cramming in a list of spam-style
    keywords can also backfire
   Can result in being barred from search
    engines
ALT tags
Keyword Density
Links from other sites
   Look at the top results for the terms you most
    want to match.
   Will those sites link to you from their domain?
   If they do, some of their relevance will rub off
    on your pages.
Gateway pages
   Pages optimised for keywords/individual
    engines
   Careful use
   Would-be customer gets to your site only to
    discover it contains confusing pages or poor
    navigation
   Important for trust
Don’t buy snake oil
   Some off the shelf software solutions are less
    than useful
   Search engine developers buy copies of the
    same software, learn how to recognize its
    output, and then demote your site or block it
    altogether when they spot that pattern in your
    pages.
   Some online services are also dubious
Resources
   Search Engine Watch
   http://searchenginewatch.com/

   Try the search engines themselves — they
    offer all kinds of information about search
    engine optimization, rankings, relevancy,
    submission,
Google Adwords
Google Adwords
   In the Google AdWords programme, cost of your
    campaigns depends on how much you are willing to
    pay and how well you know your audience.
   Nominal, one-time activation fee for Google
    AdWords.
   After that, you pay only for clicks on your keyword-
    targeted AdWords ads or for impressions on your
    site-targeted AdWords ads.
   You can control your costs by setting how much you
    are willing to pay per click or per impression and by
    setting a daily budget for spending.
Google Adwords
   E.g. a new advertiser paying in GBP can
    activate his/her AdWords account with just
    £5.00 and can then choose a maximum cost-
    per-click (CPC) from £0.01 - £50.

   Good tools to monitor costs.
   Important to monitor costs versus sales
How it works
Impressions, clicks & conversions




More details here

https://adwords.google.co.uk/support/?hl=en_GB
Click through industry

Masters of Their Domains
 http://www.business2.com/b2/web/articles/0,1
  7863,1132510,00.html
 Candy.com
Candy.com
            Candy.com

            Bought in May 2002 for $108,000.

            A page filled with links to candy-
            related products comes up.

            Click on one of the ads and the
            advertiser pays Google, which in
            turn sends a share to Schwartz and
            the company that runs Candy.com.

            Some days Candy.com makes $300
            in profits

            The site paid for itself in a year and
            a half.
Mobile space
Mobile space
Paid for with advertising
The scary side of Google




http://www.guardian.co.uk/technology/2008/nov/27/privacy-searchengines


                                                                    http://www.guardian.co.uk/technology/blog/2008/nov/28/statestats-correlations
Existing resources




http://www.joomlashack.com/   http://plone.org/



                                                  http://wordpress.org/
Joomla/Jomsocial
Multimedia Authoring
            COM315
                       Week 8
    Web site design & planning
                        issues