Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Functionality


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Web Functionality

  1. 1. IMD09117 and IMD09118 Web Design and Development Functionality. Style Sheets.
  2. 2. The 5 Planes Model Last session we looked at Content. By now we know why we’re bulding our site(site objectives) who we’re building it for (user needs/ accessibility) what we’re going to say (content) This session we will be looking at Functionality (what we’re going to build).
  3. 3. What is Functionality <ul><li>Functionality is also known as gathering requirements. </li></ul><ul><li>We need to know what we are building. </li></ul><ul><li>We also need to know what we’re NOT building. </li></ul>
  4. 4. Requirements <ul><li>Some requirements are site wide. </li></ul><ul><ul><li>Branding </li></ul></ul><ul><ul><li>Supported Browsers </li></ul></ul><ul><li>Some requirements are specific to particular areas. </li></ul>
  5. 5. Where do we gather requirements. <ul><li>Users – ask them what they might want </li></ul><ul><li>Stakeholders – Anyone from the client or organisation who has a vested interest in the Website and can affect the outcome. </li></ul>
  6. 6. Stakeholders <ul><li>When you are designing for outside companies you need the enthusiasm and support of everyone involved. </li></ul><ul><li>Find out who has a vested interest in the site and make time to talk with them. </li></ul>
  7. 7. Types of Requirement <ul><li>Features clients say they want. </li></ul><ul><li>Features clients actually want. </li></ul><ul><li>Features clients don’t know they want. </li></ul>
  8. 8. Client Education <ul><li>Ask clients to do their homework ask them to provide certain documents for working with: </li></ul><ul><ul><li>A printout of 3 sites they would like to be similar to. </li></ul></ul><ul><ul><li>A list of features they would like to incorporate from direct competitors sites. </li></ul></ul><ul><ul><li>A rough “shopping list” of what they want. </li></ul></ul>
  9. 9. Methods of requirement gathering <ul><li>Interviews </li></ul><ul><li>Focus Groups </li></ul><ul><li>Surveys </li></ul><ul><li>Card Sorting </li></ul><ul><li>Prototyping </li></ul>
  10. 10. Methods <ul><li>Interviews: A formal, recorded interview with stakeholders and users is invaluable. </li></ul><ul><li>Focus Group: 4-12 target users gather and discuss what they would expect from the site. </li></ul>
  11. 11. Methods <ul><li>Surveys </li></ul><ul><ul><ul><li>Paper </li></ul></ul></ul><ul><ul><ul><li>Web based </li></ul></ul></ul><ul><ul><ul><li>email </li></ul></ul></ul><ul><li>Card Sorting </li></ul><ul><ul><ul><li>Feeds into architecture design. List all requirements onto a cards and ask users to lay them out on a table in logical order. </li></ul></ul></ul>
  12. 12. Prototyping <ul><li>Paper based or electronic, producing and agreeing on prototypes can help. </li></ul><ul><li>Prototypes give a quick visual guide to clients, helping them to understand what they will be getting. </li></ul>
  13. 13. Methods of requirement gathering <ul><li>Interviews </li></ul><ul><li>Focus Groups </li></ul><ul><li>Surveys </li></ul><ul><li>Card Sorting </li></ul><ul><li>Prototyping </li></ul>
  14. 14. Cascading Style Sheets <ul><li>CSS affords a designer a large degree of flexibility whilst ensuring the site conforms to Web standards as set out by the World Wide Web Consortium. </li></ul><ul><li> </li></ul>
  15. 15. What is CSS? <ul><li>CSS is a distinct set of files that describe the style of particular elements within a site. </li></ul><ul><li>The CSS file sits outside the site and browsers incorporate the information within to dictate the style of each element. </li></ul>
  16. 16. Style and content <ul><li>Specifically, what CSS does is separate style and content. This ensures that these two aspects can be worked on separately. </li></ul><ul><li>CSS also means that we can make changes to an aspect of our site, for example a font or a colour and roll it site wide by simply changing the CSS file. </li></ul>
  17. 17. How do you use CSS? <ul><li>“ Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” </li></ul><ul><li>Taken from </li></ul><ul><li>It may be simple but it is not intuitive. It is beyond the remit of this course to teach expertise in CSS but it is essential that you understand it’s power and what it can be used for. </li></ul><ul><li>The only way to become an expert in its use is to practice, there are many free tutorials out there. </li></ul>
  18. 18. What can CSS determine? <ul><li>Fonts </li></ul><ul><li>Colours </li></ul><ul><li>Backgrounds </li></ul><ul><li>Positioning </li></ul>
  19. 19. Positioning <ul><li>Pre CSS, tables were the most common method of placing items in specific positions on a page. </li></ul><ul><li>Although tables are still widely used, they are becoming less fashionable. </li></ul><ul><li>Liquid vs fixed layouts. </li></ul>
  20. 20. CSS <ul><li>CSS is being developed constantly and is currently seen as the future. </li></ul><ul><li>To create standards compliant efficient Web sites, CSS is the key. </li></ul>
  21. 21. CSS <ul><li>Of course in 5 years, it could be something else … </li></ul>