These slides formed the first half of my presentation/demo at London NetTuesday. The second half was a demo of building a polished Squarespace website from scratch in 35minutes. SUMMARY: Before web apps, creating a website was an expensive, time-consuming process that involved lots of specialists. Now, with a little know-how and some online tools, almost anyone can create a polished website without needing a team of people.

1. Sites that defy
the Reality Triangle:
Good, Fast AND Cheap
Miko Coffey BFA FRSA
www.usingmyhead.com
miko@usingmyhead.com

2. Reality Triangle
High Quality
Short Timeframe
Low Cost
• Say you can have 2 out of 3 but not all

3. Web Apps
• Web-based ‘software’ applications
• Replace expensive installed software or
offline processes
• Rely on volume/advertising for income
• Build it once, sell it over & over
• Remove technical barrier to entry
• Do it all from any web browser

5. Web Project Lifecycle
Before Web Apps
• Planning & Content Dev: Project Manager
‣ Source / coordinate suppliers, such as web
agency, hosting, content management system
(CMS)
‣ Coordinate copywriting and content prep; may
work with a Copywriter and/or Information
Architect
‣ Client-agency liaison

6. Web Project Lifecycle
Before Web Apps
• Design: Web/Graphic Designer
‣ Create/source logos & graphics (using Adobe
Illustrator)
‣ Source photography from Stock Agency (eg.
Getty Images)
‣ Create web page mockup in Adobe Photoshop
‣ Take feedback from client, tweak Photoshop
mockup(s) then present to client again (repeat as
necessary)

7. Web Project Lifecycle
Before Web Apps
• Build: Web Developer
‣ Slice Photoshop mockup into pieces to slot into
HTML pages
‣ Hand-code HTML pages / templates, sometimes
to fit an expensive Content Management System
(CMS)
‣ Test code to be cross-browser & W3C compliant
‣ Input contents into pages (may be delegated to
Assistant/Junior Developer)

8. Web Project Lifecycle
Before Web Apps
• Build: Web/Specialist Technical Developer
‣ Custom-build online forms, e-commerce shopping
cart or other functionality; bespoke or to fit CMS
‣ If using Enterprise CMS: requires specialist training
or use of CMS provider’s technical team to
understand how to adapt existing modules to fit
the client’s needs
‣ Flash, video or other rich media content requires
high spec / bandwidth server

9. Web Project Lifecycle
Before Web Apps
• To make changes to website content or
design:
‣ Client tells project manager
‣ Project manager tells agency
‣ Agency tells designer/developer to implement
‣ Client approves
‣ Client pays - in terms of ££ and time

10. YAY for web apps!

11. Web Project Lifecycle
After Web Apps
• Planning & Content Development
‣ Choose which website web app to use
‣ No hosting or CMS to choose in addition
‣ Still have to create GREAT content
‣ Still have to think about how best to present your
content to the online audience

12. Web Project Lifecycle
After Web Apps
• Design
‣ Create/source logos & graphics from online
marketplace or free WebApp such as Aviary.com
‣ Source free/cheap photography from
istockphoto.com, flickr.com or Stock Xchange
(www.sxc.hu)
‣ Edit photos/graphics (sizing, cropping, etc) in free
software such as Picasa or GIMP, or Aviary.com

13. Web Project Lifecycle
After Web Apps
• Build
‣ Paste contents from MS Word or txt document
into free/cheap hosted CMS such as Weebly, Wix,
Squarespace or WordPress
‣ Choose an existing free template to act as
starting point for web page design
‣ Upload logos & graphics, change colours, etc on-
the-fly to customise the site design to your wishes
‣ Template code has already been pre-tested for
cross-browser compatibility / W3C compliance

14. Web Project Lifecycle
After Web Apps
• Build - added functionality
‣ Create forms, shopping cart or other functionality
by installing plugins or embedding from other
WebApps such as Wufoo or MailChimp
‣ Host Flash, Powerpoint or other rich media
content on Vimeo, YouTube or other service and
link/embed into your web pages

15. Web Project Lifecycle
After Web Apps
• To make changes:
‣ Login to the site admin & make the changes.
Preview it on-screen, then go live.
‣ Client has control - may choose to have a web
consultant or designer/developer carry out
complex requests

16. Demo: Squarespace
• Hosted CMS - nothing else to buy/install
• Different levels of subscription give different
levels of site complexity/features
• Basic Pro account = same price as regular
hosting
• VERY intuitive interface
• Visual design editor requires NO custom
CSS or programming knowledge to create
unique designs

17. squarespace.com

18. aviary.com - create banners / resize logos

19. colourlovers.com - choose colour palettes

20. tools.dynamicdrive.com/gradient/ - make gradients

21. istockphoto.com - stock photos from £1

22. Web App Website Tips
• Make a sketch and/or outline of your site
before you start (a napkin will do!)
• Prepare all text content in .txt or .rtf format,
not MS Word .doc
• Have everything ready in 3 folders:
‣ Content - for all txt content pages
‣ Design - for logos / design elements
‣ Photos - for all photos
• Remember you can change anything easily later

23. Let’s Go!

24. Thank You
Miko Coffey
My portfolio of Squarespace sites:
http://usingmyhead.squarespace.com
www.usingmyhead.com
miko@usingmyhead.com
mob: 0794 100 5431
twitter: mikosoft
skype: miko.coffey