Web Functionality


Published on

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This is an opportunity to recover any aspects that people found difficult last session. Point out that we are still on the scope section of the diagram. Ask students what they think functionality means.
  • At this stage of designing a site, students should see an endless number of possibilities. Functional requirements are about honing down what we want to what we need. The initial iteration of the site should concentrate on getting essential information and services over, anything that seems like a good idea or “might be nice” should be left until later. By documenting what will be built we know when we’re finished.
  • A requirement is a short description of a single feature the site is required to have.
  • This is our first mention of stakeholders. When dealing with any organisation, it’s important to make sure that anyone who has an interest gets a chance to voice their opinion. Ask students who they think a stake holder might be (more on the next slide)
  • Stress the importance, if the production manager is not interested in the site then they will never get what they want out of it. By positively including them and encouraging their ideas, you will build the right product for them.
  • Each one feeds into the next. Explain to students that it is down to their expertise to guide clients to a workable and realistic set of requirements.
  • It is important to ask clients to consider what they want. The website should aim to become the most visual presence of the company.
  • These are discusse din greater detail on the following slides.
  • The bigger the project and the more money at stake, the more likely students will use these extended methods. The reality is that most “one person band” designers are unable to devote the time and resources for these methods.
  • Again, the students are unlikely to use surveys unless they work on larger projects. There are many useful free survey tool sites, one of them is survey monkey http://www.surveymonkey.com/ Card sorting is useful although it is time and resource consuming.
  • Prototypes can be built in Photoshop, Flash or Dreamweaver to give an idea of what will be produced and gives stakeholders a chance to veto anything they don’t like.
  • As a continuity break, ask students to spend 5 minutes discussing when they might need different methods and what they see as the positive and negative aspects of each. We will move onto CSS.
  • This is a moment to discuss the concept of standards. The basic premise is that if all sites conform to the standards set out then, in theory, any browser on any platform will be able to read pages in the same way.
  • It’s important here that students have a rough understanding of how CSS works, take time to explain and ensure that they “get it”. The next few slides go into greater depth but try not to over complicate.
  • Separating style from content naturally helps with accessibility. This is the perfect opportunity to run through CSS zen garden at http://www.csszengarden.com/ The content on these pages never change, it is simply the style sheets.
  • Explain that there will be a CSS session in the course but it will only be able to cover the basics. The one thing we can discuss (next slide) is what it can be used for.
  • Fonts, remind students that if they use a particular font then they have to be relatively sure that the font is available on all systems. Colours will be covered in more detail in other areas of the course. Backgrounds. In terms of pictures and colours. Point out that images are changed regularly on the zen garden site. Positioning – will be covered in detail on the next slide.
  • CSS allows liquid layouts. Explain to students that a fixed layout will not change when the browser window is resized whereas a liquid layout adapts itself to the viewing habits of the user. A liquid layout example : http://www.maxdesign.com.au/presentation/liquid/example01.htm A fixed-width layout example: http://www.maxdesign.com.au/presentation/liquid/example03.htm
  • If students want to be successful in industry, it is up to them to learn CSS.
  • 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>http://www.w3.org/Style/CSS/ </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 http://www.w3.org/Style/CSS/ </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>