Which should we create first: the content, the layout or both at the same time?

[jmatty2000]

Hi

I'm a beginner with html, css and asp. I've tried to make a decent website before but it is never fully finished. I'm just experimenting with MS WebMatrix and a little ASP so I will get further this time.

Question: Which should we create first in order to create the best layout :

the content?

the layout?

or a combinination of both at the same time? which would mean constant adjustments to the css.

Any advice or help is appreciated.

Kind Regards

Matt

[DaveMaxwell]

It's all about the content, baby!

You should always develop with the content in mind. The prettiest, flashiest, sparkliest site in the world won't matter if the content matter inside the site is useless.

[jmatty2000]

Hi Dave
I thought you could be right. I asked the same question in another forum and they wrote :-
It's always been layout first anywhere I've worked. Layout with dummy text and images, this is agreed with the client then content and functionality is added to this template

I see your point because, if you do the layout first, then the content then you could end up having to re-do all of you layout again thus duplicating your work!! including all of the fine adjustment to margins etc...

A book I read said do both the layout and content first.

Also if I wrote a MSWord document, I would write the content first, include paragraph, check the grammar and spelling then the content. So what your saying makes perfect sense to me.

cheers
Matt

[DaveMaxwell]

Don't get me wrong, a lot of shops typically do it layout first, then try to shoe horn the content in.

Guess I should explain my interpretation a little more clearly. You don't have to have the content written 100% before you start the layout. This in itself could be counterproductive because if it takes too long to develop, the content can get too old and have to be changed anyway.

What you do need to account for first is the type of content you're going to have, and ensure you've got enough to make the site interesting and engaging, and organized in a manner which makes sense and is easy to get to. It's a fine balance to walk - people don't want to hunt for the information, but they also don't want to have to page through a very limited site with a ton of information crammed into one page.

[jmatty2000]

Hi Dave
Then its no wonder that I've tried and failed so many times to create a website. I've got a website now but had to resort to making it a WordPress sites in end.

Thanks for your advice so I will be able to do something amazing now.

Cheers
Matt

[Stevie D]

It's always been layout first anywhere I've worked. Layout with dummy text and images, this is agreed with the client then content and functionality is added to this template

A lot of people do it that way, but that doesn't mean that it's the best way.

I'm not saying that you write up all your content first before you start thinking about the layout – up to a point they can be co-dependent. What you have in the content informs the layout, but at the same time you might also want to restrict or change the content so that it fits better with the layout you want. It isn't a case of "one first, then the other", it's an iterative process where you're constantly going back and forth.

You need to have a rough idea of what content you want to present, in order to create an optimum layout. Drawing up a basic layout template might work if you just have basic content that can be shoe-horned in, but the more complex your content, navigation, page structure and everything else becomes, the more it is likely to look shoe-horned in ... and that isn't a good look.

The fact that other people are treating the visual design as the first priority, and the content as an afterthought, speaks volumes about what they see as the purpose of a website ... ie, that it is something to look pretty and make them money. The whole concept about it having a purpose and function to impart information and generate business for the client is anathema, they're not interested in that. I don't know about you, but that's not how I would want my website designed! The whole purpose of a website is, well, to have a purpose. And that purpose is, in the vast majority of cases, in the content and the interaction. That means that you need to have a design that serves the content, not content that fits the design, because then you're likely to be compromising the essential function of the site.

[felgall]

Any useable layout will consist of an arrangement of content blocks. Before you can create the layout you need to know what type of content will go in each block so that you can define the sizes of the blocks to suit the content that they will contain.

[StevenHu]

It makes sense to ask the client what kind of content he wants on the site. A corporate site will be different from an artist's portfolio site, for instance, and necessitates entirely different approaches to the design template. What is really, really important to the client for the home page: showcasing their products with flashy photography (Apple), an e-commerce emphasis, the latest news, or what? Who is the audience and for what purpose is that person visiting the site? Will it be geared to older people, or to younger visitors accustomed to mobile phones?

Sitepoint has aired several blog series on the design process, and gathering information from clients. Look those up. They will be very helpful.

[jmatty2000]

Hi Steven
Thanks for this advise. In my case, I'm designing a web-site for myself to be like a journal website to keep track of where you are in life.
Regarding searching this web-site, do I just click in the advanced search and type say 'design process'? Also can give give me an example blog series so that I start on the right path towards how to design the layout. I also get a bit confused with which colours to you but I guess thats a different story.
Cheers
Matt

[StevenHu]

I'm glad my advice was helpful. You can go here and scroll through the list for business topics: http://www.sitepoint.com/category/business/

Also visit Sitepoint's home page and scroll down and read the headings. Click on the categories so see more articles belonging to that section.

This Sitepoint site has articles on web design that may be helpful for you: http://designfestival.com/

[molona]

It's always been layout first anywhere I've worked. Layout with dummy text and images, this is agreed with the client then content and functionality is added to this template

This is true for many designers because they work with customers do not know exactly what they want and/or have no clear idea of how a website can work for them and their business.

Content always goes first for all the reasons that have been explained here. But I want to stress the importance of what has been said.

Although you may not have all the content, the more you know about the business and the more content you have, the better.

What your customer (and you, as a developer) definately should know is the type of content that will be published and the categories and structure. It also helps to know if the content will be added regularly, the frequency of the updates, etc.

First, because the organization of that content will be necessary to do a proper navigation system as well as to adapt any search engine script that you use in the site.

A good organization system is essential to the success of one site, people don't like to click too much to get the information that they're looking for. And to do that, the classification system, the categories, etc. has to be very clear. So when you have enough content to know the type of articles the customer will write, and the length and other details, then it is so much easier to know if the system chosen for classifying the different articles is the right one.

Once the organization is clear, you can go to the design phase. Again, having at least some content helps because you will be able to see if the design really fits with the content or you should adapt to longer articles, or shorter paragraphs, etc.

[jmatty2000]

Thanks Malona. I found your words quite comforting for some reason. Anway....

Since my last post, I've been reading a few various blogs about how to design the layout. Some developers really got for the grid type layout and others go more rounded friendly looks.

Hopefully I'll find the right look!! I suppose I have to understand that the first web layout I do will always be the hardest!!!

Cheers
Matt

[prince55l]

when you want to build a site, you should already know the content of that site, all you have to do is reasearch more and make your content great, because content is what makes users to visit your site not layout. Having said that, layout and site design determines user engagement on your site, so have a great content and create a beautiful layout with css and you will have a great site

[dresden_phoenix]

I think our industry needs new terms.

It is best to design around a CONTENT PATTERN. Merely requesting "content" is bound to confuse and spook clients. Heck, even when I do print jobs, many clients don't know exactly what they want to say, but they can specify "3 headlines and a list". Which is really what you need to know to build your wire frame.


For example , you have a site featuring user profile. You don't really need an actual CONTENT of a BIO, you need the desired content elements to structure:

USER NAME:
USERID
USER IMAGE
JOIN DATE
BIO ( and a decision whether this could contain multiple paragraphs or not ; maybe= YES)
CREDITS ( a list of things )
etc.


And , unlike print, the web is NOT nor SHOULD BE pixel perfect you don't need to worry about whether a headline is 5 words or 15 or a bio is 50 words or 500 anyway.

[milla_ulliel]

Sometimes the layout can be confusing, but the same concerns for the content so... the first thing everyone see is the layout and it has to be attractive for the eye and then it comes the content which is more important, but if the layout it's not worthy nobody will read the perfect content. They are related Dreamwell

[webcosmo]

The designer should imagine what the content would be and when he designs he should think ahead and imagine all the functionality the website will have, so everything is with the content in mind. Of course , that designer should also know a tad of coding...

[jmatty2000]

Hi
I'm just reading a good book called Beginners HTML and CSS by Wrox. It recommends along the same lines as what webcosmo says. It says that first of all I need to understand the purpose of the website, who its intended for, what basic content I want to include, the prioritise the most important parts first with a view to have it running with the most important parts working at least as far as the audience are concerned. Then it starts talking about using a 12x12 grid to lay everything out into 3rds to make it more appealing to the eye. It also recommends that I base it on a 960px width or check what most users size screen is being used first.
Has anyone else anything to add to what the book recommends. This is the first book I've seen that mentions the 12x12 grid and using 960px wide which is a breath of fresh air to me as that really does help to get it clearer about how to set a website out.
Kind Regards
Matt
p.s Thanks to everyone who has kepy adding to the thread.

[ralph.m]

This is the first book I've seen that mentions the 12x12 grid and using 960px wide which is a breath of fresh air to me as that really does help to get it clearer about how to set a website out.

Yes, it helps to have something clear and simple to start with. Personally, I prefer to use my eye to judge balance in layout (I hear you snorting, graphic designers, but meh ...), so grids are just an annoyance to me. But in terms of fixed width layouts, their problem is that they are not very practical for the web, which is a fluid medium that has to deal with many screen sizes. So hopefully we will one day be rid of fixed width designs, but they have their place for now, I guess.

[jmatty2000]

I keep seeing the term Responsive Website (Fluid?) design - would you say that I would be better to learn about that and skip learning about grid layouts. Or would I be better to do at least one website using the grid layout theory and then move onto Responsive Web Design.

[ralph.m]

I would pass over grids for now and look at responsive design. Grids aren't really about web coding at all. They are more of a design principle.

[babuvai]

I think, at the beginning you should create a beautiful layout. Because it will help you to get a lot of visitor for beauty. Then post helpful content. It is better.

[ralph.m]

I think, at the beginning you should create a beautiful layout. Because it will help you to get a lot of visitor for beauty. Then post helpful content. It is better.

I think, at the beginning you should read whole thread before posting. Because it will help you to get a lot better at web design. Then post helpful content here. It is better.

[evemper]

I think we first make layouts and then add content into the site, A well developed / coded site never have any issue with its content , one can add the content as he/she moves on with the website, So i prefer to have a good layout and then content.

[ralph.m]

I think we first make layouts and then add content into the site, A well developed / coded site never have any issue with its content , one can add the content as he/she moves on with the website, So i prefer to have a good layout and then content.

I recommend you read the other responses in this thread.

[Handdy.com]

Having worked on some websites, I find that whatever goes first there are always changes to both that I have come to the conclusion it does not really matter :|

Haha, but I agree that, to start with content goes first, and then the layout. This is because, you need to know what you are going to convey first (content). Then depending on it, you come come up with how you are going to covey it (layout).

Good luck!