Creating a website from content to structure to design

Mar 11, 2015 · 5 min read

Creating a website from content to structure to design -- Made In Helmikuu

Most website projects are very design-heavy. This is due to many reasons, one of them the rise of visual web. Website projects are design oriented also because of the over enhanced position of the designers. Unfortunately many of designers have only understanding of the aesthetics, but no knowledge of the technical aspects or even how people use websites. Additionally website projects usually don't include people with that sort of overall understanding of web and people using websites, and the technical understanding is included in projects as the last part of it. This is why design often comes before anything else in a website project. I have wrote about this subject before, but this is an updated look into the matter. In this post I will introduce you to an approach which helps in creating accessible, responsive and well structured websites, with emphasis in the content.

The approach is: Content → Structure → Design

1. Content

I know you are bored to hear that content is king, but there's truth to it. Content is what brings people to your website in the first place, makes them come back and engage with it. Content can be textual, images, videos or audio, and which ever type it is it's what comes first. Every website project, whether it's your personal blog which you design and build yourself, a website you hire someone to design and develop or a site you have been hired to design, needs to begin with the content. You need to figure out what kind and type of content the site will have and of course for whom the content is targeted. Content is the core of a website and it's the reason for the website to exist. Always concentrate on the content and make it the priority. Everything else comes later.

Users use your content to determine if there's value in your site. Generally people are sharing the content of your site and content is what they are searching. Of course in some cases someone may be sharing your site if it just looks cool, but unless the site has further value than the looks they will soon quit sharing it and most likely they won't come back very often. Why would they when they have already seen it all? Search engines also are concentrating to the content. Search bots use the text content to determine the keywords and the value of the site, and use the content as the main decision factor for showing the site and it's pages in search results. Content comes before any other parts of a website project and is always the main priority.

Content needs to always function towards the purpose of the website. If the purpose of the site is to inform, then the content has to be informative. If the purpose of the site is to be fun, the content is fun. Content is the ultimate way to create the tone and to tell what is the function of a site.

2. Structure

The importance of the structure has been intensified with responsive websites. It has however always been important to those of us who have understood that there are different devices, different browsers and different types of users. Structure is also important if you want your website to be found through searches, because search engines look at the underlying structure rather than the visual layer of your site. Well made structure helps with creating a responsive website, because then you don't have to unnecessarily hide elements or create many separate elements to be shown only for certain screen sizes.

The structure of a website is the way all the content is presented on a website. It's created with HTML, HyperText Markup Language. The structure tells how the contents relate to each other. For example a blog article page structure includes header area, where there's usually a logo or website name, main navigation and perhaps other elements. Then there would be the actual article area, which features an article title (usually <h1> tag), date, possible writer information and obviously the actual content. There may also be other elements to the page. Because the content towards the top of the page structure is generally seen as more important than the content towards the bottom it's a good idea not to make the header area too heavy with any secondary, non-important content.

Structure also works towards the accessibility and usability of your site. When structure is semantic and clearly made more people with different technical or physical restrictions can access your content with ease. Well structured website is faster. Too many elements, whether they are hidden or visible will eventually slow your website down.

3. Design

Of course the structure can be designed too as well as the content, but to make things easy I will refer to visible and visual layer of a site as design in this article. Rick Schennink introduces on Smashing Magazine design last approach. Design is to be treated as sort of make-up for a site: It's function is to enhance the value and features of the content and structure, but it's not the main value or feature. Design supports the content and the structure and improves the visual qualities of them. It's and addition to the content and the structure, and it bends to the demands of the content and structure. Thus the content and structure are not created by nor do they yield to the demands of the design. This is important and at the moment many website projects approach this the wrong way, from the design point of view.

Design does have great importance. It can apply towards the usability and it's what creates the first impression of a site. The right kind of look of a website helps conversions and even creates interest. Good looks don't carry your site far, but it gives your content and structure a little visual boost.

This approach is simplified and doesn't include certain things like technical possibilities or restrictions, or other similar parts of a website project. A website project must also to take in account server side limitations, the user side limitations (such as bad connections or different devices) and other aspects which may affect the structure and most of all the design. Therefore design comes last, even after the technical issues.


Multitalented Boost

With this free email training, you'll learn how to define and communicate your value, when you have multiple interests and skills.

Start now

Free training

Support Mervi and this blog

Become a Patron!

Thank you for reading Creating a website from content to structure to design. Did you like it?

Creating a website from content to structure to design Tweet this

I have closed the comments for now, but I welcome you to write your response to your own blog, or at Twitter or Facebook. In case you wrote your response on your blog, do let me know so that I can read it and possibly link to it from this post.

I will gloriously ignore (and, where possible, report) any responses which contain personal attacks, aim to troll or provoke for the sake of provocation, or seek to promote unrelated business or scams.