How To Create A Website

relativecommotion
web print identity consulting
How to Create a Website
A PRIMER AND FIELD GUIDE 2014 Edition
Relative Commotion | 4920 Cedar Avenue, 2F, Philadelphia, PA 19143 | (215) 701-3118 | info@relativecommotion.com 2014 Relative Commotion. All Rights Reserved.
relativecommotion
How to Create a Website | 2
Table of Contents
I II Introduction Types of Websites a b c d III a b c d IV V Static Website Content Management System (CMS) Custom Web Application Feature: Mobile-Friendly Design
Quality of Website Cheap Budget Professional Agency
Process Overview Implemention a b c d Teaching Yourself Design Skills Teaching Yourself How to Code Choosing a Paid Consultant Working with a Paid Consultant
VI
Conclusion
relativecommotion
I. Introduction
So you want to make a website, huh? Whether you want to learn to design and code the website yourself, or you want to hire someone else to do it, this document will walk you through the process. If you feel overwhelmed by the task ahead of you, never forget: A thousand mile journey begins with the rst step. - Lao Tzu. Break up your task into smaller, more digestible sub-tasks, and just do the next thing that needs done. Before you know it, you will be staring at a living, breathing website!
HOW TO USE THIS GUIDE

Please note that this guide is not meant to make you an expert by the time you are done reading it. It is meant to be used as a primer for you to begin embarking on the journey towards creating a website or working with a consultant or agency. In any case, after reading this document you will be well-versed in the process, terminology, and expectations for doing a website project. This guide assumes that you have little to medium knowledge of web design. Dont get discouraged if you dont understand certain things. Re-reading certain parts and researching into terms you dont understand will build up your confidence over time. You will notice that key terms and phrases have been bolded. These are important words to know. The guide provides references to many resources for you to learn more about specific steps in
the process. Becoming proficient at designing and coding a website will take years, but learning the basic process can happen very easily.
WATCH THE VIDEO

We have also created a video component that includes an audio narration and useful screen captures to illustrate all the content of this document. Please check it out at: createawebsite.relativecommotion.com
relativecommotion
II. Types of Websites

There are primarily three types of websites. Each has its own pros and cons, depending on what you need your website to do.
1) STATIC WEBSITE
A static website is just web code that is entirely run on the front-end, in the viewers web browser. In other words, there is no back-end system that manages content and manipulates things on the server before being passed off to the viewer. So this means you have a series of web files coded in HTML (Hyper Text Markup Language; used to markup your text with different elements that can be formatted and styled) and CSS (Cascading Style Sheets; a set of rules one can create that determine the layout and styles of the elements). If you need to update a static site, or add content to it, you will need to know how to modify the code, and then reupload the files to the server. This type of site is good if you just need a singlepage website that is primarily used for giving information, or you have a website that you will not need to update often. This is the cheapest option to implement, but the most tedious to deal with if you need to add content frequently, dont have a web designer to work with, or dont know how to code yourself.
2) CONTENT MANAGEMENT SYSTEM (CMS)

A CMS adds an easy-to-use, back-end administrative system to the website. It replaces static content areas with dynamic modules or sections that render content pulled from a database that is managed by this system. The most basic example of a dynamic site is a blog which outputs a list of recent posts. The CMS allows a user with little or no experience with coding to login and add, edit, or remove content. Content that can be added is typically in the form of pages or posts. More advanced systems also have various content modules that let you edit little snippets of content that can be placed in various sections on your website. Usually there is some sort of WYSIWYG (what you see is what you get) editor, that allows you to create the content as you want, without needing to know HTML/CSS code. Gmail, and most other popular online email clients, uses a WYSIWYG editor to let users add formatting options such as bold, italics, and smileys. There are many CMS options to chose from. Pop-
relativecommotion
ular CMS products include Wordpress, Joomla, and Drupal. Wordpress started as blogging software, but then was extended to make all sorts of different types of websites, thanks to its large developer community that has built many different plugins that its extend the basic functionality. Examples of Wordpress plugins include: an image gallery, an appointment booking app, and an event manager. Joomla and Drupal tend to be used for sites that have lots of content, such as online news websites, and/or sites that need some sort of user account system.
the views to be rendered. For example, you may have an application that stores student grades at a high school. One view may display the average grade for a History class. In order to get this information, the controller needs to pull all the raw data from the model, and then do some calculations before passing it onto the view to be rendered. Example functionality that is usually best accommodated for by a custom application includes: custom user accounts and mass content posting (i.e. Twitter), e-commerce (i.e. Amazon), social media sharing (i.e. Facebook), interfacing with geospatial data on a map (i.e. Googles Maps), and matching algorithms (i.e. OkCupid and Match. com). Building a custom web app is typically the priciest option, but also the most versatile. If you are building an online business, you are most likely going to need a custom web app.
3) CUSTOM WEB APPLICATION

This is the most advanced type of website. When an existing CMS product becomes too generalized and clunky for what you need to do, you will need to build something from scratch. The word scratch is really a relative term though, in that a web application is almost always built on top of some other framework. The most popular web application frameworks for custom applications include Ruby on Rails (built in the Ruby programming language), Django (built in the Python programming language), and Zend (built in the PHP programming language). Typically web frameworks utilize a structure called MVC, or model view controller. Models are what make up the database, where the content of the site is stored. Views are the front-end templates that render the content. And controllers are what manipulate the data in the back-end before sending it to
FEATURE: MOBILE-FRIENDLY DESIGN

A mobile-friendly website is one that has a different design for mobile devices so the content can be easily readable and interacted with on a smaller screen. The latest development of this trend is called responsive design, or design that changes dynamically as a function of the screen
relativecommotion
width. This is in comparison to an older design trend which would have two entirely separate websites: one for mobile, and one for the web. A simple example of responsive design would be making a multi-column layout with a navigation bar on a desktop, into a single-column layout with a dropdown navigation menu on a mobile device. Responsive design is actually a feature of a website, and not an additional type, because it can be implemented on any of the above three types of websites. The reason for this is that responsive design can be done entirely in the frontend HTML/CSS files of the site, without needing to mess around with the back-end system, if one is being utilized. This is done through the power of media queries in the CSS, which allow you to apply a particular set of styles to only a specific browser width rangei.e. you could have one set that only applies when the browser width is above 1200px (desktops), and one set that only applies when the width is below 768px (mobile browsers). It is important to note that usually non-mobilefriendly websites will display on mobile devices by showing up as automatically zoomed out. This is a built-in feature of most mobile web browsers. So it is not completely necessary to implement a mobile-friendly design if you dont have the time or a budget for it, but your site will definitely be much more accessible to a mobile-crowd if you do, and it will be better prepared for future it-
erations. Because of our increasing reliance on smart phones and mobile technology, mobilefriendly design is becoming increasingly important. It is going to be a must-have feature as we move forward into the future, as they say mobile is the new desktop. If you are looking to build a mobile app, building it as a responsively-designed web app is often a much more cost effective solution than building it natively in the language of iOS, Android, or another mobile operating system. This is because a responsively-designed web app can be viewed and used across all mobile devices using their web browser, whereas an app coded for iOS would only be usable on that device. It can be very costly to have to build it natively in other languages if you are trying to make it usuable for other mobile devices.
relativecommotion
III. Quality of Website

There are many dierent levels of quality you can get for your website. Much like buying a car or building a house, the higher you spend, the higher quality you will get. But it also depends upon the skill of who you hire, which is discussed later in this document.
CHEAP (< $300)

If you want to get a really cheap website created, then you can either go with a website builder software, use an existing CMS template, or teach yourself how to code. Here are some popular website builders: Squarespace.com
BUDGET ($500 - $1,000)

Typically in this price range, you are going to want to hire a student web designer. This is someone who is still learning the ropes of web design and development, and would be willing to make a website for a cheaper fee because she is still developing her portfolio. Here are a few colleges to look for student web designers in Philadelphia: UPenn
Wix.com Strikingly.com NationBuilder.com
If you just need something simple to promote yourself, your business, or your project, you probably get get away with using a website builder and come up with a decent website. However, the design of your site may look better if you buy a precreated template. If you wanted to go with this route, just Google Wordpress themes and you will find some great options. You can create a website on Wordpress.com and they will help you to implement the theme that you want. If you want to learn how to code, see section V of this document.
Temple Drexel UArts
You want to be looking for their computer science or interactive/digital media departments. Contact those departments and ask them for students who are looking to do freelance work, and they should be able to direct you properly. Usually they can forward email messages to the list-servs of relevant student majors in those departments. Be specific about what your needs are and what your budget is.
relativecommotion
PROFESSIONAL ($2,000 - $10,000)

For individuals looking to make a personal website, or for small businesses, this is probably the tier you should aim for. For this price, you will typically be working with a single freelancer, who can do both the designing and coding for your website. Two websites you can check out for freelancers are the following*: Elance.com
AGENCY ($10,000 - $25,000+)

This category is for web agencies and consulting companies. If you hire these guys, multiple people will be assigned to your project to work on it, potentially including a project manager, a designer, a programmer, and a copywriter. If you are trying to build a website for a medium to large organization or you need to build a custom web application, this is probably the price tier you want to go with. To build a custom web application you probably should have a minimum budget of $20,000. So obviously before you embark on this you want to make sure you have validated that what you are doing is going to bring in profit. Check out the Lean Startup Methodology and Design Thinking to get help with this. Here are some agencies and development shops in Philadelphia that we recommend*: Neomind Labs - dev shop specializing in Ruby on Rails apps www.neomindlabs.com
Guru.com
However, we personally recommend working with a freelancer who you have been referred to by someone you trust. In this light, here are some trusted freelancers that we recommend*: Sayra Lopez www.sayralopez.com
Mel Miller www.ultramel.com Gabriel Liwerant www.abrightconcept.com Ben Rodigas www.benrodigas.com Whitney Krape www.whitneykrape.com Jeff Frankl www.frankl.org
PromptWorks - dev shop specializing in Ruby on Rails apps www.promptworks.com Heres My Chance - agency specializing in web campaigns and social causes www.heresmychance.com Symmetric Infinity - dev shop specializing in iOS apps and mobile web apps www.symmetricinfinity.com
* Please note that because our founder, Justin Broglie, is often busy with his own projects and endeavors, he typically will refer potential clients to other agencies and freelancers, which is why we have listed them in this document.
relativecommotion
IV. Process Overview

This is the process that we follow when working with clients at Relative Commotion. Whether you decide to work with an agency or learn to design and build a website yourself, this roadmap is a helpful way to approach the task and will prevent you from feeling overwhelmed.
1. PLAN
In this phase we brainstorm all the site content and functionality needed for your site, and map this out into a site architecture diagram. The project design and style preferences will be discussed as well. It is helpful here to braindump anything needed.
2. LAYOUT
Based on your needs, we will explore some generic layouts for websites and decide on a few you like best for your content, brand, and functionality. We will then place your content into three black and white layouts.
3. DESIGN
Using the layout that you like the best, we will create and apply two different design styles to work with. Based on your feedback, we will refine the design until you are satisfied to develop it into HTML/ CSS code.
4. DEVELOP
Once the style has been finalized, we will code the designs into HTML/ CSS to be ready for launching on your web server. As we develop the site, we will host it on a private development server so you can view the progress over time.
5. TEST
In this phase we rigorously test the website to make sure it performs well, thereby minimizing any surprises post-launch. This includes testing it out on all the major browsers and on mobile devices. All the functionality of the site will also be tested.
6. LAUNCH
Aftering setting you up with a web hosting package, we will upload the website files and go live. We will create a plan for future maintenance to the site, such as content updates, style iteration, and optional training on how to update the site yourself.
relativecommotion
V. Implementation
Now that you have an overview of the types of websites you can create, at what quality, and the general process that ensues towards making your project a reality, it is time to actually start taking action. If you have a budget, it is generally very benecial to work with a professional. It could also be useful for you to teach yourself the process of designing and coding.
TEACHING YOURSELF DESIGN SKILLS

If you want to learn design, you will probably want to start with just mere observation of good design. Start to notice the layout and style of websites when you are browsing them. Perhaps start a bookmark collection of websites you like. Get a free graphics editing program, such as GIMP, or invest in the industry standard graphics software: the Adobe Suite. The two best products for web design are Adobe Photoshop and Adobe Illustrator. You may want to take a class at a community college on graphic or web design. Check out the following websites to stay up to date on good web design: www.smashingmagazine.com
TEACHING YOURSELF HOW TO CODE

Learning to code is a highly valuable skill to have in todays society. And you will end up saving yourself a lot of money if you know how to deal with the backend cogs of your own website. Though it definitely can feel overwhelming to teach yourself, just take baby steps and get all the support that you can. Here are some recommendations for you to get started: download and install a good text editor (we recommend Sublime Text)
do tutorials online; here are three great places: a. Code.org b. CodeAcademy.com c. Treehouse.com d. W3schools.com take classes at a community college pay a freelancer extra money to give you a few training sessions on how to update
www.css-tricks.com www.webdesignerwall.com www.dribbble.com www.alistapart.com
relativecommotion
your own website (hourly rates typically are $60-$100/hr in Philadelphia)
on the scope of the project. When you are working with a consultant, particularly a designer, it is her job to take your lofty and potentially abstract vision and craft it into reality. In this light, give her everything youve gotjust braindump everything you want and all of your ideas, such as: existing websites you like
CHOOSING A PAID CONSULTANT

Whether you are working with a single freelancer or with an entire agency, here are some tips you want to follow. When you are trying to choose a paid consultant to work with, you want to make sure they have a portfolio of work that you like and that has similar content to what you want. Ask for client testimonials if you feel a need to get a better feel for them, or if you have a very big project. It is very important that you work with someone who has good people skills. You could be working with the most highly skilled programmer in the world, but if he cant communicate with you well, it will be a very frustrating experience.
color schemes you like typefaces that you like keywords, phrases, and feelings you want to the site to evoke
Though your designer needs to channel your vision and your tastes, keep in mind that she will have her own tastes too, and sometimes you should heed to her professional opinion. It is definitely okay to compromise sometimes, and this is often what happens between a designer and a client.
WORKING WITH A PAID CONSULTANT

It is very important that you meet in person at least once, as technology-enabled meetings can really dampen communication. When you meet in person, a consultant can really get a feel for the energy you want to bring into the project. Ideally, you would be able to meet in person throughout the whole process. Typically 3-5 meetings will be needed, plus a few phone calls, but it all depends
relativecommotion
VI. Conclusion
We hope this guide has been helpful for you! We have taken you through the whole process of creating a website. Hopefully now you have a better grasp of all that it entails and feel condent to move forward in your website endeavors. In any case, keep learning and stay connected to the web design community.
QUESTIONS/COMMENTS?
Please let us know if you have any additional questions or any feedback on this document! You can contact us at: info@relativecommotion.com

How To Create A Website - Relative Commotion - 2014

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Create A Website - Relative Commotion - 2014

Uploaded by

Copyright:

Available Formats

relativecommotion

web print identity consulting

A PRIMER AND FIELD GUIDE 2014 Edition

How to Create a Website | 2

Quality of Website Cheap Budget Professional Agency

How to Create a Website | 3

HOW TO USE THIS GUIDE

WATCH THE VIDEO

How to Create a Website | 4

II. Types of Websites

2) CONTENT MANAGEMENT SYSTEM (CMS)

How to Create a Website | 5

3) CUSTOM WEB APPLICATION

FEATURE: MOBILE-FRIENDLY DESIGN

How to Create a Website | 6

How to Create a Website | 7

III. Quality of Website

CHEAP (< $300)

BUDGET ($500 - $1,000)

Wix.com Strikingly.com NationBuilder.com

Temple Drexel UArts

How to Create a Website | 8

PROFESSIONAL ($2,000 - $10,000)

AGENCY ($10,000 - $25,000+)

How to Create a Website | 9

IV. Process Overview

How to Create a Website | 10

TEACHING YOURSELF DESIGN SKILLS

TEACHING YOURSELF HOW TO CODE

www.css-tricks.com www.webdesignerwall.com www.dribbble.com www.alistapart.com

How to Create a Website | 11

your own website (hourly rates typically are $60-$100/hr in Philadelphia)

CHOOSING A PAID CONSULTANT

WORKING WITH A PAID CONSULTANT

How to Create a Website | 12

You might also like