This document discusses best practices for web development and design. It emphasizes laying strong foundations by considering accessibility, usability, searchability and discoverability. Key recommendations include using standard conventions like bold text and bullet points, ensuring content is visible to search engines through metadata and alt tags, and testing sites thoroughly before launching. The document also covers opportunities and challenges of mobile development, such as small screens and navigation limitations on phones.

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 relevance
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. 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

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

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

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

15. Search engine optimised copy

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

17. 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.

18. Create visual identity and design for
persuasion.

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

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

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

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

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

26. 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.

27. 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.

28. Technology gives it life

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

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

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

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

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

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

35. Test it fully then take it live!

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

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

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

39. Mobile Development

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

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

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

43. One phone can do a lot

44. Why use the mobile phone for
marketing?

45. 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

46. Why mobile web development?

47. Provides both opportunities and
challenges.

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

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

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

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

52. But stick to web standards

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

54. Desktop

55. Mobile

56. 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.)?

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

58. Don’t use Flash

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

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

61. Develop a branded application

62. •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