Razworks Web Design Sarasota – The Anatomy of a Website

Websites have become an integral part of our everyday life. At the touch of a button, websites provide us with unlimited resources to information and communications. We can access websites from just about anywhere in the world, and with a variety of devices such as laptop computers, mobile phones, game consoles, and even televisions. We use websites to read daily news, shop for products, research school assignments, and communicate with friends and family. But what is a website?

Almost every person knows what a website is. But most people don’t know what a website is really comprised of.

What makes up a website?

Actually, some web design projects are rocket science, but the most are for small business.

The Foundation of a Website

A website requires 3 tangible items to exist:

1. A domain name, such as yourname.com, to define the website’s Internet address or URL.
2. A website hosting server, to store the website files and connect or broadcast those files to the Internet.
3. The website files, which at minimum is a single static HTML document, but more commonly a sophisticated database application like WordPress.

The website foundation will always incur initial startup costs.

These costs are somewhat standard throughout the website design industry and are as follows:

1. A domain name typically costs around $12 per year, but certain domain extensions can cost as low as $5 or as high as $50.
2. A website hosting server can have numerous configurations, costing as little as $100 per year or as much as $1000 per month.
3. The website files are commonly developed and implemented by a professional website designer. This service can cost anywhere from $500 to $50,000.

The Website Layout

A website layout should not be confused with website design, as they are two completely separate entities:

The website layout uses template ‘blocks’ to define how various web page components are displayed. These ‘blocks’ are somewhat standard in modern websites:

1. Header: the very top of the web page, usually displaying a logo and/or slogan.
2. Primary Navigation: buttons or links to the top level pages in the website.
3. Content area: usually the center of the page just below the header, where the active content is displayed.
4. Sidebar(s): narrow column(s) to the right or left of the content area.
5. Footer: The bottom of the web page, usually displaying identity information, sometimes displaying additional navigation and/or widgets.

Determining the type of website layout you want prior to beginning the web design concept phase can significantly reduce the time and costs involved in producing the final web design.

The image displayed here identifies the layout blocks of the most popular website layout on the Internet.

The most common website layout is contained within a number of PHP template files, typically named for the respective component: header, page, sidebar and footer. When a webpage is accessed, the PHP application assembles these template files to produce the entire web page.

The Website Design

The graphic design of a modern website is completely separate from the coded template files that produce the website layout. This method is more search engine friendly than old school hard coded designs, and allows a website’s layout or design to be easily updated independently from one another.

The website design is composed of primarily two types of components

1. Images, either Jpeg or PNG
2. CSS coded programming scripts to define visual styles.

The PHP template files that define the various layout blocks are hard coded with id names to their respective CSS styles. For example, let’s say our header area has a class name of “header”. In the CSS stylesheet file, there is also a class name of “header”, and this CSS entry has defined specific image, size and color properties. The PHP template, sees the hard coded “header” id name and connects to the CSS stylesheet file to retrieve the display properties for the class “header”. The layout block is then rendered with the image, size and color properties specified in the CSS stylesheet file. This method allows the visual design styles for all website pages to be defined globally in one single document, which has numerous benefits.

The old school method of website design, which became obsolete in the mid 2000′s, was to hard code all of the design properties into each web page separately. This required you to edit every single web page when making minor design changes. The current CSS method requires only one edit to the CSS stylesheet file, and every single website page is immediately updated.

The old school method used HTML Table tags to define the layout of a webpage. Table tag layouts produced web pages with excessive amounts of code, also known as ‘code bloat’. Back in the early 2000′s, the Google search engine crawlers experienced difficulty scanning and indexing websites with table based layouts. Google’s demand for cleaner, leaner website pages helped fuel the Web 2.0 CSS revolution. This change in coding methodology also allowed websites to evolve into the sophisticated and powerful web applications that we enjoy today.

Another drawback to the old school use of tabled HTML layouts is cumbersome and restrictive design editing. To modify the design of a website with an HTML table layout, the original Photoshop file needed to be opened and edited in Photoshop. When the Photoshop editing was complete, the file was exported using a “Slice to HTML” exporter. This cut, or sliced, the Photoshop image into numerous smaller images contained within numerous HTML table cells. The new HTML file along with the numerous new images were uploaded to the website, overwriting the old files. Then the web designer crossed their fingers and hoped that nothing went wrong. Often times the website would end up broken, requiring time consuming troubleshooting and repair.

The modern CSS method eliminates all of that hassle. Just open the CSS stylesheet file in any text editor, edit the properties that need to be changed, save the CSS file and upload to the website. The changes are complete. What used to take an hour or more now only takes one minute.

The Website Layout Blocks

Thus far, we have determined that a website is composed of layout blocks and those blocks are styled with CSS scripts and images to produce the visual design. Now let’s discuss the content and various website widgets and functionality.

The Website Content Area

The content area of the website is always the primary focus and utilizes the most space of any layout block.

The content area of a website contains the text and media for the active web page. The content area typically uses a paragraph and word wrap format, with text sizes and colors defined globally by the CSS stylesheet file.

The website content area most often contains simple text and images in a paragraph format. Video and audio can also be placed within this paragraph format, as long as video player software is installed. In some cases, custom designed components may be desired, such as a grid format or custom image presentations. In such cases, custom HTML/CSS development is usually required.

The Website Sidebar Area

Sidebars are narrow columns to the right or left of the content area.

Sidebars can contain just about anything that fits in a 200 pixel area, which is the common width of a website sidebar. With a modern website CMS, like WordPress, widgets are often used in a sidebar. Widgets are mini-web applications to provide ancillary functionality. Here is an example of widgets commonly used in the sidebar:

1. Navigation: buttons or links to other pages in the website.
2. Search field: to search the website by keyword or phrase
3. Recent Blog Posts, comments, etc.
4. Random photos
5. Calendar
6. Schedule
7. Image links
8. Text
9. Location Map
10. Facebook and Twitter buttons

The list of widget functionality you can place in a website sidebar is virtually unlimited.

On an average website, the sidebar has the same widgets and content on every page on the website. But you can create multiple sidebars and assign different sidebars to various web pages.

A two column website has one sidebar and the content area. The two column layout is the most common website layout. Nine out of ten websites on the Internet have a two column layout. The right sidebar is most common in a two column layout, as the left sidebar is old school and research has proven it to be less efficient than the right sidebar.

A three column website has two sidebars, one to the right and left of the content area. Some three column website have both sidebars to the right of the content area, producing a double sidebar appearance.

FREE Consultation:

Need a Custom Website? We can create custom configurations of any of the above packages. Call us for a quote:

941-685-8851

Shopping Carts?

Looking for an ecommerce shopping cart website? Click here for our shopping cart design>>

Add Search Engine Optimization SEO services to any Sarasota Web Design package, and save 20%.

To learn more about our Sarasota search engine optimization SEO services, click here>>

To learn about the relation between Sarasota web design and SEO services, click here>>

To learn about the Anatomy of a website, click here>>

To learn about the Website Design Process, click here>>