Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
WebDesign An Introduction Web Design Overview Trainer: Phil Jackson Web fundamentals: What is the World Wide Web? Web fundamentals: Internet vs World Wide Web? Internet: Massive network of networks, a networking infrastructure. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer World Wide Web: A way of accessing information over the medium of the Internet. It is an informationsharing model that is built on top of the Internet. Web fundamentals: Structure of the internet World Wide Web • It’s the graphical user interface of the Internet • The software is called a browser • Navigate using hypertext links (hyperlinks) • Hypertext Transfer Protocol (HTTP) Web fundamentals: How was the internet/web invented? 1957 - the Soviet Union launched the first satellite, Sputnik I, triggering US President Dwight Eisenhower to create the ARPA agency to regain the technological lead in the arms race. A country-wide communications network. 1969 - ARPANET goes live connecting 2 universities. Hypertext used and emails are sent. The internet is an academic technical environment. 1989 - Tim Berners-Lee invents HTML and HTTP and the WorldWideWeb is born. This is the ‘interface’ of the internet. 1990 - the ARPANET was retired and transferred to the NSFNET. The NSFNET was soon connected to the CSNET, which linked Universities around North America, and then to the EUnet, which connected research facilities in Europe 1990+ - Current Web usage takes over Universities sending documents to each other and the modern Web starts to flourish Web fundamentals: What is the World Wide Web? The Inventor of the modern internet Tim Berners Lee One of the First web pages One of the First web pages - Stanford http://www.w3.org/History/19921103hypertext/hypertext/WWW/TheProject.html Old websites http://www.archive.org/ Web fundamentals: Current internet statistics Web fundamentals: Vital Internet Statistics How many people are on-line worldwide? UK internet usage How many websites are there worldwide? Internet usage by language The dot.com bubble bursts How to determine our overall site design environment Web Browser / OS / Resolution – Statistics Mobile usage as overall percentage Resolution Viewer - http://www.pagerank.net/screen-resolution-check/ Web fundamentals: Accessing the internet The browser • Microsoft Internet Explorer 6 / 7 / 8 (PC only) • Firefox (PC/Mac) • Google Chrome (PC/Mac) • Safari (PC/Mac) • Opera (Good on mobiles) • Flock (Good for Web 2.0) First Browser: http://en.wikipedia.org/wiki/WorldWideWeb List of browsers: http://en.wikipedia.org/wiki/List_of_web_browsers Web fundamentals: What’s so special about the web? Web Design Intro: Web design: What is different? Varied and unpredictable audience Note: Colour Media Design Function Web Design Intro: Web design: What is different? Interface between people and people Web Design Intro: Web design: What is different? • A web site is not a fixed entity • Different platforms • Screen sizes • Flexible designs • CSS Web Design Intro: Web design as a discipline So the web medium is different from traditional media • Bandwidth / Download time • Websafe colours & fonts • Text • Images & animation • Browser compatibility • Browser settings • Plugins/Flash animation • Navigation Print to Web: http://www.brown.edu/Research/Primate/ (Primate) Print to Web: Another site still trying to be a print document (Stanford) Web Design Intro: What online does best • A potentially multi-sensory experience • Caters for a wide diversity of learning styles • Interactivity is perceived as fun. Can inspire and motivate • Feedback can be instantaneous • Ability to contribute/publish on the Internet increases motivation • Flexible / adaptive - differentiated levels of information • Hypertext online (as opposed to printed matter) can operate like the brain, jumping from one idea to another, in a non-linear fashion. This stimulates how some users think and is thus an invaluable tool. Web Design: Planning Planning your website Web Design: Planning Current thought: style vs. design Two distinctly different things: Design: Tells you where you are, cues you what to do, and facilitates the doing Style: Is an aspect of design; colour choices, font choices: aesthetics Web Design: Planning Setting Goals Web Design: Planning Setting goals Whether you are established Whether you are a new site - Re-evaluate - Restructure - Redesign Web Design: Planning You MUST have a clear idea of GOALS! Web Design: Planning Setting a goal for your site • Why? Many/most websites fail because their brief is too broad • Write down a short, clear goal - and only ONE goal • Whenever you have to make a decision, satisfy the goal only Web Design: Planning What are you selling? What is your goal / goals? • Download a brochure • Sign up for a newsletter • Subscribe to a mailing list • Request a product sample • Book a sales consultation • Purchase a product • Book a service Web Design: Planning The JOURNEY to the GOAL Web Design: Planning Define a customer ‘JOURNEY’ The USER: Entrance >> Information >> Goal Completion Web Design: Planning Define a customer ‘JOURNEY’ The USER: Landing Page >> Information >> Money Page Web Design: Planning Define a customer ‘JOURNEY’ • Site may have several journeys • Look for ‘journey leakage” – people drop out • (Google) Analytics will show you where (bounce rate) Web Design: Planning The Brief Web Design: Planning Write a brief: Why? • Many clients & producers are incapable of giving a proper brief. • They have a rough idea of what they want, maybe they've seen something on another site and want something similar. • Maybe they have no idea what they want and are looking for suggestions. • When you write a brief and you all know where you are heading, and it's down on paper and agreed. Web Design: Planning Write a brief • It is what your designers need so everyone has the same vision • It ensures the satisfaction of the most important member of the group: – THE USER Web Design: Planning The audience: The User Web Design: Planning The audience - understanding your visitors • A public website is available for everyone. But “everyone” is not necessarily the best definition of the audience for your site. • Think specifically about the people you want to attract to the site - their: age, job, financial status, geographical location, computer/Web literacy • Categorising audiences The categories will lead you to think about what content to include and how to organise the content Web Design: Planning Check out the Competition Web Design: Planning Check out the competition! Why? • There is no such thing as an original idea • Think of this as free market research for your own site How? • Type in a keyword and look at the top 5 sites • Look at their site like an awkward customer: things that work and things that don’t work • Look at their meta tags for keywords and code for other clues… • Try carrying out a task on their site Web Design: Planning Who are your competitors? • Check on local and worldwide Google • Concentrate on business ideas in competitor’s site • How are these ideas presented? Planning What are they doing? How are they doing it? • Perform SWOT analysis on top 5-10 competitors • Look at competitor site objectively • Do you like the look of the site? • Is it easy to use? • Look at their site like an awkward customer: things that work and things that don’t work • Try carrying out a task on their site Web Design: Planning Case Study – Bishops Printers http://www.bishops.co.uk/ 1.Page too confused 2.No clear call to action 3.Covers too much 4.Ineffective design 5.Ineffective SEO Web Design: Planning Case Study – LightCMS http://www.speaklight.com/ 1.Clear page layout 2.Clear call to action 3.Covers basics 4.Attractive design 5.Effective SEO Web Design: Planning Check out the competition! http://www.animaland.org/Kids site http://www.totalkiss.com/ Kiss FMYoung audience site www.classicfm.com Classic FM – More mature audience http://service.real.com/realplayer/ Customer Support http://www.jaguar.co.uk/uk/en/home.htm Sales centred http://www.illustrationworks.com/ Designers site http://fingertips.newdamage.com/ Strange design site http://www.delmore.com/ Funeral Chapel Web Design: Page Types Types of Web Page Web Design: Page Types THE most important page: Your Homepage Web Design: Page Types Homepage / Landing Page • 50% of people never go past your homepage • Be true to your target audience and be upfront and direct • 10 second rule - your audience has a 10 second attention span! Homepage Content • Describe what your site is about - even if only a couple of lines • No splash page unless absolutely necessary • Work out your content from who your audience is likely to be • Use a visual guide to inside content • Use your latest or greatest content on the homepage as a teaser Make sure to ‘Chunk’ information - As the BBC site Web Design: Page Types What is a Landing Page? • Screen Design: Elements Branding Navigation Orientation Content Emotion Interaction Web Design: Page Types 4 types of web page www.ineasysteps.com • Homepage - Most important page. One simple message • Transitional page - Pages that give people a choice of which page to look at next - Should be quick to load as people are interested in the next page • Content page - There to be read - often longer than other pages - These are most likely to be printed - test them first Or a combination • Action page - Require your visitor to take some action; filling in a form, giving Credit card details - Split forms into sections if necessary Web Design: Page Types Anatomy of a web page • Some statistics about an ‘average’ web page (2011). • Page size – 320k (2003 – 93k) • Page Download (ie to appear in browser) – 2.3 seconds • Words Per page: 474 • Links per age: 41 (30 onsite – 10 offsite) • Page Height: 1440 pixels • Graphics cause most page download delays •http://www.websiteoptimization.com/speed/tweak/average-web-page/ Web Design: Page Types Anatomy of a web page • Logo (top left) • Navigation - (Primary and Secondary) • Header - (header - banner blindness) • Footer - copyright info • Body Copy (content is King!) • Headings (h1 to h6 and SEO) • Images • Hyperlinks • Forms • Search box (top right) • Pop-up windows • Advertising Web Design: Navigation Navigation Web Design: Navigation Navigation - Styles Sequence http://www.actden.com/pp/ Hierarchy http://www.apple.com/ Web http://www.cnet.com/ Web Design: Navigation Navigation - 3 Click Rule Your visitor should be able to get to any part of your site in no more than 3 clicks • Ask yourself what the major tasks are on your site • Point them in the right direction: not everyone comes to your site for the same reason or for the reason you might want them there Find the price of bathroom lights in 3 clicks: http://www.habitat.net http://www.ikea.co.uk Web Design: Navigation Navigation types Sequence http://www.actden.com/pp/ Hierarchy http://www.apple.com/ Web http://www.cnet.com/ Web Design: Navigation Deciding on Navigation • User testing using Card Sorting • User testing using marketing companies • User testing using colleagues and/or friends This will tell you how to create your navigation from a USER’S point of view Web Design: Navigation Key to good Navigation • Use consistent words, positioning, actions and icons • Don’t abbreviate / Do use short sentences in link anchor text • Drop down menus - use five or more items for credibility • Consider jump menu - user will read long list, alphabetically • Simple and easy to remember interface design • Consistent and clear positioning of icons • Provide feedback to inform the user of what is happening • Exit routes and error messages clearly marked and consistent with clear explanations • Choices must be in distinct, appropriate language Web Design: Navigation How a user really navigates a site Web Design: Writing for the Web How the eye reads a page: We don’t read pages – we scan them • Look for words or phrases that catch our eye • Exception: news stories, reports, product descriptions (if long will print out) Why do we scan? • We’re usually in a hurry • We know we don’t need to read everything • What we see on the webpage depends on what we have in mind (Steve Krug - Don’t Make Me Think) http://www.sensible.com/chapter.html - Steve Krug http://www.poynterextra.org/eyetrack2004/viewing.htm - Eye Tracking Web Design: Navigation Designing for scent • Your content must give off scent • Scent is about pulling the user to the content You need to know: • Why the users are coming to the site • What are their trigger words? • Where are they likely to look? • Avoid site search engines Test users If you need something like a search engine, consider a list/ menu instead Web Design: Navigation How to design for scent • Clear, usable design elements contribute to users confidence • Before they click: link quality, new graphics, and information organisation • After they click: seeing the desired information, or a more stronger scent GOOD DESIGN = CONFIDENCE OF USERS Web Design: Navigation How to design for scent • Clear, usable design elements contribute to users confidence • Before they click: link quality, new graphics, and information organisation • After they click: seeing the desired information, or a more stronger scent GOOD DESIGN = CONFIDENCE OF USERS Web Design: Navigation Things that prevent scent 1. Search engines – • Up to 60% of all searches fail. • Can’t know the trigger/key words people use. If they get results, it is usually more than one and the whole process becomes overwhelming 2. Navigation – links need to look like links. Beware of “banner blindness”. This is where people ignore the top of the page for navigation as they are used to this area have useless banner advertising. 3. Cute / weak / ambiguous links Web Design: Writing for the Web Writing for the web: How a user ‘reads’ a web page Web Design: Writing for the Web Writing for the web - key tips: • Highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and colour are others) • Plentiful use of sub-headings for paragraphs • Meaningful sub-headings (not "clever" ones) • Bulleted lists • One idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) • The inverted pyramid writing style, starting with the conclusion or summary, then giving more facts. • Halve the word count (or less) than conventional writing. Web Design: SEO SEO – Search Engine Optimisation Making it easier for search engines to ‘see’ your site 1.Onsite SEO – optimise site elements 2. Offsite SEO – optimise inbound links •Google places more emphasis on offsite optimisation than the other search engines making offsite SEO very important Web Design: SEO Onsite SEO 1. Optimise your page title 2. Optimize your text content – 5-7% keywords, first words of main para 3. Optimize your headlines (H1, H2) 4. Emphasize keywords 5. Optimize your images (for text – filename, alt tags) Web Design: SEO Offsite SEO Off-Site SEO refers to search engine optimization techniques that are not performed on your own website or page, and are therefore termed "off-site." Backlinks: • Getting quality links relevant to your topic linking to your site • Think of each backlink as a vote for your page • This is what Google's PageRank measures, albeit in a complex way, taking many factors into consideration Web Design: SEO Offsite SEO There are many ways to get backlinks; unfortunately, few of them are quick and easy. Here are some options: • • • • • • • Creating content that makes people link to it Doing link exchanges (be wary of this) Getting directory listings Writing and syndicating articles Making forum postings Posting comments to theme related blogs Buying links (be wary of this) Web Design: SEO Offsite SEO • One link from a high quality site is worth tens from a poor site. And linking to bad sites can negatively effect your own website's rankings. • One-way links into your website from another are of greater value than reciprocal links from carrying out link exchanges. • Links to your pages should use the relevant keywords in the anchor text. Web Design: SEO SEO – Optimising META tags Title tag • One of the most important parts in today’s SEO. • Put most important keywords in the title tag. • Put your company name in the end of the tag • Use a maximum of 10 words and 80 characters. Meta Description • The description of a webpage shown in the search engine result. • Don’t use more than 130 characters in the Meta Description Meta Keywords • 20-25 keywords separated by a comma. • The Meta Keywords are not that important for the search engines anymore Web Design: SEO SEO – How to: • Look at your competition – choose 5 top sites by keyword • Look at website code: What keywords do they use? • Who do they have links from? In Google - link:sitename.com • Learn from Google: About Google/Webmaster Info • Use Google Analytics Web Design: SEO SEO – Good Sites: How your site looks to Google: http://www.seo-browser.com/ Good SEO Tools - http://www.addme.com/keyword-density.htm Horse’s Mouth – Google’s advice on SEO best practice Page Rank Site - http://www.prchecker.info/check_page_rank.php Web Design: Hosting Website Hosting – What you need: 1. Domain name – the website name 2. Hosting – where you put your website whilst it’s online Web Design: Hosting Website Hosting 1. Domain name – Buy for 2 years – cost: around £8 2. Hosting – Buy for 1 year – cost: around £25+ All domain name and hosting must be renewed every 1 or 2 years Web Design: Hosting Domain names - Buying 1. Go to 123-reg.co.uk (for example) 2. Type in the name you want 3. See if this is still available (.com good names gone) 4. Buy it (can be addictive, be warned…) Web Design: Hosting Setting up Domain & Hosting – Procedure 1. Buy your Domain name 2. Buy your Hosting 3. If domain name and hosting bought at same place you are now set 4. If domain name bought at different place to hosting you have to point your domain name at the hosting – change DNS settings (Nameservers) via your control panel of your domain name company. Get the hosting nameserver addresses from your HOSTING company 5. FTP details will have been sent to you by hosting company 6. Enter these FTP details into Dreamweaver or other FTP software 7. Connect to hosting company via Dreamweaver 8. Upload your site to relevant folder – See hosting docs for info Web Design: Hosting Getting Online – FTP FTP – File Transfer Protocol FTP Details: 1. FTP Host Address 2. Username 3. Password Web Design: Hosting Getting Online – FTP FTP – Software Dreamweaver – FTP built in Rapidweaver – FTP built in Filezilla – FREE - PC/Mac (GOOD) Cyberduck – FREE - Mac Coffee Cup – FREE - PC Web Design: Hosting Website Domain names What to look for: 1. Short names 1. Names with keywords 1. Names related to Your Core Business or Business Name 1. Use country specific extension Web Design: Hosting Website Domain names What to look for: .com .co.uk .org / .org.uk .ac.uk .net – Commerce worldwide – Commerce UK, general UK address – Charities UK – Education UK – IT companies worldwide • Buy the domain which best reflects your core buyer/viewer • Are they in the UK or worldwide • Can buy all and point to same address. Yearly renewal fees Web Design: Hosting Website Domain names How to find: 1. Go to any domain name seller site (eg www.123-reg.co.uk) 1. Search for your name 2. Either buy there or elsewhere Web Design: Hosting Website Domain names • Your domain name needs to be pointing at your hosting 1. Buy domain name and hosting at the same company 2. Point your name (bought at one company) at another company where you bought your hosting – Changing nameserver address 3. Transfer your domain name to the hosting company’s website – Changing IPS Tags Web Design: Hosting Website Hosting What to look for: 1. Linux (usually go for Linux) 2. Windows • • • • • • Not much difference Linux more widely used Linux open source Linux very stable Windows if running exclusively Microsoft server applications Windows hosting sometimes more expensive Web Design: Hosting Website Hosting What to look for: 1. Disk Space Disk space is the amount of data you can store on your server 2. Bandwidth Transfer Allowance Transfer allowance (bandwidth) is how much data that can be downloaded from your website. 3. Age / Reliability of host company Use Web Designer magazine and Google search for reviews Web Design: Hosting Website Hosting What to look for: 4. Help/ Technical Support - Are they in the UK? / Phone / Email? You WILL need support – make sure it’s easy to access and understand 5. Bandwidth Transfer Allowance Transfer allowance (bandwidth) is how much data that can be downloaded from your website. 6. PHP And MySQL Support Scripting languages especially designed for website development. Web Design: Hosting Website Hosting What to look for: 7. Reseller Account Most hosting only allows ONE domain per hosting. Consider a Reseller account if you are going to host many websites 8. Price The web hosting business is getting very cut throat lately, which is great for the consumer. Can get free hosting with links Web Design: Hosting Website Hosting What to consider: • Can buy names anywhere and redirect to hosting • Can usually only put one website on a regular hosting • Need a ‘Reseller’ hosting package to host more than one site Web Design: Hosting Website Hosting Some good sites Domain Names: http://www.123-reg.co.uk/ General Hosting: http://www.streamline.net/ Reseller (and personal): http://www.haisoft.co.uk/ Cheap and Free hosting (with a catch) http://www.ukcheaphosts.com Web Design: Getting Online How to get your website online: FTP – File Transfer Protocol Using either free or paid for FTP software, or FTP through Dreamweaver Free - PC Coffee Cup - http://www.coffeecup.com/free-ftp/ Filezilla - http://filezilla-project.org/ Free - Mac Cyberduck - http://cyberduck.ch/ Filezilla - http://filezilla-project.org/download.php