Hello everyone.
On Sitepoint a lot, we have these discussions about the “right” way to design sites (i.e., basically developing and designing it in tandem, instead of developing to match a Photoshop comp).
Does anyone have any articles written on this subject which I can quote to others, or maybe pass on to others to help them understand why this is the right way to go about it?
Thanks.
Beautiful, that was just the kind of thing I was looking for.
Thanks.
I second that!! Thanks Kohoutek.
That article was brilliant, its very true though. People should start mocking up their designs in browsers first these days. Photoshop can be a bit of a nightmare.
It seems my post was deleted by the “Post Quality Police”, hereby known as the PQP. I’ll try to write a more “meaningful” expression of the gratitude I feel towards Kohoutek for posting a link to this wonderful article, which led me to spending a couple of hours when I should have been sleeping learning about best practices for modern webdesign as well as bookmarking several more sites for future learning as well as writing down the names of several big name web designers to learn from.
Having read comments in response to my thread on “Best Practices”, I too was scouring the web for articles on the “right” way to build web pages. This article was exactly what I needed.
I hope others will post more of this same type. In fact, I’ll pass on a few that I’ve read today on the topic of “progressive enhancement”.
A Series by Aaron Gustafson from AListApart:
http://www.alistapart.com/articles/understandingprogressiveenhancement/
http://www.alistapart.com/articles/progressiveenhancementwithcss/
http://www.alistapart.com/articles/progressiveenhancementwithjavascript/
These articles really helped me gain a much deeper and rich understanding and appreciation for progressive enhancement. I hope they serve you well.
Thanks CRTolbert.
I think you’re was accidentally caught up in some spam cleaning (there were some others besides yours that were wiped). I’ve reversed that.
Thanks for the helpful followup. =)
Progressive enhancement is one of the most vital “techniques” to understand on the web today, and sadly one of the most often neglected or overlooked. Progressive enhancement (and it’s partner graceful degradation) aren’t a nice to have, but an absolute must in my opinion.
Why stop at the web – lets skip the modeling/design/blueprint/etc, planning stages of building vehicles and buildings while we are at it. Who needs to visualize anything in the simplest of forms anyway. Just completely and utterly useless, the whole process.
Oddz, what would you suggest the “right way” is to a person who is new to web design?
You should start by learning HTML then CSS.
Learning HTML and CSS will teach you the limitations and usability patterns that exist which are critical to understand for any web professional – design or otherwise.
From there than you can start focusing on aesthetics/look and feel/layout using things like Photoshop or Illustrator to create mock-ups/wireframes.
So… simply put this is where you might start.
Design… is really a whole other piece of the matter. Ideally you should submerse yourself in fundamental design than graphic design reading material. Than merge that knowledge with the technical knowledge to design and build sites.
Thanks oddz. That book is actually what led me to this site. I’m going to have to bite the bullet and get it.
It’s definitely worth it. I’ve been at this for quite a while, and I still got several useful bits from that book.
It’s a great book well worth it. Though I have only read the first edition but one can assume it is just as good as when it initially came out.
I like adding all divs dividing them into different colours and after I put in all the content, I don’t know if thats a bad way though since I come up wich content ideas as I build up my divs but I think the article is right tho’.
I think the article is correct. I never use Photoshop or any other graphic program to mock up my sites. I code them first, I also have used the same method of coloring the divs and then placing content in after. I always just code my sites and photoshop backgrounds, logos, icons, etc when needed.
“Never” using it is probably not the greatest way to do things.
The reason I want to use this approach is to avoid creating sites in Photoshop that are unrealistic to create in HTML/CSS (without massive amounts of extra CSS and images). Since our design is done by someone other than the developers, it’s tricky to do that with the “traditional” (i.e., Photoshop) method.
However, we still do lots of visualization before we start building. We create lots of wire frames and use-cases (on paper), then build the framework.
From that point, we’ll use HTML and CSS as we would to build it out. You don’t have to visualize it in a graphics program if you are fast enough with HTML and CSS that having to throw away a few attempts won’t hurt.
However, if you are just starting out, doing some very basic wireframing in a graphics program probably would be much faster.
Honestly, there were better pages up six or seven years ago than there are now – I have a hard time pointing anyone at materials I could even THINK about recommending at this point – Print or Web. I mean there’s the 2nd edition of IAN’s book, but since 3rd edition pisses all over itself by going HTML 5 I’m really not even comfortable mentioning it anymore; It’s all either gone away or been supplanted by the sleaze pages out any-old-way like it’s 1997 crowd.
As evident by just about every new website I’m seeing out there and why the Internet as a whole is less useful to me than it was a decade ago.
Designing a site the ‘right’ way - seems like an oxymoron to me. There is a lot of wasted time and space over the argument of how to create sites properly. Linking to articles, while they may be highly regarded, they are still a matter of opinion. There are so many factors that can have an effect on how a site should be created and every site is different.
If there was a standard way, there would be an established policy for it, much like there are standards for HTML & CSS. HTML& CSS standards are important, they should be adhered to and your site should reflect these standards once completed. However, how you come to that point, is unimportant.
Think of the end result. Your website is live, it works, is valid HTML & CSS, loads quickly and works on most if not all resolutions/browsers. It looks and works how you wanted from the moment you started. Users will browse your site with ease. If you have satisfied your target audience, you have designed your site the “right” way.
Content is core. However, this goes without saying. For without content, what is the point of having a site at all?
I agree there isn’t one right way, but there are better ways then others (and there are some wrong ways).
Like I said, there are times when Photoshop is appropriate. But I’ve seen more than my fair share of times when it’s not.
There are lots of ways to bake a cake. Usually cooking it for six hours on 800 degrees isn’t one of them. What you wind up with may technically be a cake, but it doesn’t serve the same purpose. 
Yes I agree, there are many ways to bake a cake. But to continue using the analogy, if I have a piece of cake and it’s delicious, I don’t care how it is made, I’ll keep coming back for more cake.
There are two ways of looking at this question:
What is the best way to design a site and what is the best way for a site to be designed. I guess from my background I take the word ‘design’ as the literal noun as the process of planning and visually constructing an initial concept that I later intend to develop. However ‘web design’ has changed the meaning of ‘design’ as it now contains not only planning, but also things like production, post production and more.
So I guess we need to address the first part first: how should one design (plan, conceptualize, layout) their website. Then we need to address the second part: how should one design (build, construct, implement) their website.
With reference to your first post, you mentioned ‘basically developing and designing it in tandem, instead of developing to match a Photoshop comp’. My belief is that there should always be 2 parts to web design (design and development) that will almost always interact with each other. You develop while you design and you design while you develop. But I don’t think they should be one and the same.
I don’t think the notion of ‘oh I’ll just design it while I build the HTML/CSS’ is a healthy option. It could turn out to be quite inefficient. Before you start on HTML/CSS you should have a clear layout and content structure in place so that your design is built around that structure/layout.
Anyway, I think I’m getting off track here, nor am I posting any articles. My bad…