Website Design and Development CSCI 311
Learning Objectives Understand good practices in designing and developing web sites Learn some of the challenges web design
Activity In pairs: describe how you d go about designing a website for a client identify all steps what stuff do you need?
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
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
SMART When evaluating your milestones/tasks/objectives, keep them: Specific Measurable Attainable Realistic Timely (From The Missing Link)
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
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
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
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
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
Activity In small groups: Identify what makes a social networking site good news site good a business (storefront) site good
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
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
The Fold: For or Against? Group Activity
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
Robots.txt robots are automated scripts used to index content of a website: http://www.robotstxt.org/robotstxt.html 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
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
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
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: http://paletton.com/ http://www.colorsontheweb.com/colortools/color-wizard
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: http://paletton.com/ http://www.colorsontheweb.com/colortools/color-wizard
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
Web Development Process Requirements Analysis and Development Plan Site Architecture Content-only Site Framework Visual Communication and Artistic Design Site Production
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.
Site Architecture Static pages only? Dynamic content generation? Create a blueprint for building the site components contents functionality relationships connections interactions navigation
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
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
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
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
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
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
What do you do while updating a site?
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)
Developer Tools Text editors: Jedit (Windows, Mac, Linux) Notepad++ (windows) Bluefish (Linux, FreeBSD, Mac, Windows) TextWrangler/BBEdit (Mac)
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