hello world! graham ruddick. building a webpage template content (cms) images
TRANSCRIPT
![Page 1: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/1.jpg)
Hello World!
Graham Ruddick
![Page 2: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/2.jpg)
Building a webpageTemplate
Content(CMS)
Images
![Page 3: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/3.jpg)
What we’ll cover What’s a web site Understanding audiences KPIs and ‘what’s good’ Information architecture Principles of design Producing wireframes Writing for the web & simple SEO Approaches to project management Managing an agency relationship Responsibilities around sign off User acceptance testing Launch
![Page 4: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/4.jpg)
Structure and tech of a website
How the web works
Building a website: components
Graphics & Colours
![Page 5: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/5.jpg)
How websites work
3. The request is sent to a Domain Name Server
4. The DNS returns a web address: www.myshow.com = 123.234.500.345
1. The user ‘goes online’ and establishes a link to their own web server
2. The user types in a URL:www.myshow.com
5. The page is requested from the host serverAnd a session is started
6. The host server asks its backend systems to put together the right page
7. The correct page is sent to the user
![Page 6: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/6.jpg)
Building a webpage
Head
Body
![Page 7: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/7.jpg)
Web graphics
Web images are made of pixels
![Page 8: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/8.jpg)
Web graphics – how graphics are encoded
1. Start with the grip of pixels – here 10 x 102. Describe each pixel in order3. Creates imagesBlack, black, black, black, black, black, black, black, black, black
Black, black, black, white, white
![Page 9: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/9.jpg)
Web graphics – how colours are described Online colours are described in terms or Red,
Green and Blue (RGB) Using 0 – 255 scale
Converted to base 16 (hexidecimal) for code purposes
255, 0, 0
0, 255, 0
0, 0, 255
255, 255, 0
0, 255, 255
255, 0, 255
255, 255, 255
125, 125, 125
0, 0, 0
![Page 10: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/10.jpg)
Web graphics file types Gif – good for block colour/cartoon etc Jpeg (.jpg) - good for photos Png – increasingly used (although some older
browser don’t render png)
![Page 11: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/11.jpg)
Creating a site
Audience groups Needs and priority of messages
Business needs What you need the audience to do What are the required outcomes Prioritise
Information architecture How do you structure information and functionality to best satisfy the
priorities set Design
Real estate Menu and page structure Iconography
![Page 12: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/12.jpg)
Understanding audiences
Audience needs and how you help them
Value proposition
Personas
Use cases/User journeys
![Page 13: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/13.jpg)
Understanding audiences Audience needs and how you can help them
Groups/sectors/regions/types etc Defining needs sets Understanding and focusing on those needs you
can help satisfy
![Page 14: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/14.jpg)
Value propositions Benefit based (not feature statements) One per group you plan to serve Short, pithy and understood by whole
organisation
![Page 15: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/15.jpg)
Value proposition development Question 1 – What are the key customer groups?
Identify those who buy and those who impact the decision. Question 2 – What are the needs of those groups?
What are the objectives that are going to be in mind when they are choosing a specific action/making a decision
Recognise those that we can and cannot necessarily fulfil Recognise that, where we have different groups with different prioritised
needs, this translates to a need for us to deliver different product offers. Question 3 – How is this prioritised for the business?
Customer groups are generally prioritised by economic impact, the needs analysis by what is important to the customer
Question 4 - For each one of the key customer groups’ needs: how well do we fulfil them? How well do we fulfil them at the moment How well will we fulfil them in the future How well do we fulfil them in contrast to our competitors
Question 5 – What is our value proposition?
![Page 16: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/16.jpg)
Developing personas
Build personal attributes Demographic Psychographic ‘webographic’
Create a ‘primary persona’
“Your primary persona needs to be a common user type who is important…but needy”
![Page 17: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/17.jpg)
![Page 18: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/18.jpg)
Developing user cases (user journeys) It’s about story telling It captures each step of that particular users
journey It makes as many descriptive calls as possible It drives the structure of the project It provides your test analysis scripts
![Page 19: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/19.jpg)
User journeys
![Page 20: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/20.jpg)
User journeys/case studies
![Page 21: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/21.jpg)
Setting KPIs Traditional onsite
The traditional onsite metrics remain important for a community site Page views Visits Unique visitors Registrations
Engagement onsite Articles and posted content from community Volunteered feeds Pages per visit Recency % Loyalty % Comments and UGC Member invitations (by members)
Buzz metrics/share of voice/sentiment Mentions of your site in social media (plus sentiment measurement) Identification of key advocates (number, influence etc) Reach of your site through social channels (cf Alexa)
![Page 22: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/22.jpg)
Information Architecture Key content groups Sub elements of content groups Consistent levels/layers 2/7 rule Identification of location “where am I?” No dead ends
![Page 23: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/23.jpg)
Card exercise
![Page 24: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/24.jpg)
Wireframes
![Page 25: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/25.jpg)
Digitaldoughnut wireframes
![Page 26: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/26.jpg)
Design Match priority of messages Menus = info architecture Consistent placement Use of real estate Advertising opportunities Colours Simplicity White space Resolution
![Page 27: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/27.jpg)
Design discussion examples www.lingscars.com www.apple.com Impressapenguin.com
![Page 28: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/28.jpg)
User centric design
![Page 29: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/29.jpg)
UCD Process: start early, step up pace and involve users
For best results begin as early as possible in the product development cycle
Iterative and rapid … allows for quick changes
Work with product management, developers … and users!
![Page 30: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/30.jpg)
Involve your users as soon as possible, for best UCD benefits
Opportunity for design changes
Requ
irem
ents
Desig
n
Develop
men
t
Laun
ch
Conce
pt
The earlier UCD is involved…
… the more value UCD can create… the quicker the project can run… the less money the project will
cost… the more likely it is that the
project will be a success
When should you get UCD involved?
The earlier the better! Cost of design changes
Requ
irem
ents
Desig
n
Develop
men
t
Laun
ch
Conce
pt
![Page 31: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/31.jpg)
Pre-production test methods: expert reviews
Definition
First releaseEvaluation &
Redesign
Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management
Production & Implementation
Concept
PHASE 1
PHASE 2 PHASE 3
Pre-production
PHASE 4
Common method in concept phase is
Expert Review/Usability Expert Test:– Based on mock ups– Conducted by experts– Thorough review based on
best practicesOther methods are: Cognitive walkthrough (based on user’s
goals / scenario’s) and GOMS (Walkthrough based on goals & sub goals)
But, never leave it toexpert reviews – theyAre easy to get the basicsright, but do Involve yourCustomers in the nextphases!
![Page 32: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/32.jpg)
Pre-production test methods: involving your customers
Definition
First releaseEvaluation &
Redesign
Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management
Production & Implementation
Concept
PHASE 1
PHASE 2 PHASE 3
Pre-production
PHASE 4
User Test– Based on user’s goals / scenario’s– Conducted by clients
Focus Groups:– User feedback on initial concepts / first drafts– Initial response to design– Check assumptions on expected user behaviour
Other method in this catgory is: Card sorting (Structuring content)
![Page 33: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/33.jpg)
Pre- and postproduction test methods: involving your customers
Definition
First releaseEvaluation &
Redesign
Project ManagementProject Management Project ManagementProject Management Project ManagementProject ManagementProject ManagementProject Management
Production & Implementation
Concept
PHASE 1
PHASE 2 PHASE 3
Pre-production
PHASE 4
Task Analysis:– evaluation through observation and interviews of how people actually accomplish things on
the website– a set of tasks that support the visitor’s goals is determined
Eye tracking: – This technique measures the Eyeball movement and tracks the way visitors go through the
website.
Mouse movement tracking:– Clickmap Measurement. Tracking clicking behavior of users
Other methods in this category:Analyzing statistics and Prototyping (Non-)clickable mock-ups
![Page 34: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/34.jpg)
Heatmaps allow you to test your design assumptions in a glimpse….
Source: http://poynterextra.org/eyetrack2004/heatmap.htm
![Page 35: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/35.jpg)
Elsevier Tuition used the mouse movement tracking method to evaluate its website’s navigation and forms.
![Page 36: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/36.jpg)
Writing for the web & SEO Write relevant content
It may be tempting to write about your brother's dog, but if it doesn't relate to your site or page topic, leave it out. Web readers want information, and unless the page is information about said dog, they really won't care, even if it is a good metaphor for what you're trying to say.
Put conclusions at the beginningThink of an inverted pyramid when you write. Get to the point in the first paragraph, then expand upon it.
Write only one idea per paragraphWeb pages need to be concise and to-the-point. People don't read Web pages, they scan them, so having short, meaty paragraphs is better than long rambling ones.
Use action wordsTell your readers what to do. Avoid the passive voice. Keep the flow of your pages moving.
Format; Use lists instead of paragraphsLists are easier to scan than paragraphs, especially if you keep them short.
![Page 37: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/37.jpg)
Writing for the web & SEO Limit list items to 7 words
Studies have shown that people can only reliably remember 7-10 things at a time. By keeping your list items short, it helps your readers remember them.
Write short sentencesSentences should be as concise as you can make them. Use only the words you need to get the essential information across.
Include internal sub-headingsSub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to do this.
Make your links part of the copyLinks are another way Web readers scan pages. They stand out from normal text, and provide more cues as to what the page is
Proofread your workTypos and spelling errors will send people away from your pages. Make sure you proofread everything you post to the Web
![Page 38: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/38.jpg)
Basic rules of good SEO at early stageDO: Title tags Key phrases (especially in main entry pages) Meta tags Relevant content in correct format (H1 etc) Sitemaps – no cul-de-sacs Review the favourite search keywords on your
site Always add ALT tags to images to explain the
content in the image Concentrate on optimizing main entry pages
first
![Page 39: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/39.jpg)
Project management
![Page 40: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/40.jpg)
![Page 41: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/41.jpg)
Waterfall project management
Initiation
Specify DesignBuild &
testDeploy
ObjectivesStake holdersFundingGo ahead
PhasesNeeds analysisSoWTeamResourcesUse cases
IANavigationModulesLook feel
Back end Front endDatabase layer
UATStaging to liveBeta testingPromotionLaunch
![Page 42: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/42.jpg)
![Page 43: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/43.jpg)
Agile manifesto Individuals and interactions over
processes and tools Working software over comprehensive
documentation Customer collaboration over contract
negotiation Responding to change over following a plan
![Page 44: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/44.jpg)
Features of agile Short iterations (timebox or chapters) Mixed skill teams (Customer representative,
scrum master, design, dev) Iterative approach Absolute focus on business benefit Focus on collaboration and discussion over
docs
![Page 45: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/45.jpg)
Roles and responsibilities In house
Champion/sponsor Project lead Project manager Brand management
Supplier Account management Project manager Technical Lead Design lead Back end developer Front end developer
![Page 46: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/46.jpg)
Launch
Technical aspects of launch
Marketing aspects of launch
![Page 47: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/47.jpg)
Technical aspects of launch User acceptance testing
Based on use cases – does it do what you asked it to?
Does it seem to be sensible Get some other people (customers) to help testing
Move from staging to live Beta testing Final elements of UCD
‘Make live’ Change the DNS to point at the new site Start marketing it!
Keep testing
![Page 48: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/48.jpg)
Managing an agency relationship
![Page 49: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/49.jpg)
Managing an agency Be open
Be clear about what you’re trying to do for whom Be open about how you will make money and
which bits are important to you Tell them your budget
Be organised Go through as much of the process as you can Sign off when you say you will Don’t let scope creep or ambition creep over
extend the project
![Page 50: Hello World! Graham Ruddick. Building a webpage Template Content (CMS) Images](https://reader038.vdocuments.us/reader038/viewer/2022110210/56649e665503460f94b61829/html5/thumbnails/50.jpg)
Summary Understand audiences and their needs KPIs and ‘what’s good’ Information architecture Wireframes Design Writing Build User acceptance testing Launch