Developing Successful Websites


Published on

What are the steps in developing a quality website using the Sunny Side Up method.

Published in: Business, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Developing Successful Websites

  1. 1. DEVELOPING WEBSITES A step-by-step guide for (future) website owners
  2. 2. HOW TO READ THIS GUIDE? <ul><li>To follow are all steps involved in creating a successful website </li></ul><ul><li>All of these steps can be carried out by Sunny Side Up </li></ul><ul><ul><li>most of the time, site owners will take the initiative in some of them </li></ul></ul><ul><ul><ul><li>Especially, of course, in setting goals and a budget </li></ul></ul></ul><ul><ul><ul><li>Be careful not to underestimate time commitment and expertise required for each step </li></ul></ul></ul>
  3. 3. KNOW WHAT YOU WANT <ul><li>Ask yourself the question: “ what are the goals for my website? ” </li></ul><ul><ul><ul><li>Business efficiency? </li></ul></ul></ul><ul><ul><ul><li>Sell products and services? </li></ul></ul></ul><ul><ul><ul><li>Enhance the image of my company? </li></ul></ul></ul><ul><li>Write it down </li></ul><ul><li>Review it </li></ul><ul><li>Be specific </li></ul><ul><ul><li>e.g. “ sell more than 300 books a year ” is better than “ sell lots of books ” </li></ul></ul><ul><li>You may have several goals </li></ul><ul><li>Make it part of your marketing / business plan (do you have one)? </li></ul>
  4. 4. SET A BUDGET <ul><li>Now you know what you want to achieve, ask yourself: “ how much is that worth to me?” </li></ul><ul><li>This presentation focuses on website creation </li></ul>
  5. 5. PURCHASE A DOMAIN NAME AND SETUP HOSTING <ul><li>What is domain? </li></ul><ul><ul><li>E.g. </li></ul></ul><ul><ul><li>Like an physical address, but than on the internet </li></ul></ul><ul><ul><li>You can purchase more than one </li></ul></ul><ul><ul><li>Costs between USD10 and USD50 per year </li></ul></ul><ul><li>What is a host? </li></ul><ul><ul><li>Place to store your website so that it can be viewed by anyone on the internet </li></ul></ul><ul><ul><li>Host the site in the same country as intended website audience </li></ul></ul><ul><ul><li>Make sure that host provides suitable setup (liaise with Sunny Side Up) </li></ul></ul><ul><ul><li>May also host your email or you can keep separate </li></ul></ul><ul><ul><li>Costs between USD10 and USD50 per month </li></ul></ul>
  6. 6. FIND VISUAL STARTING POINTS <ul><li>What websites do you like? Why? </li></ul><ul><ul><li>Make a list of five competitors and five unrelated sites listing strengths and weaknesses </li></ul></ul><ul><li>Do you have a logo / corporate identity? </li></ul><ul><li>What colours are most suited to my audience and the message you have for them? </li></ul><ul><li>What colours do you use currently for your signage, your logo, corporate identity </li></ul><ul><li>Do you have any printed material (e.g. business card)? </li></ul><ul><li>Do you have any photographs, drawings, audio files, or videos that can be used? </li></ul>
  7. 7. DESIGN A WIREFRAME OF THE SITE <ul><li>Shows the relation between pages and usually looks like a tree, for example: </li></ul><ul><ul><li>Home </li></ul></ul><ul><ul><li>About us </li></ul></ul><ul><ul><ul><li>Shop history </li></ul></ul></ul><ul><ul><ul><li>Our clients </li></ul></ul></ul><ul><ul><ul><ul><li>Case study A </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Case study B </li></ul></ul></ul></ul><ul><ul><li>Shop </li></ul></ul><ul><ul><ul><li>Checkout </li></ul></ul></ul><ul><ul><ul><ul><li>Order Confirmation page </li></ul></ul></ul></ul><ul><ul><ul><li>Products </li></ul></ul></ul><ul><ul><ul><ul><li>Fruits </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Orange </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Pear </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Vegetables </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Broccoli </li></ul></ul></ul></ul></ul><ul><ul><li>Contact us </li></ul></ul><ul><li>Base it around questions from your visitors: </li></ul><ul><ul><li>who are they? How can I purchase fruit? What is their track-record? What is the latest news? How can I contact this business? </li></ul></ul><ul><li>Work out key ingredients for each page </li></ul><ul><li>Use post-it notes if you like (it is a brainstorm) </li></ul>
  8. 8. WORK OUT HOW MANY TEMPLATES YOU NEED <ul><li>Each template has a unique design </li></ul><ul><li>Some parts (e.g. photos, text area) can be editable using a content management system </li></ul><ul><li>One template can be used for one page (e.g. home page) or many pages (e.g. fruit pages) </li></ul><ul><li>Most websites are priced per template </li></ul><ul><li>Examples are: </li></ul><ul><ul><li>Home page </li></ul></ul><ul><ul><li>Information page </li></ul></ul><ul><ul><li>Contact page </li></ul></ul><ul><ul><li>Product page </li></ul></ul>
  9. 9. DESIGN TEMPLATES AS IMAGES <ul><li>Based in your design brief, we… </li></ul><ul><ul><li>Work with drafts and sketches first </li></ul></ul><ul><ul><ul><li>Even in the electronic format </li></ul></ul></ul><ul><ul><ul><li>Slowly work towards final design using constructive feedback and linking back to original goals </li></ul></ul></ul><ul><ul><li>Start with a primary template </li></ul></ul><ul><ul><ul><li>part of every page </li></ul></ul></ul><ul><ul><ul><li>Usually includes menu, logo, footer, and one ore more editable area </li></ul></ul></ul><ul><ul><li>How does the menu work? </li></ul></ul><ul><ul><ul><li>Base it around actions/questions from website visitors </li></ul></ul></ul><ul><ul><ul><li>Use standard conventions (e.g. about us, contact us, home) </li></ul></ul></ul><ul><ul><li>What sections need to editable by a non-technical person? </li></ul></ul><ul><ul><ul><li>Text, images and video section(s)? </li></ul></ul></ul><ul><ul><li>Design will alter slightly from real website </li></ul></ul><ul><ul><li>Remember that content will always change </li></ul></ul><ul><ul><ul><li>Design should allow for content changes (e.g. adding an extra menu item) </li></ul></ul></ul>
  10. 10. DON’T REINVENT THE WHEEL <ul><li>Reuse what others have done </li></ul><ul><ul><li>E.g. Setting up your own video hosting will cost thousands of dollars </li></ul></ul><ul><ul><ul><li>Why not us YouTube as a hosting service </li></ul></ul></ul><ul><ul><ul><li>Common practice </li></ul></ul></ul><ul><ul><li>Combining two third-party tools (e.g. image gallery and sms-text messaging service) is a lot more effective than building your own </li></ul></ul><ul><ul><li>Many online services have spent millions on development and are often are (almost) free to use </li></ul></ul><ul><li>Trade-off </li></ul><ul><ul><li>Loose some control </li></ul></ul><ul><ul><li>Reduced branding options </li></ul></ul><ul><li>Becoming more acceptable to use third-party providers </li></ul><ul><ul><li>Seen as way of the future </li></ul></ul>
  11. 11. SETUP CONTENT MANAGEMENT SYSTEM <ul><li>We set this up as soon as possible: </li></ul><ul><ul><li>Allows you to start adding/editing and deleting pages </li></ul></ul><ul><ul><li>Works with page types that match to the design templates created </li></ul></ul><ul><ul><li>Make a plan first but edit content straight into Content Management System </li></ul></ul><ul><ul><ul><li>Not helpful to create content in Word first </li></ul></ul></ul><ul><ul><li>Start adding pages as soon as possible </li></ul></ul><ul><ul><ul><li>Inevitable questions and additional requirements come up while adding content </li></ul></ul></ul><ul><li>Start simple </li></ul><ul><li>Discuss search engine optimisation </li></ul><ul><ul><li>How do you want to be found? </li></ul></ul>
  12. 12. SETUP WEBSITE “BACK-END” - FUNCTIONALITY <ul><li>Back-end is website “engine” – everything that is not visible for the website visitor </li></ul><ul><li>What we do (this is our core business): </li></ul><ul><ul><li>Decide what information is stored </li></ul></ul><ul><ul><ul><li>If you don’t store it – you can’t use it </li></ul></ul></ul><ul><ul><li>Main challenge is to extract a data model out of website requirements </li></ul></ul><ul><ul><ul><li>Structure ideas </li></ul></ul></ul><ul><ul><ul><li>How does information relate </li></ul></ul></ul><ul><ul><ul><ul><li>E.g. can a product be both a fruit and a vegetable or only one of them </li></ul></ul></ul></ul><ul><ul><ul><li>Main goal of the data-model is to limit data-entry </li></ul></ul></ul><ul><ul><ul><ul><li>Each piece of information should only be edited once and in one place </li></ul></ul></ul></ul>
  13. 13. APPLY “FRONT-END” DESIGN STYLING <ul><li>Front-end: everything that the website visitor can see. </li></ul><ul><li>Styling divided in two parts </li></ul><ul><ul><li>Layout on page – what goes where </li></ul></ul><ul><ul><li>Typography – styling of text elements </li></ul></ul><ul><ul><ul><li>headings, paragraphs, etc… </li></ul></ul></ul><ul><ul><ul><li>Consider font-sizes, line spacing, etc… </li></ul></ul></ul><ul><li>Font selection </li></ul><ul><ul><li>The web limits you to recommend fonts – you can not enforce font use </li></ul></ul><ul><ul><ul><li>Choose a widely available selection </li></ul></ul></ul><ul><ul><ul><li>Choose between serif and sans-serif </li></ul></ul></ul><ul><ul><ul><li>Limit to one or two fonts per site </li></ul></ul></ul>
  14. 14. ADD INTERACTIVITY <ul><li>Usually added last </li></ul><ul><li>Usually added to make things faster or easier </li></ul><ul><ul><li>E.g. doing things without reloading the page </li></ul></ul>
  15. 15. TEST WEBSITE <ul><li>Methodologically work through each page </li></ul><ul><li>Test each part of each page </li></ul><ul><li>Record any problems in such a way that they can be easily fixed </li></ul><ul><ul><li>When, where, and how did they happen </li></ul></ul><ul><ul><li>Take a screenshot if possible </li></ul></ul><ul><li>Fix errors (bugs) and repeat process </li></ul><ul><ul><li>Sometimes fixing one thing inadvertently brakes another part </li></ul></ul>
  16. 16. RELEASE WEBSITE <ul><li>Don’t advertise website on day one of launch (use soft-launch) </li></ul><ul><ul><li>Inevitably, there will be some teething troubles </li></ul></ul><ul><li>Be responsive to all feedback and keep improving </li></ul><ul><li>CHAMPAGNE! </li></ul>
  17. 17. FINAL NOTES <ul><li>Creating a website is a bit like publishing a book: </li></ul><ul><ul><li>the mechanics are easy enough, but filling the pages is harder </li></ul></ul><ul><li>The great advantage is of a website is that we can create it “chapter” by “chapter” </li></ul><ul><ul><li>It always works better to start small and build slowly </li></ul></ul><ul><li>There is no point in creating it if you can’t maintain it </li></ul><ul><ul><li>out of date presence is worse then no presence at all </li></ul></ul><ul><li>Keeping it simple is the hardest part but always wins </li></ul>
  18. 18. COMMONLY USED WORDS <ul><li>MYSQL </li></ul><ul><ul><li>Our database of choice </li></ul></ul><ul><li>PHP </li></ul><ul><ul><li>Programming language used to create back-end </li></ul></ul><ul><li>HMTL </li></ul><ul><ul><li>Used to write your website content structure </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Language that gives formatting to your html structure </li></ul></ul><ul><li>JAVASCRIPT </li></ul><ul><ul><li>Language that adds interactivity to your website </li></ul></ul><ul><li>FTP </li></ul><ul><ul><li>Moves files to and from host server </li></ul></ul><ul><li>SVN </li></ul><ul><ul><li>System to keep a copy of each version file of every file on your website </li></ul></ul><ul><li>CMS </li></ul><ul><ul><li>Content Management System, allows non-technical person to edit website </li></ul></ul><ul><li>Flash </li></ul><ul><ul><li>File that can be inserted into website –often used for advertisement or animation </li></ul></ul>