Week 4 - Digital Marketing

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

Copy conveys your brand message to your client or customer and should be easy to read and searchengine friendly. An important copy-related branding consideration is selecting fonts, also known as typefaces.

Some fonts are common to all computer users. These fonts are known as web safe fonts.

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 • Drupal • Blogger • Joomla

the process of building a website from the client's perspective.

Step 1: Discovery and planning Step 2: Design Step 3: Development Step 4: Testing and launch

When multiple CTAs are used, there should be one that stands out strongly and the others should be more muted, playing a supporting role. CTAs can be differentiated through color, shape, placement and size; the fewer the choices, the better

Stick to one central CTA per page, making it obvious to users what the main goal, action or outcome of the page is.

Step 4: Testing and launch

Testing is an important part of website development and design and it should take place throughout the process of planning, designing and building, leaving just final quality assurance (QA) testing before the site goes live. Test subjects should be real potential users of the website, not just members of the development team. The site needs to be tested in all common browsers and devices to make sure that it looks and works as it should across all of them. All links should be tested to make sure that they work correctly and it's always a good idea to get a final check of all of the copy before it goes live.

When selecting how to proceed with your website development, you have a few options at your disposal. The choice between an off-the-shelf CMS solution and bespoke development comes down to how flexible the off-the-shelf solution is. If a lot of customization is required it is often better and cheaper to develop a bespoke solution.

The CMS you choose can be pre-built by an external company or developer. This can be bought like any other software on the market. While this option may provide fewer custom features, it's potentially a more cost-effective option than a bespoke CMS. It is certainly quicker if little customization is required.

Search engine results page (SERP)

The actual results returned to the user based on their search query.

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 disabilities, such as the visually or hearing impaired and those technically disadvantaged by not having the necessary device, software or browser.

User-centered design (UCD)

The design philosophy where designers identify how a product is likely to be used, taking user behavior into consideration and prioritizing user wants and needs. UCD places the user at the center of the entire experience.

Progressive enhancement

The development of web technologies in a layered fashion, prioritizing basic content and functionality for all web browsers, while allowing users with higher bandwidth or browsers access to an enhanced version of the page

Step 3: Development

The development phase usually kicks in once the design is finished. Normally, the developer uses the design templates to code the actual website, using the front-end language that you have chosen. Server-side development and CMS considerations may also be part of this phase.

The visual identity answers the question, "How do users know it's us?" Certain design elements should be consistent on all web assets created for a brand, as well as print and traditional communication media

The logo is part of a brand's corporate identity (CI).

User experience design (UXD)

The process of applying proven principles, techniques and features to create and optimize how a system behaves, mapping out all the touchpoints a user experiences to create consistency in the interaction with the brand.

Search engine optimization (SEO)

The process of improving website rankings on search engine results pages.

User interface (UI)

The user-facing part of the tool or platform i.e. the actual website, application, hardware or tool with which the user interacts.

Information architecture

The way in which data and content are organized, structured and labelled to support usability.

Landing page

The website page that a user is sent to after clicking on any link or CTA, in an email or affiliated site, in a display ad, or a paid or organic search engine listing. The landing pages that have the most success are those that match up as closely as possible with the user's search query or intention.

Error messages are an important part of validation that is shown to users. Error messages are often ignored in UX development and are a huge source of frustration for users. Some best practices to consider:

These messages should be easy to understand. The user should not struggle to understand the error or how to fix it. • The error message should stay visible until the error has been corrected. • The tone of the message should match the rest of the site. • It is important to remember that a form is a conversation with users. It's an interactive dialogue even though you are not present.

Branding (or visual identity or corporate identity)

These terms refer to the look and feel of your brand. In this context it is used when discussing how your logo, colors and styling elements are translated from traditional print-based assets to digital.

Open source

Unlike proprietary software, open source software makes the source code available so that other developers can improve on or build applications for the software.

Responsive web design

Websites that fluidly respond to a user's device or screen resolution based on media queries sent between the site and the device regarding the specs of the device.

Adaptive web design

Websites that respond to a user's screen size by loading predefined layouts.

Bounce

When users leave a site before navigating from their landing page to another.

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.

Here is a list of brand assets that a designer requires to start working on a site. 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. If you do not have a vector version of your logo available, then you should make sure that your image is at least 1000 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 via Cloud file sharing services. Make sure the images are of sufficient quality. It is best practice to provide images that are 300dpi. Although all images on the web are displayed at 72dpi, a higher quality image will give your designer room to optimize and resize and crop or cut images where needed. It may also be necessary to consider different images for mobile vs. desktop because the viewpoint on mobile is so much smaller. You may need to consider using much fewer images for mobile or even none at all. If you do not own the image and its copyright, it is illegal to use the image on your site without permission from the owner. If you require these images, they can be purchased from stock libraries online such as iStock or Shutterstock. Avoid using images from Google Image Search on your pages. • 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 colors need to be given to digital designers in RGB format. RGB stands for red, green and blue and is the standard for colors online. • Any existing creative assets that have been created for your brand over time, such as: o Print designs o TV ads.

The context of mobile users affects the way in which they use their devices. Mobile users are:

• Goal oriented. Mobile users turn to their mobile devices to answer a question, quickly check email, find information or get directions. They often have a distinct purpose in mind when using their phone. • Time conscious. There are two aspects to this. On the one hand, mobile users are often looking for urgent or time-sensitive information, such as the address of the restaurant they are looking for, so answers should be available as quickly as possible. On the other hand, the mobile device is also frequently used to kill time or as a source of entertainment, such as reading articles • on the couch, or playing games while waiting in a queue, so content is also crucial. User research will tell you which of these groups your users fall into and how you need to structure your site accordingly. • Search dominant. Even users who know what they are looking for tend to navigate there via search, for example, typing the brand name into Google, rather than accessing the page from a bookmark or typing the URL directly into the browser bar. • Locally focused. According to Google search data, 30% of all mobile searches are for location (Think with Google, 2016). Since mobile phones are always carried, users turn to them to find information on things in their surroundings, from local businesses to more detail on a product they have just seen.

When it comes to displaying search results, there are a few key questions to ask:

• How many results should be displayed per page? o Ten to 20 results per page is generally a good benchmark. • What order should results be in? Most popular first? Cheapest? Newest? Closest match? o This will depend on the nature of the site. • Can results be filtered? o Some websites allow users to do a second search constrained to the results of the first one. • What happens if there are no results? o If no search results are found, the search function should provide hints and tips to the user on how to search better on the site. The fact that there are no results should be stated clearly, followed by a list of the closest match of content to the search query. It's quite possible the searcher didn't know the exact term from what they are looking for or made a typo, though the site should be forgiving of these. Hints could include wildcards or breaking up the terms into smaller pieces. The message shown to users should be helpful and relevant and not simply copied from Google's advice.

When deciding whether to create a responsive site or adapt desktop sites, consider your customer first:

• How much of your website traffic comes from specific mobile devices? If this is a large percentage, consider building a responsive site designed for optimal viewing on mobile screen sizes. • Do your desktop users have the same goals as your mobile users? Here you need to keep in mind your CTAs, drop down menus and the like and ensure they can be accessed correctly by the relevant device. • What is your budget and how quickly do you need your website to be built? Responsive websites take a while to build and can be expensive. You could save money long term by going this route, but there is a sizeable upfront investment. • Do you have an existing site and can it be converted into a responsive website, or will it need to be rebuilt (Du Plessis, 2012)?

One of the most important aspects of usability involves sticking to conventions, which are simply common rules or ways of displaying or structuring things on the web. Popular conventions include:

• Links that are blue and underlined • Navigation menus at the top or left of the web page • The logo in the top left-hand corner which is linked to take the user back to the home page • Search boxes placed at the top of the page, using standard wording, such as 'search', or a magnifying glass icon

Credibility refers to how trustworthy and legitimate something looks and is a big consideration for web users when deciding to use your website or not. Here are some of the cues that visitors use to determine the credibility of a website:

• Looks - does it look professional and beautiful? • Prominent phone numbers and addresses are easy to locate - this assures the visitor that there are real people behind the website and that they are easily reachable. • Informative and personal 'About us' - some customers want to see the inner workings of a company and are interested in the head honchos. Consider including employee pictures and profiles to add personality to the site. • Genuine testimonials - testimonials are a great way to show potential customers what your current customers have to say about your organization. Trust is vital and this is one way to encourage it. Video testimonials can be particularly effective, assuming your audience does not face data restrictions. • eCommerce - using a reputable sales channel helps your websites credibility. • Social media - having a social media presence often goes further towards establishing credibility than testimonials, which could have been faked. • Logos of associations and awards - if you belong to any relevant industry associations or have won any awards feature them. Not only does this go a long way towards establishing your credibility, but it will show that you're at the top of your game, a notch above the competition. • Links to credible third-party references or endorsements - this is a way to assert your credibility without tooting your own horn. • Fresh, up-to-date content - a news section that was last updated a year ago implies that nothing has happened since or that no one cares enough to update it. • No errors - spelling and grammar mistakes are unprofessional and while the large majority of readers may not pick them up, the one or two who do will question your credibility. This extends to broken links, malfunctioning tools and interactive elements that don't work as advertised.

Simplicity can mean several things:

• Lots of empty space. In design terms, this is referred to as negative or white space. Though, of course, it need not specifically be white. Dark text on a light background is easiest to read. In general, the more effectively 'breathing room' is placed between various page elements, lines of text and zones of the page, the easier it is for the user to grasp where everything is. • Fewer options. Studies have found that people faced with fewer choices generally choose more quickly and confidently and are more satisfied with their decision afterwards (Roller, 2010). • Plain language. Unless your website is aimed at a highly specialized technical field, there's usually no need to get fancy with the words you use. Clear, simple, well-structured language is the best option when creating a great user experience. • Sticking to conventions. As we've said before, conventions are excellent shortcuts for keeping things simple for users. There's no need to reinvent the wheel and try to teach your users a whole new way of navigating a website.

Good interface design involves many things, 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 element with a fixed position at the top of every page. They usually includes all primary navigation items which need to be presented on every page such as main menu, login and search. • Footers: the usually consistent bottom part of the page. • Credibility: telling users that you are who you say you are.

Ensure that all website elements, such as menus, logos, colors and layout, are distinct, easy to find and kept consistent throughout the site. There are some key 'dont's' when it comes to building a userfriendly and usable website:

• Never resize windows or launch the site in a pop-up. • Do not use entry or splash pages (i.e. a page that site visitors encounter first before reaching the home page). • Flash is no longer used to design websites. Unaided, most search engine spiders cannot effectively crawl Flash sites and Flash doesn't work on many mobile devices. • Don't distract users with 'Christmas trees' such as blinking images, flashing lights, automatic sound, scrolling text and unusual fonts.

And finally, while the following principles apply to desktop as well, they are especially valid for mobile:

• Reduce loading time. Try to keep content and actions on the same page as this ensures better performance as there are fewer page loads. Encourage exploration, especially on touchscreens. Users like to browse elements and explore. This makes them feel in control. • Give feedback. Ensure that it is clear when the user performs an action. This can be achieved through animations and other visual cues. • Communicate consistently. Ensure that you deliver the same message across all your touchpoints. For example, using the same icons on the website as you would on the mobile app prevents users from having to relearn how you communicate. • Predict what your user wants. Include functionality, such as autocomplete or predictive text. Remove as much manual input as possible to streamline user experience.

The limitations of mobile create additional considerations for the UX designer to address to ensure that visitors have a pleasant user experience while visiting the site. These limitations include:

• Small screens. Even the largest smartphones are screens many times smaller than a standard laptop and tablets fall somewhere between the two. This means that the user has a much smaller window through which to perceive and understand the website, so it may be difficult to get an overall impression of where things are or what's important. • Difficult inputs. Mobile phones don't come with full-sized keyboards and mice, so they are usually a lot more difficult to operate fluidly and accurately than desktop computers. Touchscreens may be the exception here, although they also have their own pitfalls. • Slow connection speeds. Many mobile phone users, especially in developing countries, are on slow Internet connections. Even fast options such as 3G can often be more sluggish than a desktop equivalent. This makes loading large websites or images slow and frustrating and can be expensive in terms of data costs. • Slow hardware. Sometimes the slowness comes from the hardware itself. The more basic the phone, the slower its processing components making the simple act of opening the browser and loading a page time consuming.

The field of UX is full of similar sounding jargon, so here's a quick guide to the terms you should know.

• User experience (UX) is the overall satisfaction a user gets from interacting with a product or digital tool. • User experience design (UXD, sometimes UED) is the process of applying proven principles, techniques and features to a digital tool to create and optimize the user experience. • User-centered design (UCD) is the design philosophy that prioritizes the user's needs and wants above all else and places the user at the center of the entire experience. This often entails research and testing with real users of the site or product. • User interface (UI) is the user-facing part of the tool or platform and is the part of the actual website, application or tool that the user interacts with. • Usability refers to how user friendly and efficient a digital product is.

The content strategy is largely the responsibility of the strategy, copy and concept teams, but the UX practitioner needs to get involved in a few key roles. The points that UX needs to address are:

• What the site should achieve. Naturally, the content should work towards achieving the site's and business' objectives. • What the user wants and needs. By conducting thorough user research, you should be able to answer this question. Provide only content that will add real value to the user. • What makes the content unique, valuable or different. Content needs to provide value to the user. A content strategy will help ensure content is updated regularly and will include up-todate information. • The tone and language used. You need to consider the tone, whether it's fun, light or serious, the register, whether it's formal or informal and the style you will use across your content. Make sure tone, style and register are consistent across text, images, videos and other content types. Correct grammar and spelling are important considerations as they speak to the credibility of the site.

When designing for the user, you need to ask the following questions:

• Who is the user? • What are the user's wants and needs from your platform? • Why is the user really coming to your website? • Where is the user most likely to be in their customer journey when they visit your site? • What are the user's capabilities, web skills and available technology? • How can the site facilitate the customer journey to conversion and purchase? • What features would make the user's experience easier and better?

It should allow for the creation of URLs that are:

• static • rewritable • keyword rich.

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.

Content audit

An examination and evaluation of existing content on a website.

Cache

Files stored locally on a user's browser to limit the amount of data called from the server on a return visit.

the extra elements that your website will need. Remember that the page should only ever contain the elements a user might need to support them in their task. These can include:

• Calls to action. CTAs can take a variety of shapes and forms, from in-text links to large buttons. • Forms. These are interactive fields where users can enter their contact details or other information, for example, to sign up for a newsletter or enter a competition. • Search. Many sites can benefit from having a search function, both to help users navigate and to make finding specific information easier.

Copy can be made more easily readable by:

• Highlighting or bolding key phrases and words • Using bulleted lists • Using paragraphs to break up information • Using descriptive and distinct headings.

There are six qualities that make up good UX:

1. Findability. Can I find it easily? Does it appear high up in the search results? How long does it take me to find something on the site? Does the three-click rule work on this site? 2. Accessibility. Can I use it when I need it? Does it work on my mobile phone, or on a slow Internet connection? Can I use it as a disabled person? 3. Desirability. Do I want to use it? Is it a pleasant experience, or do I dread logging in? 4. Usability. Is it easy to use? Are the tools I need intuitive and easy to find? 5. Credibility. Do I trust it? Is this website legitimate? 6. Usefulness. Does it add value to me? Will I get something out of the time I spend interacting with it?

User testing follows a set process:

1. Formulate a question to test 2. Choose a test and prepare 3. Find subjects 4. Test 5. Analyze 6. Report 7. Implement 8. Start again.

Online UX can be divided into two broad categories:

1. Functional UX. This covers the elements of the user experience that relate to actually using the tool, such as working technical elements, navigation, search and links. 2. Creative UX. This is the bigger, harder to define impression created by the tool. The so-called 'wow' factor that covers visual and creative elements.

There are three main approaches to creating mobile-accessible content:

1. Mobile websites (called mobi sites) 2. Native and web applications (called apps) 3. Responsive websites (websites that adapt to the device).

To create the visuals for your sitemap, you can follow this process:

1. Start by defining your home page. This should be the top item in the hierarchy. 2. Place the main navigation items below this. 3. Arrange your pages of content below the main navigational items, according to the results of your user testing and insight and your information architecture structure. 4. Add pages below this until you have placed all your content. Make sure that every page is accessible from at least one other page. It may seem obvious, but you'd be surprised how often this is overlooked! 5. Define any other static navigation elements (i.e. the footer, sidebar, header navigation, search tools). Place these in your diagram possibly branching off directly from the homepage or as separate blocks.

Principles of creating content There are three key points you should consider here:

1. Structure 2. Hierarchy 3. Relevance

A web page can be broken down roughly into four zones:

1. The header (at the top of the page) - used to identify the site and provide basic tools: Logo or identifying mark (possibly including the brand's tagline); Main navigation; Login feature; Search bar. 2. The central content area - used to present the main content: The actual content specific to the page, such as text, images, videos and more (this can be broken into several columns); CTAs of various kinds, such as "Sign up"; "Get started"; "Claim your free trial". 3. The sidebar (either on the left or the right, or sometimes on both sides) - used to present secondary content and tools: Secondary navigation bar, or other navigation features (for example, blog article archive by date); CTAs, including buttons and signup forms; Additional content, like links or snippets. 4. The footer (at the bottom of the page) - used for important but non-prominent content and resources: Legal information, privacy policy and disclaimers; Additional navigation elements.

Successful navigation should help a user to answer four basic questions:

1. Where am I? 2. How did I get here? 3. Where can I go next? 4. How do I get home?

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 web page without extra code

A clean URL could look like this: example.com/cats

W3C standards

A common approach to development that focuses on accessibility and standardization, overseen by the World Wide Web Consortium (W3C).

Convention

A common rule or tried-and-tested way in which something is done.

Web server

A computer or program that delivers web content to be viewed on the Internet.

Responsive design

A design approach that enables a website display to change depending on the size of the viewport or screen, regardless of the device on which it is displayed

JavaScript

A high-level, dynamic programming language com

Native mobile application

A mobile application designed to run as a program on a specific device or mobile operating system.

Call to action (CTA)

A phrase written to motivate the reader to take action (sign up for our newsletter, book car hire today, etc.). Calls to action are usually styled differently from other copy on a page so that they stand out and draw attention.

Content management system (CMS)

A software system that allows an administrator to update the content of a website, so that a developer is not required.

Anchor text

A text link, or backlink, that refers visitors to your site from another with SEO benefits, passing relevance and authority from the referring site.

Universal Resource Locator (URL)

A web address that is unique to every page on the Internet.

3. Relevance

Above all, the content on the page must be relevant to the user and the purpose of the page itself. If a user clicks to read about a product but ends up on a page with content about the company, their experience is going to be tarnished.

Alt text

Alt text means alternative text. The 'alt' attribute is used in HTML to attribute a text field to an image on a web page. It normally has 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. Also called Alt tag

Fidelity

An interface design. A low-fidelity prototype will be basic, incomplete and used to test broad concepts. A high fidelity prototype will be quite close to the final product, with detail and functionality and can be used to test functionality and usability.

Proprietary software

Any software that one or more intellectual property holders own and license to others in exchange for compensation, subject to certain restrictions. Licensees may not be able to change, share, sell or reverse engineer the software.

Conversion

Completing an action or actions that the website wants the user to take. Usually a conversion results in revenue for the brand in some way. Conversions include signing up to a newsletter or purchasing a product.

1. Structure

Content needs to be written so that users can find the information they need as quickly as possible. The chapter on Digital copywriting will cover this in more detail.

Step 2: Design

Design usually happens before development. According to the steps explained earlier in this chapter, the designer will transform the planning materials into beautifully designed layouts. These are static images that show how the website will look once it's coded.

dpi

Dots per inch (in an image). On the web, the screen resolution is 72dpi.

Good UX is an excellent way to differentiate your brand in the market and give yourself a competitive advantage. If your online touchpoints are easy, intuitive and awesome to use, your customers won't have any reason to look elsewhere.

Good UX research and design allows you to find the best solution for your needs. Every business, website and online service is unique in some way, which means that the way it is constructed must be unique too

HTML5

HTML5 is the most current iteration of the HTML (HyperText Markup Language) standard. It is a broad range of technologies that allow for rich media content and interaction on websites that do not require additional third-party plugins. It allows rich multimedia content to be displayed and easily viewed by users, computers and devices.

Navigation

How a web user moves through a website and the elements that assist the user in doing so.

Information architecture (IA) is about managing information, taking a lot of raw data and applying tools and techniques to it to make it manageable and usable. Categories and pages should flow from broad to narrow. An intuitively designed structure will guide the user to the site's goals.

IA operates on both the micro and the macro level covering everything from the way individual pages are laid out, from where the navigation and headings are, to the way entire websites are put together.

Content strategy

In this context, a plan that outlines what content is needed for a web project and when and how it will be created.

Credibility

In this context, how trustworthy, safe and legitimate a website looks.

Metadata

Information that can be entered about a web page and the elements on it to provide context and relevant information to search engines. Metadata includes meta and title tags.

Common page elements

Items that appear on every page of a website. Cascading Style Sheets (CSS) A programming language that defines the styl

Step 1: Discovery and planning Planning a website starts with research of your market, your users, your competitors and your business. If you already have a website, you can use existing web analytics data to understand how well you are meeting your users' needs. It's also worth running some user labs to watch how users interact with your existing site.

Key questions you need to ask: • Business: What are your business objectives? How should this digital property help you to achieve those objectives? For example, should it generate leads for you to follow up on? Is it an eCommerce store? • Users: Who are your users, your potential customers? What problem does your website need to help them solve?

Breadcrumbs

Links, usually on the top of each page, indicating where a page is in the hierarchy of the website. Breadcrumbs can be used to help users navigate through the website, as well as act as a page index for search engines.

Plug-in

Often referred to as a module or extension, a piece of thirdparty code that extends the functionality of a website

Sitemap

On a website, a page that links to every other page in the website and displays these links organized according to the information hierarchy. While this is often physically available on a website (HTML sitemap), itshould also be created as an XML file and included within the Robots.txt.

2. Hierarchy

On the page, use an inverted pyramid style or F structure for your copy. The important information should be at the top of the page, to make for easy visual scanning. The heading comes first and is the largest and boldest type on the page. The subheading or blurb follows this and then the content is presented in a descending scale of importance. Sentences should be short and important words should appear early in the sentence, especially in bullet points.

Client-side

Scripts that run in a user's browser, rather than on a web server

Server-side

Scripts that run on a server, as opposed to a user's browser.