sites that defy the reality triangle: good, fast and cheap
Post on 18-Oct-2014
2.847 views
DESCRIPTION
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.TRANSCRIPT
Sites that defy the Reality Triangle:
Good, Fast AND Cheap
Miko Coffey BFA FRSA
Reality Triangle
• Say you can have 2 out of 3 but not all
High Quality
Low Cost
Short Timeframe
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
Web Project LifecycleBefore 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
Web Project LifecycleBefore 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)
Web Project LifecycleBefore 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)
Web Project LifecycleBefore 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
Web Project LifecycleBefore 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
YAY for web apps!
Web Project LifecycleAfter 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
Web Project LifecycleAfter 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
Web Project LifecycleAfter 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
Web Project LifecycleAfter 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
Web Project LifecycleAfter 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
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
squarespace.com
aviary.com - create banners / resize logos
colourlovers.com - choose colour palettes
tools.dynamicdrive.com/gradient/ - make gradients
istockphoto.com - stock photos from £1
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
Let’s Go!
Thank YouMiko Coffey
My portfolio of Squarespace sites: http://usingmyhead.squarespace.com
mob: 0794 100 5431twitter: mikosoftskype: miko.coffey