Website Making Howto

From Notes

Contents 1 Ideation 2 Howto / Philosophy 3 Sketch the design/workflow 4 Build the prototype 5 Design, Look & Feel 6 Technology Howto 7 Coding Howto 8 Technology Options 9 Testing 10 Mobile version 11 Performance 12 Operations 13 Scalability 14 Analytics 15 Security 16 API 17 Launch 18 Miscellaneous 19 Open Licensing 20 Name 21 Feedback / Customer Engagement 22 Business Plan 23 Marketing 24 Money 25 Funding 26 Further Resources

[edit] Ideation

• How do you get Good Ideas for Startups? by Paul Graham
  • Ideas that YCombinator wish someone was working on
• How to Evaluate a new Product Idea by Evan Williams
• Make Meaning in Your Company by Guy Kawasaki
• How to Sell an Idea

[edit] Howto / Philosophy

• Strategic Design: 6 Steps For Building Successful Websites by Smashing Magazine
• Don't treat software as an artifact, but as a process of engagement with your users -- Tim O'Reilly
• From Powerpoint to Webapp
• The Hardest Lessons for Startups to Learn by Paul Graham
• Entrepreneurial Proverbs list by O'Reilly Radar
• Lessons Learned while Building Basecamp
• Iterate
  • Why It's So Important To Just Start by Jason Calacanis
  • Find the gradient, then follow it by Paul Buchheit
  • "Release early, release often" lesson in 'The Cathedral and the Bazaar' by Eric Raymond
• How Google Grows...and Grows...and Grows
• How to Become a Rifter by Seth Godin

[edit] Sketch the design/workflow

• Paper Prototyping
• Prototype with XHTML
• An Introduction to Using Patterns in Web Design by 37 Signals
• The Getting Real online book by 37 Signals
• How To Write a Good PRD (PDF)
• Balsamiq Mockups
• Uniqueness of the website

[edit] Build the prototype

If you want somebody else to build it for you:

• Pragmatic Technology Solutions

If you are building it yourself:

• Have an organized workflow
• Use the same tools for prototyping that you would use for your production website
• Use a good RAD web framework
  • Depends on language, capabilities required and deployment options
• (Languages, frameworks, etc. are mostly based on personal taste, so no recommendations are listed here, but there are plenty to choose from)
• Use an IDE
  • 35 Useful Source Code Editors reviewed by Smashing Magazine
  • Komodo IDE

If you are clueless of what you want, there is a website that provides free preview at no charge:

• Do First Pay Later

[edit] Design, Look & Feel

• Philosophy
  • "Don't Make Me Think!" by Steve Krug
    • Most important take-away : Don't make the user think - we should be able to use the site without effort, without thinking about it.
    • We don't read pages, we scan them.
    • We don't make optimal choices. We "satisfice" (first reasonable option).
    • We don't figure out how things work. We muddle through.
    • Design websites for scanning, not reading (like billboards)
      1. Create a clear visual hierarchy on each page
      2. Take advantage of conventions
      3. Break pages up into clearly defined areas
      4. Make it obvious what's clickable
      5. Minimize noise
• Thoughts
  • Content is King.
  • Less is more.
  • Make it personal.
• Designing for Programmers
  • Pragmatic Book - Web Design for Developers: A Programmer's Guide to Design Tools and Techniques
  • Why Programmers Suck at Picking Colors
  • Why Programmers Suck at CSS Design
  • Feature foods by 37 signals
• Mobile UI for viewing on mobile phones.
  • The Mobile UI Pattern Library by Little Springs Design
• Reduce cognitive load
• Concepts
  • Design Howto at Design Meltdown
  • 12 Steps to Creating a Professional Web Design
  • 9 Essential Principles for Good Web Design
  • Usability and Interface Design Books list by Smashing Magazine
  • 10 Principles Of Effective Web Design by Smashing Magazine
  • Are there 10 Commandments of Web Design?
  • 10 Usability Nightmares You Should Be Aware Of by Smashing Magazine
  • eXperience Design group at Adobe
    • The Flex Interface Guide
  • 6 Keys to Understanding Modern CSS-based Layouts
  • Get In Shape
  • Visualizing Fitts's Law
  • Pattern Resources
    • 5 Great UI Pattern Resources
    • Yahoo! Design Pattern Library
    • Pattern Library by Welie
    • 40 Creative Design Layouts: Getting Out Of The Box by Smashing Magazine
• Color Schemes
  • Adobe Kuler community
  • Website Color Trends
  • Color Blender
• HTML
  • Open Web Design for HTML themes
• Flex
  • Scale Nine for Flex themes
• Icons and Logos
  • Icon Finder for icons
  • Free Stock Icons for Your Next Application
  • How Web 2.0 Logos are Drawn - a Photoshop tutorial
  • Free Stock Icons for your Next Application
  • VectorTuts
• CSS
  • CSS Frameworks + CSS Reset: Design From Scratch by Smashing Magazine
  • Free CSS Templates
  • CSS Zen Garden - showcase of CSS
  • Dynamic Drive CSS Library
  • 40 + CSS Tools
• Visual Effects
  • 10 Smart Javascript Techniques to Improve Your UI
• Need to get a good enthusiastic designer
  • How to Choose the Right Web Developer
  • Possibilities
    • BuildItWithMe - a networking site for developers and designers to find each other to work with, whether for fun or for profit
    • Divya Manian
    • Chugs Hussain
    • Surya/Harsha of adventure
    • Aashish Solanki
    • Guru.com for freelancers
    • Indian Web Devs forums
• Design inspirations
  • Screen Fluent
  • Web Creme
  • 45 Excellent Blog Designs by Smashing Magazine
  • 50 More Excellent Blog Designs by Smashing Magazine
  • CSS Tux theme directory
• Miscellaneous
  • 13 Amazing Firefox Add-Ons To Make Designers Lives Easier
  • Freebies by Smashing Magazine
  • 99 designs to crowdsource any designing
  • Web Development Goodies Bag

[edit] Technology Howto

• "Building Scalable Websites" book by Cal Henderson
• Infrastructure for Modern Web Sites

[edit] Coding Howto

• Layers
  • 4 Layers of Separation
  • BuiltWith - profiles which technologies are used in a given website
• JavaScript
  • 75 (Really) Useful JavaScript Techniques by Smashing Magazine
  • RegexPal
  • Live Validation
  • Introducing YUI by Smashing Magazine
  • MapsTraction - a "cross-platform" Mapping Library
• CSS
  • Improving Code Readability with CSS Style Guides
  • Powerful CSS Techniques for Effective Coding
• Backend
  • WordPress Database Design - 1, 2

[edit] Technology Options

• Desktop development
  • PHP: Vertrigo
  • Python: Instant Django
• Web Frameworks
  • PHP: CoughPHP + LightVC or CodeIgniter or Symfony or CakePHP
  • Python: Django or Pylons or many others
• Desktop deployment options
  • Flex or AJAX + Adobe AIR
  • Flex + Zinc
• Technologies
  • Facebook's Thrift for Web Services
  • Mashery for Web Services Infrastructure
  • Amazon Web Services - S3, EC2, SQS, etc.
    • Programming Amazon Web Services book by O'Reilly
• Hosting
  • VPS (Virtual Private Servers) at Linode/SliceHost/VPSFarm
    • How to setup your VPS
  • How to Find the Best Host for your Site

[edit] Testing

• Cruise Control.rb for testing
• BrowserShots to get screenshots on different browsers

[edit] Mobile version

• iPhone Likeness - same principles apply to mobile-friendly websites
• W3C Validation of Mobile-friendly website

[edit] Performance

• Best Practices by Yahoo! Exceptional Performance Team
• 15 Tools to Help You Develop Faster Web Pages
• Presentation on Even Faster Web Sites

[edit] Operations

• Operations is a competitive advantage... (Secret Sauce for Startups!)
• Deployment options such as Fabric or Puppet
• Splunk for monitoring all your servers, logs, etc.
• Continuous Deployment
• How to backup your webserver
• How to hide development projects available on the internet

[edit] Scalability

• Building a Scalable Architecture for Web Apps video by Bhavin Turakhia
• Building Scalable Websites book by Cal Henderson
• : High Performance Web Sites: 14 Rules for Faster Pages video by Steve Souders
• Scaling Early
• Videos from the Google Scalability Conference
• Lessons in Building Scalable Systems by Google Talk team
• Scalability and Scalable Architecture Video Lectures - a huge list
• Architecture Template
• Make Your Site Run 10 Times Faster
• Scaling would mean (as discussed in irc.freenode.net#slicehost):
  • A server for the storage/database, may require sharding
    • Multiple servers with replication/synchronization
  • Multiple web servers
  • A reverse proxy in front to do load balancing
  • Would not be required unless you have 10,000+ users, etc.
• Amazon Web Services
  • Media hosting
  • Build an Infinitely Scalable Infrastructure for $100 Using Amazon Services
• Perlbal in an interview about the making of Pownce.com
• Hardware recommendations by Jason Hoffman
• YouTube Architecture
• Amazon Architecture
• Useful Firefox extensions

[edit] Analytics

• Google Analytics
• 10 Promising Free Web Analytics Tools
• CrazyEgg for visualizing the data

[edit] Security

• Secure Password Schemes
• The Definitive Guide To Website Authentication (beta) on Stack Overflow
• Why SSL? on Hacker News

[edit] API

• OAuth for authentication
• OEmbed for embedding media
• ProgrammableWeb's list of APIs

[edit] Launch

• The Ultimate Website Launch Checklist

[edit] Miscellaneous

• 30+ Great Adobe AIR Apps for Designers and Developers
• Use Crypt::GeneratePassword to generate username and password for MySQL database, etc.
• Use Data::Faker to generate fake data for testing out the application.
• Content editing with Markdown in a GUI manner, instead of Rich Text Editors directly creating HTML and markItUp! Universal markup editor or even WysiHat
• Rich Text Editors comparison
• SMSIntegra for sending SMS updates.
• How to fix MySQL databases
• Mailing List software

[edit] Open Licensing

• Open Data Commons' Public Domain Dedication and Licence
• Open Data at Web 2.0, and Wesabe's "Data Bill of Rights"

[edit] Name

• What's in a name?
• Do a domain hack
• Check domain name availability at net4india

[edit] Feedback / Customer Engagement

• User Voice for customer feedback and voting
• g|Tail.rb - realtime logfile visualization
• Queen Bee

[edit] Business Plan

• So you've Got an Idea. Now What?
• Business Plan format
• Business Models
• Guy Kawasaki on The Art of Raising Venture Capital
• NEN India Knowledge Bank
• Numbers Game
  • Reports by Internet & Mobile Association of India
  • Internet Reports by PEW
  • Population Statistics by UN
• Anatomy of a Good Business Plan - Combination of Strategic, Operational and Tactical Plans!
• Demystifying a Business Plan - What makes one stand out from the rest?

[edit] Marketing

• Marketing has Five easy pieces by Seth Godin
• How to Build a High-Traffic Web Site (or Blog) by Steve Pavlina
• Unleash Your Ideavirus (PDF)
• Allocating Marketing Resources (Harvard)
• Startup Marketing Advice by Balsamiq
• Top 10 Tips To Get Your Startup Noticed
• Beginner's Guide to Search Engine Optimization

[edit] Money

• Choices for e-commerce transactions
• Adsense Revenue
  • Use the Google Website Optimizer
• PayPal
  • Integration
  • Solutions

[edit] Funding

• Startup Financing by pluggd.in
• Is your Startup Fundable?
• Early Stage Technology Entrepreneurship and Incubators in India

[edit] Further Resources

• What should a developer know before building a public web site? discussion at Stack Overflow
  • 24 must-have elements for your business website
• Web Development Tools and Links: A Wealth of Resources!
• Resources list at ScaleNine
• Web Design Resources
• Web Design
• Smashing Magazine weblog
• Signal vs. Noise weblog by 37 Signals
• The Best of YCombinator discussions