Your SlideShare is downloading. ×
0
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Developing Successful Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing Successful Websites

724

Published on

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

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

Published in: Business, Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
724
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
85
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DEVELOPING WEBSITES A step-by-step guide for (future) website owners
  • 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. 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. 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. PURCHASE A DOMAIN NAME AND SETUP HOSTING <ul><li>What is domain? </li></ul><ul><ul><li>E.g. www.mysite.com </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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×