• Like
Developing Successful Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Developing Successful Websites

  • 704 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
704
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

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