Website Design and Development CSCI 311

Transcription

1 Website Design and Development CSCI 311

2 Learning Objectives Understand good practices in designing and developing web sites Learn some of the challenges web design

3 Activity In pairs: describe how you d go about designing a website for a client identify all steps what stuff do you need?

4 Planning Often ignored! Many of us want to just start working (code) Skip the step that helps us get the design right including the back end design The best websites are carefully designed using a planning cycle Planning cycle helps you: gather requirements refine requirements come up with an appropriate look and feel plan development

5 Planning Cycle in Real Life In a perfect world we would plan first, code later In the real world, we often need to do multiple things at once, while: waiting for more details figuring out what technologies are best waiting for access to resources Starting early with programming is ok make sure the content you re working on is unlikely to be impacted by changes Early programming can help you test ideas before you commit to them

6 SMART When evaluating your milestones/tasks/objectives, keep them: Specific Measurable Attainable Realistic Timely (From The Missing Link)

7 Specific Is your objective specific enough to be achievable? good: Deliver our standard proposal with adjusted price quotes to reflect customer s discount rate of 15% bad: Deliver a proposal to the customer

8 Measurable Make sure you know when you re done! good: complete the first 15 pages identified in the site plan bad: complete the first 20% of the site

9 Attainable Make sure it is actually possible to achieve the objective Good: Get the server to a FedEx store by close of business Bad: Drive the server from New York to California within 24 hours

10 Realistic Is your chosen timeline feasible? good: have Team A (staff of 20) complete 10 pages by tomorrow bad: Have Bob the intern complete 10 pages by tomorrow

11 Timely Will the objective be useful if completed by the deadline? good: have draft of sitemap completed by the end of Wednesday to include the proposal bad: have draft of sitemap completed by the end of Friday to include the proposal

12 Activity In small groups: Identify what makes a social networking site good news site good a business (storefront) site good

13 The Fold Once we ve started putting thing on screens, we need to think about where to put it Newspapers: above the fold Name and logo key headlines and images Websites: same idea applies place vital things where they are always seen don t get too stuck on this metaphor! Scrolling has its place

14 Above the Fold: Myth or Fact? Does the Fold metaphor really apply to web design? Argue for or against: Break into groups of 4 two for two against Things to consider: how does mobile design impact this concept? how has scrolling changed in the past 5+ years how do users interact with their devices? input environment

15 The Fold: For or Against? Group Activity

16 Typography The study of font Minimize the number of fonts used Keep things consistent Make sure user has the fonts Google fonts Preferably use sans serif fonts

17 Robots.txt robots are automated scripts used to index content of a website: a robots file is kept at root of site indicates which content you want indexed Simplest robots.txt file: User-agent: * Disallow: / rules apply to all robots, and nothing is allowed below the root folder More complex robots.txt file: User-agent: BadBot Allow: /About/robot-policy.html Disallow: / User-agent: * Disallow: /pictures/reserved Disallow: /index.php

18 Robots.txt Cautions: Robots can ignore your /robots.txt file this will especially be true of malicious robots don t depend upon it Anyone can see your robots.txt file if you re trying to hide your file structure, you may give info away

19 Prototyping Prototyping early can help you convey design options to clients or stakeholders Prototyping techniques that are appropriate for web design: Sketches quick and dirty way to share design ideas with clients good way to bring notes back to the office for implementation Wireframes: create a mockup of one or more designs no colour, images or content planning layout Storyboarding: lets you plan the flow between pages gives you a sense of the user experience

20 Colour Schemes Figuring out what colours to use can be hard! Especially if your client doesn t have a colour scheme already many of us are programmers, not designers The quickest way to scare away your users (and potential clients!) is to make your site ugly There are tools out there to help:

21 Colour Schemes Figuring out what colours to use can be hard! Especially if your client doesn t have a colour scheme already many of us are programmers, not designers The quickest way to scare away your users is to make your site ugly There are tools out there to help:

22 The Development Process for Web Design Kinds of Style: Single Developer one person who understands whole code-base advantages: no arguments disadvantages: fresh eyes catch problems Paired Programming two developers work at one computer take turns driving Team Development developers work on different pieces of the project communication is key

23 Web Development Process Requirements Analysis and Development Plan Site Architecture Content-only Site Framework Visual Communication and Artistic Design Site Production

24 Requirement Analysis and Development Plan Lots of questions to answer: What are the requirements for the finished product? What will it achieve for the client? Target audience? What resources are needed? Who will provide the content and in what formats? What kinds of resources are needed? video, text, photos, logos, colour schemes, etc.

25 Site Architecture Static pages only? Dynamic content generation? Create a blueprint for building the site components contents functionality relationships connections interactions navigation

26 Content-only Framework Content: create a content list prepare content files (can be textual) Site map: draw a relationship diagram of all pages give pages titles identify meaningful groupings identify: forms dynamic/static pages Skeletal site homepage sub-pages, sub-subpages text content Navigation link all pages avoid dead ends

27 Visual Communication and Artistic Design Now is the time to think about: look and feel characteristics of the site Techniques: storyboards sketches For all pages, create a page layout Must reflect the client identity

28 Site Production Create page templates skeleton files used to make finished pages let everyone on team generate pages Prototype pages use templates to complete typical pages add navigation Add client-side programming scripts for browsers or web clients stylesheets JavaScript Add interactivity and responsiveness

29 Site Production Finished pages add text, graphics, images, animation, video Error Checking and Validation use page-checking tools spelling, broken links, loading times Testing different browsers different access points Add server-side programming form processing dynamic page generation database access e-commerce

30 Site Production Deploying release to Web, release URL Documentation description of website, design and function describe file structure, locations of source files (art, code) create a maintenance guide Maintenance check in with clients on regular basis

31 Development Best-Practices File Organization your system will grow, plan for it Comments notes for the developer(s) Any code you have not looked at for six or more months might as well have been written by someone else Eagleson s Law Read Me notes for the user Code standards: spacing, brackets, naming, indentation... You know the drill... Versioning use version control don t release code until it is ready. Use a sandbox

32 What do you do while updating a site?

33 Development Tools Frameworks: we won t be using much in the way of frameworks for this course, but you will use them if you do web dev... you are welcome (encouraged?) to use backend or frontend frameworks for your project (not CMS) makes your life easier examples: ASP.NET (server-side) Ruby on Rails (MVC framework) Symfony (PHP) Django (backend python) Angular.js (JavaScript) Bootstrap (frontend) Foundation (frontend) Play (backend Java and Scala) Wordpress (CMS) Drupal (CMS)

34 Developer Tools Text editors: Jedit (Windows, Mac, Linux) Notepad++ (windows) Bluefish (Linux, FreeBSD, Mac, Windows) TextWrangler/BBEdit (Mac)

35 In summary Developing web sites is about more than learning to code Need to have a plan Need a good design Need a good development style Take advantage of existing technologies: design patterns frameworks developer tools