This document discusses web development and design, including considerations for accessibility, usability, searchability, and discoverability. It provides guidance on site structure like navigation, headers, footers, and layout. Other topics covered include search engine optimization, visual identity, content management systems, mobile development opportunities and challenges, and testing mobile sites on emulators.

1. Web Development and Design

2. Digital assets like websites are at the
heart of successful digital marketing.
Customers and potential customers
interact with them.
Lay solid foundations and create
assets for the best possible user
experience.

3. Consider:
Accessibility – are there potential barriers?
Usability – is it easy to use?
Searchability – can it be found via
search?
Discoverability –shareable and
discoverable?

4. Technical barriers may be browser
compatibility.
User’s ability barriers could be
language or sight problems.

5. To address usability use standard
conventions:
•Highlight or make bold key phrases and
words
•Use bulleted lists
•Use paragraphs to break up information
•Use descriptive and distinct headings

6. Never!
•Resize windows or launch the site in a
pop-up
•Use splash pages

7. Never!
•Build a site entirely in Flash – most
search engine spiders cannot even
crawl Flash sites
•Distractusers with “Christmas Trees”
(blinking images, flashing lights, etc.)

8. Make sure your site is visible to search
engines:
Traffic is vital to a website. Index it
fully and consider it relevant for its
chosen keywords.

9. Things must be labelled correctly:
URLs, Alt Tags, Title Tags and Meta Data.

10. URLs:
Brief and descriptive
http://www.quirk.biz/emarketingtextbook/buy
details.q

11. May require server side rewriting so
as to cope with dynamic parameters in
URLs.

12. Alt tags:
Users need text descriptions of images
while they wait for them to load.
And search engines need to know what
the images are.
image001.jpg sunset.jpg

13. Title attribute: Read by search engine
spiders.
Seen when a user hovers over the element
with their mouse pointer.

14. Title tags: Appear on the top bar of
your browser.

15. Meta Tags:
Information about a web page, seen
by browsers.

16. Search engine optimised copy

17. If the search engine cannot see the
text on the page, they cannot spider
and index that page.

18. Search engines cannot index text:
•Embedded in a Java Application or a
Macromedia Flash File
•In an image file – use descriptive alt
tags and title attributes
•Only accessible after submitting a
form, logging in, etc.

19. Create visual identity and design for
persuasion.

20. Design is not just about aesthetics,
although looks are very important.

21. Visual identity = how users know
it’s you.
Use logo and corporate identity to inform
the colour palette, fonts, menu buttons
etc.

22. Navigation – show users:
•Where they are
•How they got there
•Where they can go next
•How they get home

24. Layout = how content is structured
and displayed.
•Apply the fundamentals of good design
•Balance in important
•They should be easy to read

25. Headers = the usually consistent top
part of a web page. Must be prominent
but simple.

27. Footers = the usually consistent
bottom part of the page. A place for
important info but also use this space to
include links to major parts of a website.

28. Credibility = telling users that you are
who you say you are. Make sure your
site:
Looks good; is informative; displays
testimonials, logos and awards; links
to credible third-party references; is
fresh and updated; is error free.

29. Technology gives it life

30. When building a site consider:
•Content management
•Interactive interfaces
•Search and usability

31. Manage content using a Content
Management System (CMS).

32. Some widely used CMS:
•Wordpress (www.wordpress.com)
•Joomla (www.joomla.org)
•Drupal (www.drupal.com)
•Expression Engine
(www.expressionengine.com)

33. A range of technologies are available for
interactive interfaces:
•Adobe Flash
•Microsoft Silverlight
•HTML5, with CSS3 and JavaScript

34. HTML 5 is the
latest evolution of
Hyper Text Markup
Language (HTML 5)

35. But remember technology is an
enabler, not a site’s main focus.
Consider SEO and usability.

36. Test it fully then take it live!

37. Testing should take place throughout
the entire process of planning,
designing and building.

38. Web development and design can be
seen as the thread that holds digital
marketing together.

39. Remember - Lay strong foundations
and understand your users needs!

40. Mobile Development

41. Mobile phones are changing the way we
access the Internet and communicate.

42. More than half the world’s population
use mobile phones.

43. Mobile technology is changing rapidly.
Next step
3G = 4G
EDGE(2G)
GSM
WAP

44. One phone can do a lot

45. Why use the mobile phone for
marketing?

46. 1. Personal
2. Always carried
3. Always on
4. Built-in payment system
5. Available at the point of creative
inspiration
6. Accurate audience measurements
7. Captures social context of media
consumption

47. Why mobile web development?

48. Provides both opportunities and
challenges.

49. Opportunities:
•Mobile websites – access to your
brand from anywhere!
•Mobile applications – connect with
the customer

50. Challenges:
•Small screens
•Navigation limitations
•File formats
•Connections and bandwidth

51. Mobile websites can reach a large
audience.
Mobile applications are more for
targeted niche audiences.

52. When designing, know that it will
almost never display across multiple
handsets...

53. But stick to web standards

54. Should it be a pared down version of
the original site?

55. Desktop

56. Mobile

57. Ask yourself why someone is visiting
your mobile site.
•Bored and browsing?
•Task driven and looking for information?
•Performing a repeated action (checking
the weather etc.)?

58. Do not use pop-ups, and keep scrolling
to one direction.
(http://www.w3.org/TR/mobile-
bp/#SCROLLING)

59. Don’t use Flash

60. Use emulators and recruit actual
contacts to test the content display

61. Some emulators:
•DotMobi -
http://mtld.mobi/emulator.php
•Test iPhone -
http://www.testiphone.com/
•Blackberry -
http://www.blackberry.com/developers/
downloads/simulators/

62. Develop a branded application

63. •Your brand can win a dedicated spot
and repeated attention from a targeted
consumer
•You can also extend brand identity by
offering utility or entertainment