Solution Overviews » General Hardware & Software » Website Design and Development
Website Design and Development
1. Overview
Website "design" usually refers to the visual layout, graphics and navigational elements of a web page. Design may start with an outline of the content to be included and page mockups. Most web pages include areas for a header, a navigation menu, body content and a footer. Body content may be made up of one, two or three columns. The areas can be reshaped and sized depending on what will be emphasized. Design is more art than science.
Website "development" typically refers to the programming needed to support the design. Website development projects can be challenging software development projects due to the number of languages, security considerations, browsers and integration of external content and applications.
Considerations
- Templates/Frameworks
While it is possible to program each web page individually, some type of template or framework is typically used for web development because it adds consistency and the ability to make changes across an entire website quickly. If the web developer is providing the framework, ask whether there is a licensing fee or whether it is yours to use and modify.
- Template/Framework Choice and Web Hosting
Most web hosts will support PHP (a server programming language) and MySQL (a database). If the framework for your website uses a different server-based language like Microsoft's Active Server Pages (ASP) or Sun's Java Server Pages (JSP), it may require a more specialized web host. The choice of database software may also require a specialized host.
- Search Engine Optimization
Search engine optimization (SEO) is partially based on the structure and content of your web pages and must be a key development consideration.
- Development Components
Shown below are some of the core technologies that may be involved in creating your website to give you some appreciation for what is involved and to scare you away from the idea of programming it all yourself unless you have web software development experience or you are using a WYSIWYG web page builder application.
The current best practice in web page development is to use XHTML — an updated and stricter version of HTML — for page structure and cascading style sheets (CSS) for as much of the style and layout as possible. Use of XHTML and CSS can help ensure that web sites are consistent, separate content from styling and allow for fast changes across an entire website.
- Web Page Structure: HTML, XHTML & XML
- Web Page Styling: CSS
- Web Page Graphics: JPG, PNG, GIF & Flash
- Web Page Client/Browser Logic: Javascript & AJAX
- Web Page Server Logic: PHP, ASP & Java
- Web Page Databases: MySQL, PostgreSQL & Microsoft SQL Server
- Integration
Identify whether you will need to integrate with other applications or other content available on the Internet. For example, you may want to display a list of all the products you sell from your accounting application or embed a Google Map for your location.
- Updates to Web Pages
Ensure that whatever approach you choose for web development allows you to easily make updates as needed.
- Dynamic Content
A website with content that changes frequently can keep visitors coming back. Blogs, forums and visitor comments are examples features that can add dynamic content. Databases are used to store content.
- Customization
Features outside a web framework can amount to custom software development. It is important to ask whether the web developer has experience doing what you need.
- Reporting and Analysis
What type of reporting do you need to track related to the activities of website visitors? Detail tracking may need to be built into web pages. Web hosts can provide basic statistics like the most popular pages and the number of visitors per day.
Design & Development Options
| 1. WYSIWYG Web Page Builder | 2. Content Management/ Portal Application | 3. Professional Web Design and Development |
|---|---|---|
|
Web development applications, also called WYSIWYG editors, allow a "do it yourself" approach to build web pages without touching the underlying programming languages such as HTML and CSS. You can purchase a web development application or use an application provided by a web host. Another related option is to use a pre-built web template that incldues all the HTML, CSS and images for a basic website. Templates range from free to under $100. Professional help will still typically be needed but it can be a good starting point. |
Content management, portal and blog software is very popular and most provide the infrastructure for both simple and complex websites. Most web hosts provide packaged installation because many of the solutions are open source and free. |
Hire a web designer and developer to build your website for you. |
2. Option Comparison
| 1. WYSIWYG Web Page Builder | 2. Content Management/ Portal Application | 3. Professional Design & Development | |
|---|---|---|---|
| Uniqueness | Low to Medium Initial web templates are "canned" and can be selected by any customer so there is a possibility that another customer will have a very similar design. However, there is usually the ability to customize various aspects which can increase uniqueness. |
Medium "Canned" formats are the default but different appearances or "skins" can be purchase to help differentiate websites. Customization may require professional help. |
High Most professional web designers and developers can work with you to make your website as unique as you would need it. |
| Flexibility | Low to Medium Changes may be constrained by the application so there may be no ability to change HTML directly. |
Medium to High It is usually possible to modify the server code but professional help may be needed. |
High A web developer should be able to do whatever is needed. |
| Cost Factors | Software | ||
|
Web hosts typically provide applications for free since you will be using their hosting service. Software cost ranges from $50 to several hundred dollars. |
Many applications are available for free and open source |
Usually not applicable |
|
| Labor | |||
Do it yourself, how much is your time worth? |
Some professional installation and configuration help may be needed. |
Professional design and development can range from hundreds of dollars to thousands of dollars depending on the features. |
|
3. Next Steps
| 1. WYSIWYG Web Page Builder | 2. Content Management/ Portal Application | 3. Professional Web Design & Development | |
|---|---|---|---|
| General Advice | Use when you need to get a basic website out fast and you aren't too concerned about being unique, adding special features or integrating with other applications and web content. | Use when content is of primary importance. | Use when you want a unique website, when you have special needs or when you need more assurance that the website is built correctly. |
Find Local Tech SpecialistsSearch TechShortcut's tech profiles for specialists in your area |
"Website Design" "Website Development" | ||
Find More InformationUse Research Helper to find related web articles |
WYSIWYG "Web Design" "Web Development" | Portal CMS "Web Development" | Professional "Web Design" "Web Development" |
Examples of Products and ServicesThese are not endorsements, simply some product or service names we encountered in our research to get you started finding your best fit. |
Web Host Website Page Builders: Website Page Builder Software: |
Blog
|
Search our directory for Web Design and Development Firms in your area. |
Outside Information
- Google Google's Search Engine Optimization Starter Guide
- opensourceCMS.com opensourceCMS
- W3Schools W3Schools Online Web Tutorials
Related Tips
- Tip 1 - Preparation:
Preparation is key to save time and money so do the following.
- Create a document outlining the pages you think you need and include any content you have.
- Create a list of any websites - including the competition - that can be used as examples of what you like or need.
Related Overviews
Research Helper
Find relevant information fast
Find Local Tech Help
Glossary
