Web development and design applies to more than just websites – the principles can be used for any digital assets you create, from mobile platforms to social media profiles.. Creating on
Trang 2What’s inside: This chapter introduces you to web design and designing for persuasion It offers understanding of how web properties are built to be technically solid,
user-friendly and in line with marketing goals Following on from the UX lessons in the
06
Web Development and Design
Trang 36.1 Introduction Websites are, in many ways, at the heart of successful digital marketing They are your home on the web, a shop window over which you have full control, and often the first place people stop to find out more about you
Web development and design applies to more than just websites – the principles can be used for any digital assets you create, from mobile platforms to social media profiles
Creating online assets involves three key processes – planning and design, which create the appearance, layout and style that users see, and development, which brings this imagery to life as a functioning web tool
The fundamental principle of good development and design is to understand your users: the people who will actually be using and interacting with your website
What are they looking for? What are their objectives? Your offering must have user experience central to the process
In this chapter, you will learn:
• How the web development process works, from planning through to design and launch
• Development and design best practices and the principles of designing for persuasion
• How to assess the quality and effectiveness of web development and design implemented by suppliers or agencies
• How to evaluate the need for either a static or CMS website
6.2 Key terms and concepts
Above the fold The content that appears on a screen without a user
having to scroll
Accessibility The degree to which a website is available to users with
physical challenges or technical limitations
Alt text
The ‘alt’ attribute for the IMG HTML tag It is used in HTML to attribute a text field to an image on a web page, normally with a descriptive function, telling a search engine or user what an image is about and displaying the text in instances where the image is unable to load
Branding (or visual identity or corporate identity)
How your logo, colours and styling elements are translated from traditional print-based assets to digital
Breadcrumbs Links, usually on the top of the page, that indicate where
a page is in the hierarchy of the website
Call to Action A phrase written to motivate the reader to take action
(sign up for our newsletter, book car hire today etc.)
Content Management System (CMS)
A system that allows an administrator to update the content of a website, so that a developer is not required
to do so
Common page elements Items that appear on every page of a website
Cascading Style Sheets (CSS)
A programming language that defines the styles (fonts, colours, etc.) used to display text and content Web pages are one of the places that this language is used
dpi Dots per inch (in an image) On the web, the screen
resolution is 72dpi
Flash
Technology used to show video and animation on a website It can be bandwidth heavy and unfriendly to search engine spiders
HyperText Markup Language (HTML)
The code language predominantly used to create and display web pages and information online
HTML5
A broad range of technologies that allow for rich media content and interaction on the scale of Adobe Flash, but which, unlike its counterpart, does not require additional third-party plugins It allows rich multimedia content
to be displayed that can easily be viewed by users, computers and devices HTML5 is the next iteration of the HTML standard
Information architecture The way in which data and content are organised,
structured and labelled to support usability
Landing page
The page a user reaches when clicking on a paid or organic search engine listing The pages that have the most success are those that match up as closely as possible with the user’s search query
Meta data
Information that can be entered about a web page and the elements on it to provide context and relevant information to search engines
Native mobile application
A mobile application designed to run as a program on a specific device or mobile operating system
Navigation How a web user moves through a website, and the
elements that assist the user in doing so
Web Development and Design › Key terms and concepts
Web Development and Design › Introduction
NoTe
Read more about this
in the Digital Marketing
Strategy chapter.
Trang 4open source
Unlike proprietary software, open source software makes the source code available so that other developers can build applications for the software, or even improve on the software
Proprietary software
Any software that one or more intellectual property holders own and licence to others in exchange for compensation, subject to certain restrictions Licensees may not be able to change, share, sell or reverse engineer the software
Robots.txt
A file written and stored in the root directory of a website that restricts search engine spiders from indexing certain pages of the website
Search engine results page (SeRP)
The actual results returned to the user based on their search query
Sitemap
On a website, a page that links to every other page in the website, and displays these links organised according to the information hierarchy
Universal Resource Locator (URL)
A web address that is unique to every page on the Internet
Usability
A measure of how easy a system is to use Sites with excellent usability fare far better than those that are difficult to use
Web application framework
Software used to help create dynamic web properties more quickly This is done through access to libraries
of code for a specific language or languages and other automated or simplified processes that do not then need
to be coded from scratch
W3C World Wide Web Consortium, which oversees the Web
Standards project
Web server A computer or program that delivers web content to be
viewed on the Internet
eXtensible Markup Language (XML) A standard used for creating structured documents.
6.3 Web design
Web design is the process of creating all the visual aspects of the interface This covers the layout, colour scheme, images, logos, type, design elements (such as buttons and links), and anything else that you can see
The web is a visual medium, so design is a very important part of creating successful assets that are both engaging and effective At the same time, however,
designers need to keep in mind the technical aspects of design, as well as the all-important human factor Digital properties shouldn’t just be beautiful; they also need to create a good experience for the visitor and meet business objectives
6.3.1 Visual identity and designing for persuasion
The visual interface – the design of a website – is what the user sees and interacts with It’s the visual representation of all the hard work that goes into developing a website It’s what the site will first be judged by, and is the initial step in creating a delightful user experience In case you haven’t realised it, it matters a lot
There is a close relationship between UX and visual design – sometimes these are even done by the same person At other times, the visual designer will use the documents created by the UX designer and add the visual skin In this case, it’s like comparing the architect (UX designer) to the interior decorator (visual designer)
Design is not just about aesthetics, although looks are very important Design is about the visual clues we give users so that they know what to do next Design is the way in which we communicate with our users It assures web visitors of our credibility and ability to answer their questions, and turns them into customers
Good interface design involves many things (including years of training and experience), but here are a few basic considerations These are closely linked to
UX and the visual designer plays a key role in defining them:
• Navigation: the signage of the site, indicating to users where they are
and where they can go
• Layout: how content is structured and displayed.
• Headers: the usually consistent top part of a web page.
• Footers: as you may have guessed, the usually consistent bottom part
of the page
• Credibility: telling users that you are who you say you are.
Visual identity The visual identity answers the question: “How do users know it’s us?”
Certain design elements should be carried through on all web assets created for
a brand, as well as print and traditional communication media Often, the visual identity guidelines for the web are codified into a Digital Style Guide document
to ensure consistency across different agencies, designers and teams This document can include guidelines for creating all manner of web assets, including
Web Development and Design › Web design
Web Development and Design › Key terms and concepts
Trang 5The logo is the most prominent way to reinforce your brand identity on the website
The logo is part of a brand’s corporate identity (CI) Be aware that logos designed for printing on letterheads will need to be adapted for the web and legibility, particularly when it comes to resizing
The primary font is typically used for prominent headings on the site, while body copy is often set in a standard web font that closely matches the primary font
Font replacement is widespread and involves embedding non-web safe fonts into the code, using Typekit, for example With Typekit, subscribers can embed simple code that allows them to choose from hundreds of fonts for their website (Wikipedia, 2013) However, the growing popularity of HTML5 in modern browsers makes font replacement less necessary
Menu and button style, as well as icons, are also part of a site’s visual identity Even when a user is viewing a small part of a site or page, it should look as if it belongs
to the site as whole
Figure 1 An example of a website’s visual identity (Source: Fisher, 2012)
6.3.2 Design theory
Design can be a pretty precise science – there is a lot of research out on what makes for effective design A lot is also common sense and practice based on accepted web standards Here are some concepts you should know
The fold The fold is the imaginary line at the bottom of the monitor that divides the immediately visible part of the website (content above the fold) from the part that
is visible only after scrolling down (content below the fold)
Your most important message, content or Call to Action should usually be placed above the fold It is worth mentioning here that the concept of above the fold has come across some scrutiny, because it is not always useful
Consistency Consistency in use of visual elements is vital to your online presence – across all your properties and channels (such as your email newsletter, Facebook page and mobi site) – as users do not perceive differences between platforms or even on- or offline They perceive it as one message on multiple touchpoints Within a website, elements should also be consistent Colour coding, or colour themes, can
be used very successfully to group areas or features on a website For example, if the help button and help navigation are coloured yellow, then the user will quickly associate yellow with support and assistance This is another useful shortcut to making the site usable and intuitive
Figure 2 A website with a consistent colour scheme
http://teamtreehouse.com/library
White space Spacing on the page allows the eye to travel easily between chunks of information and allows scanning This can be done by using what is called white space This
NoTe
Not every user will see the same amount of content above the fold, since some screens are smaller than others Check your web analytics data to see what common screen sizes are used and tailor your content to the lower end of the spectrum to ensure that more people see your key message.
Web Development and Design › Web design
Web Development and Design › Web design
Trang 6space is not necessarily white, but instead is merely empty It refers to the space between elements on a page
Always steer clear of cluttered pages This is especially true for landing pages, where a very specific message is expected Make your pages as simple and easy
to understand as possible
If you look at the example below, you can see how detailed information can be simplified, which in this case led to a 14% increase in website visitors
Figure 3 Putting your business’s message across more effectively.
(Source: Moz, n.d.)
6.3.3 Colour theory
Colour has an incredible psychological effect on people Based on our culture, preferences and learned cues, people interpret colours in very specific ways – and this can be used to inform and steer the user’s experience Colour theory online refers to the principles of combining colours to attract people toward your brand and its offerings (Focus Designer, 2012)
Figure 4 A colour wheel shows how the colours red, yellow and blue appear when mixed together (Source: Ibrahim, 2010)
Most of the colour choices will be dictated by the CI, but tones and shades will be selected by the designer
Contrast is very important when displaying text online If the text and background are the same colour and there is no contrast, this means that the text will not be readable Best practice is to use a light background colour and a dark colour for the text Black text on a white or light grey background works well Contrast is also
a good way to draw your reader to and differentiate between different aspects of the page
Colours also hold different meanings and associations for people Ensure that you know these meanings for the audience that you are targeting – for example, red signifies luck in Asian cultures, but danger in many western cultures
Old Design
New Design
Web Development and Design › Web design
Web Development and Design › Web design
NoTe
The colour wheel helps designers to find colours that work well together and create a colour scheme Colours that appear opposite each other, like red and green, are known as complimentary colours For example, red and green are often used for buttons that appear close together as the colours contrast and highlight each other
Trang 7Figure 5 What different colours signify for North Americans (KISSmetrics, 2010)
There are some colour-related web design conventions you should follow:
• Red is used for warnings, error messages and problems
• Green is used for successful actions, next steps and correct submissions
• Blue is best used for hyperlinks
Your Call to Action is one of the most important parts of your website and can be displayed as a link or button As this is meant to attract the eye, choose a colour that stands out When Dmix tested this out, as you can see in this example, they experienced an increase of 72% in conversions by using the more striking red button instead of the green one (Chopra, 2010)
Figure 6 Exploring the effectiveness of colour in buttons (Source: Moz, n.d.)
6.3.4 Collecting and collating design assets
Elements such as your logo and brand colours represent your brand The latest versions of these brand assets need to be available to the designer or marketing agency designing your website
Getting the right brand assets to designers in a good-quality format that they can easily access saves time and avoids expensive mistakes By doing this, your campaign won’t be designed with the wrong version of your logo or with incorrect brand colours
Here is a list of brand assets that a designer requires to start working on your project
The quality, format (or file type) and file size are all important considerations
You need to provide:
• Brand guidelines or style guide in Adobe Reader (PDF) format.
• Logo and other key brand elements These could be in Illustrator format
(ai) or Photoshop format (psd) Best practice is to have your logo designed using vector graphics If your logo or other brand assets are created in this format, they can be enlarged without losing quality Other formats
do not allow scaling and if displayed larger than the original designer intended will result in a poor-quality image If you do not have a vector version of your logo available, then you should make sure that your image
is at least 1 000 pixels wide
• Image libraries Photographs and images can be hosted online, where
the designer can access them with a login They can also be sent to the designer on a CD Make sure the images are of sufficient quality It is best practice to provide images that are 300dpi This is the measure of
a high-quality image that will retain its quality if resized Although all images on the web are displayed at 72dpi, a higher quality image will give your designer room to optimise and resize and crop or cut images where needed
• Fonts folder You will need to provide both Apple Mac and PC versions
of the fonts that are listed in your Style Guide Many designers work on Macs, which use different font versions from those read by PCs
• Brand colours need to be given to digital designers in RGB format RGB
stands for red, green and blue and is the standard for colours online
NoTe
If you do not own the image and the copyright
is not owned by you it is illegal to use the image
on your site without permission from the owner If you require images, these can be purchased from stock libraries online such as iStock or Shutterstock Avoid using images from Google Image Search on your pages.
Web Development and Design › Web design
Web Development and Design › Web design
Trang 8• Any existing creative assets that have been created for your brand over time such as:
o Print designs
o TV ads
• Website copy should be made available before the final design is
required This prevents delays caused by designers waiting for material
• Any additional assets your designer may need that can be downloaded or sent, such as your price guides or product descriptions
Fonts Copy conveys your brand message to your client or customer and should be easy
to read and search engine friendly The CI is expressed through fonts, also known
as typefaces
Typographic layout can draw attention to the content users should see first
Indicate which pieces of information take precedence Importance can be signified
by text size, colour, weight, capitalisation and italics Placement also contributes
to how important text appears
Some fonts are common to all computer users These fonts are known as web-safe fonts Anyone accessing websites that use these fonts will be able to view them as the designer intended and search engines will be able to search these websites easily Fonts that are not web safe may appear very differently on some computers Designers don’t always like to be limited to using only web-safe fonts, and brand guidelines in most instances don’t take web-safe fonts into account
This means that fonts must be embedded by a developer using tools such as Typekit, or alternative fonts need to be selected
Figure 7 Examples of web-safe fonts.
Typographic layout can draw attention to the content users should see first
Indicate which pieces of information take precedence Importance can be signified
by text size, colour, weight, capitalisation and italics Placement also contributes
to how important text appears
6.4 Web development
Web development is the process of taking finished web designs and transforming them into fully functioning, interactive websites Development is what gives life and movement to the static designs, and enables users to access the website through their web browsers This is done by translating the designs into web-coding languages that can be interpreted and displayed by web browsers
Learning to code your own website is not in the scope of this textbook and requires years of practice and some considerable technical know-how But we can teach you to understand the aspects that go into creating a website, the process that should be followed, and how to help in making key choices about your website
When developing a website, you need to make three key decisions (don’t worry, we’ll explain each one below):
• Should your website be static or should it have a content management system (CMS)?
• Which server-side language should be used?
• Which front-end language should you use?
6.4.1 Static website or CMS
A static website, as the name implies, is one that does not change often – other than the occasional update, the website stays the same over time and no new content is added Should new content be required, a web developer would need
to add it
CMS stands for content management system A CMS is used to manage the content
of a website If a site is updated frequently and if people other than web developers need to update the content of a website, a CMS is used Today, many sites are built on a CMS, which can also allow content of a website to be updated from any location in the world by signing into an online management interface for the CMS
There are three types of CMS you can choose from:
• Bespoke: This is a CMS that is built specifically for a certain website,
and many web-development companies build their own CMS that they use for their clients This option is highly tailored and customised to your website, and can be more expensive than other options It is also possibly less flexible
NoTe
Some web-safe fonts
are: Times New Roman;
Arial; Helvetica; Courier
New; and Lucida
Console See the full
list here: http://www.
w3schools.com/cssref/
css_websafe_fonts.asp
NoTe
You can also use Google
fonts as an alternative,
which are more stylish
than standard fonts but
which are still viewable
by most people A
developer will need to
implement these See
www.google.com/fonts
Web Development and Design › Web development
Web Development and Design › Web design
Trang 9• off the shelf: A CMS can also be pre-built by an external company or
developer These can be bought like any other software on the market
While this may have fewer custom features, it’s potentially a more cost-effective option than a bespoke CMS
• open source: There are many open source, pre-built CMS options
available, some of which are free Open source means that anyone can see the code that the CMS is built with, and can manipulate or improve it (and share this with everyone else using the CMS) An open-source CMS can be more rudimentary than paid options, but is also easy to tailor to your needs, and there is often a community that can create the solutions you need
Some widely used open-source CMS solutions include:
• WordPress (www.wordpress.com)
• Joomla (www.joomla.org)
• Drupal (www.drupal.com)
A CMS should be selected with the goals and functions of the website in mind A CMS needs to be able to scale along with the website and business that it supports, and not the other way round!
Of course, the CMS selected should result in a website that is search engine friendly
Here are some key features to look out for when selecting or building a CMS:
• Meta and title tag customisation: the CMS should allow you to enter your
own meta tags for each page, as well as allow full customisation of title tags for each page
• URLs: instead of using dynamic parameters, the CMS should allow for
clean URLs by using server-side rewriting Clean URLs consist only of the path to a webpage without extra code (a clean URL could look like this: http://example.com/cats, while an unclean URL could look like this: http://example.com/index.php?page=cats) It should allow for the creation of URLs that are:
o static
o rewritable
o keyword rich
Be careful when building clean, descriptive and dynamic URLs from CMS content Should you use a news heading (‘Storm’, in this example) as part
of your URL (http://www.site.com/cape/storm) and someone changes the heading to ‘Tornado’ (http://www.site.com/cape/tornado), this will alter the URL and the search engines will index this as a new page, but with the same content as the URL which had the old heading Bear this in mind before adding dynamic parameters to your URLs
• Customisable navigation: a good CMS will allow flexibility when it comes
to creating the information architecture for a website For the purposes
of adding additional content for search engines, a CMS should not require that all content pages be linked to from the home page navigation
This allows content to be added for search engine optimisation (SEO) purposes, without adding it to the main navigation
• The CMS needs to have good support for managing SEO considerations
such as URL rewriting and avoiding duplicate content issues
• Customisable image naming and alt tags for images: a good CMS will
allow you to create custom alt tags and title attributes
• Robots.txt management: ensure that you are able to customise the
robots.txt to your needs, or that this can at least be managed using the meta tags
Finally, using a CMS that supports standards-compliant HTML and CSS is very important, as without it, inconsistencies may be rendered across various browsers
It also ensures faster loading time and reduced bandwidth, makes mark-up easier
to maintain, supports SEO efforts and ensures that every visitor to a website, no matter what browser they are using, will be able to see everything on the website
6.4.2 Server-side languages
Server-side languages are the ‘hidden’ web coding languages that determine how your website works and communicates with the web server and your computer
The most popular server-side framework for each language is also discussed
When choosing a server-side language, you need to consider:
• Cost: The cost varies depending on the language you choose for your
web development project, as the language chosen directly influences the salary of the developer If information is processed where your website
is housed, as opposed to on the client’s computer, it increases the costs Some languages also require on-going website management and maintenance, which is an additional cost to consider
NoTe
A web application framework (WAF)
is software used to help create dynamic web properties more quickly This is done
by accessing libraries
of code for a specific language and other automated or simplified processes that do not need to be coded from scratch.
Web Development and Design › Web development
Web Development and Design › Web development
NoTe
Read more about this
in the Search Engine
Optimisation chapter.
Trang 10• Scalability: When planning a project where scalability is a factor, consider whether there are developers readily available to develop in this language Also find out if there are supporting libraries and frameworks available that suit your project
Some of the most common and popular server-side languages include PHP, Java, Ruby and the NET languages Ask your web developer to advise you on the best language for your specific project
6.4.3 Front-end languages
Web users have come to expect rich, interactive experiences online, and interactive website interfaces are a part of that Front-end languages, or “client-side”
languages, are languages that are interpreted and executed in the user’s browser rather than on the web server
These experiences range from simple animations through to highly responsive interfaces that require input from the user There are several technologies available
to create such experiences, each with its own opportunities and challenges
As with server-side languages, you need to consider a few properties of the end language you want to use Bear in mind that server-side languages and front-end languages are often used together, as all web projects require front-front-end languages for development
• Cost: Front-end language development costs are relatively low.
• Features: HTML, CSS and JavaScript are open source languages often
used together and are compatible with most hardware and software
Content developed in these is also more search engine friendly Flash is known for its video, animation and interactive multimedia capabilities
In many cases, similar results can be achieved with HTML, CSS and JavaScript Flash can be used alone or in conjunction with other languages What your end users will be able to view should always be the most important consideration
• Scalability: Depending on the capabilities of the device executing the language, certain features may not be available or certain code may run too slowly to create a good user experience The front-end code needs to take all the considered devices into account
• Browser and oS support: With front-end languages, you have to cater
for browser and operating system support A website will look different
on each browser and operating system and this needs to be factored in
If a feature cannot be displayed under certain conditions, work-arounds have to be implemented
• open-source or proprietary software: Any developer can create
add-ons for or improve on open-source software, while proprietary software
is owned and its use is restricted It can be cheaper to develop in an open-source front-end language such as HTML, but as HTML is needed
to host all web pages, combinations of the two are sometimes used In most cases and for the languages we cover, however, this is not a major consideration
There are several options to choose from when it comes to front-end languages, although the most popular by far are HTML, coupled with CSS and JavaScript
HTML5 HTML is the language for creating websites and HTML5 is the fifth iteration of the language It is also the name for a range of technologies that enable modern web browsing features It’s a specification published by the web standards body (W3C) describing what features are available and how to use them HTML5 is different from proprietary web software such as Adobe Flash in that the specification is the result of contributions from many organisations, and can be implemented by anyone without having to pay for royalties or licensing fees You do, however, pay for the development tools provided by the companies
Figure 8 The HTML5 logo.
HTML5 simplifies many common tasks when building a web page, such as including multimedia content, validating forms, caching information and capturing user input data such as date and time
Web Development and Design › Web development
Web Development and Design › Web development
NoTe
There are many free
resources online that
teach you how to code
one is Codecademy:
www.codecademy.com