Foo - How wide should I design a website?

I'm building a website that will eventually become a small online store. Because I'm more familiar with photoshop, I'll be making it there, slicing the images, and a friend of mine will import it into dreamweaver. I remember in high school I took a class that dabbled in web design and the teacher always suggested making the site 800px wide, so anybody with 800x600 can view it without scrolling sideways. That was six years ago. Does anybody still use 800x600? I haven't seen anyone run less than 1024px wide for a few years. Would it be prudent to keep it 800 wide, or can I expand that a hundred pixels -- or even push it to 1024?

Why not design a render that will work on multiple resolutions?

Web Design Ledger (http://webdesignledger.com/) is a pretty good resource. As for the 800 px resolution, you'd be terrified to see what some people are still using.

Why not design a render that will work on multiple resolutions?

Because I'm a noob. I'm making a pretty design in photoshop that's a fixed width.

Keep it simple. You don't want to build a website that is dependent on screen widths. Lots of folks now are using internet enabled phones and other minimal graphics interfaces. Keep that in mind.

17 feet, six inches.

Not everyone wants to view at full screen width even if they've got the room to spare. I own a 17" MacBook Pro, but if you make a page that requires 1024 pixels horizontal to look right, it won't look right when I first visit your page at my typical browser window size. 800 pixels across is reasonable. If you want me to give you 1024 pixels, you'd better have a REALLY good reason. Pretty isn't a good reason. Do you REALLY need more than 800 pixels across for good functionality, good ergonomics, and an uncluttered feel?

The overwhelming majority of monitors now display natively at 1024 pixels or wider, but there are plenty of people like my parents who turn the screen resolution down to increase the view size because it seems simpler to them than changing the font and icon sizes for their operating system. :rolleyes:

There's also an increasing number of users with mobile devices that are 320 pixels wide or even smaller. Realistically those are best served using a second stylesheet, but since you've already said you plan to build the site fixed as a photochop, that's not much use to you.

For my website, I used a fluid layout that defines widths as percentages of the screen width using CSS.

For what you're doing, I wonder if it might be wiser to help them set up a hosted ecommerce service. It's taken almost two decades, but there's finally starting to be decent looking and flexible options for small businesses to conduct online sales without the upfront expense of building and hassle of maintaining the site themselves. It's not ideal for all, but it's an option.

Jschen, you've convinced me: I'll make it 800px. I too sometime don't use my entire window to view websites, especially when I'm pretending to be productive at work. I didn't think of that!

The other reason I'll make it 800px is because the product for sale will most likely be purchased by middle-aged people and above. I don't expect them to be rockin 24" widescreens :D

Is a homepage size of 125kb too large? I expect it to be around that, but definitely not over.

I do plan on learning Dreamweaver; I've already begin delving into CSS and plan on making a full CSS version of the site for mobile devices. Going with a pre-packaged ecommerce website is against everything I stand for. It is not, never has been or will be an option. I appreciate the suggestion, it's just that I want this to be a learning experience for me.

Remember to allow for scroll bars on the side, borders in windows (whatever the typical size in WinXP should be fine), etc. You don't get to use ALL of that 800 pixels! To me, 125 kB for a homepage seems a bit excessive, but by modern standards, it's acceptable. Heck... Google's homepage takes up approximately 100 kB (just checked).

Liquid design that adjusts to any resolution (gracefully degrading for a set minimum width) is best.
Set widths are so 90s and scream "amateur!" (or "clueless marketing weenie with a print background")
Set width of only 800 is even worse.

Make it wide enough for chipcom's ass.

Using a fixed width (750 pixels of content, centered on a boring background) on their corporate website didn't stop ITA Software from becoming an industry leader. It didn't scare away $100 million of venture capital during a time when VC deals were all but nonexistent. And it didn't deter Google from deciding to buy the company for $700 million. There is nothing wrong with a design that's simple and functional. It's not that the ability to adjust to other resolutions is bad. But it's not necessary, so for PC2's first webpage, I'd recommend simple and functional. Plain functionality beats eye candy without substance any day. And for just getting started, it will be a lot easier to troubleshoot and maintain.

Disclaimer: As an ITA Software consultant, I am a bit biased.

building a online store is a solved problem lots of pre-built web store fronts available, the idea of framing out a webpage and then cutting it up to fit html tables is pretty archaic nowadays and in my recollection is/was apropos "brochure ware" websites.

if you're set on "building" it your self, I'd start with one of the many available css templates that you can find in various places online and go from there.

Obviously the consensus is that a liquid design is best. This is accomplished by CSS, correct? I don't fully understand. Will the banner I create be scaled down?

Photoshop has the option to either use CSS or html tables.

You can achieve a lot of scalability by using width attribute in percents over pixels.
i.e. <img src="whatever.jpg" width="80%" />

Make it wide enough for chipcom's ass.

jscharr already said that

jscharr already said that
Is 17' 6" wide enough?

Does this server make my website look bigger?

Liquid designs, imho, are only useful where the end user has some control of the content, like iGoogle. Fixed width designs tend to look and function best for content merged into a static presentation, ala Facebook - fixed at 1024 - and the second most visited site on the web.

3200px wide! (dual 1600x1200 here)

Make it wide enough for chipcom's ass.

whoa, I may need a bigger monitor!

Liquid designs, imho, are only useful where the end user has some control of the content, like iGoogle. Fixed width designs tend to look and function best for content merged into a static presentation, ala Facebook - fixed at 1024 - and the second most visited site on the web.

This is what us old purists call "print" and marketing" thinking. Just because a site is popular does not mean that it is as usable and accessible as it could be, which could make it even more popular...and perhaps even encourage old grouches like me to consider joining. ;)

Optimally, the site would be able to present the same content in a wide variety of presentations, based upon the user-agent and the user settings we can sniff on the client side. Meh, I'm rambling. Your point is perfectly valid, just not my way of thinking. ;)

Does this server make my website look bigger?

:lol:

Using a fixed width (750 pixels of content, centered on a boring background) on their corporate website didn't stop ITA Software from becoming an industry leader. It didn't scare away $100 million of venture capital during a time when VC deals were all but nonexistent. And it didn't deter Google from deciding to buy the company for $700 million. There is nothing wrong with a design that's simple and functional. It's not that the ability to adjust to other resolutions is bad. But it's not necessary, so for PC2's first webpage, I'd recommend simple and functional. Plain functionality beats eye candy without substance any day. And for just getting started, it will be a lot easier to troubleshoot and maintain.

Disclaimer: As an ITA Software consultant, I am a bit biased.

This is a good point. For the business side of things, if it works, it works - how it works doesn't concern them - unless it doesn't work. :eek:

This drives young developers nuts...nothing they make is ever good enough, but the damned managers won't listen :lol:

It's also why there are so many crappy developers out there too... you really ain't gotta have a lot of skill to make something work, so if just making it work is all that is required, why bother making it work best or even learn what it takes to make it work best?

I hope I haven't offended anyone..it's shop talk and I tend to be blunt and opinionated when talking shop...which is why talking shop should be outlawed in Foo! :D

It might help if they'd become a less privacy-hostile, closed, generally ****ty company, but good luck with that.

Not that I have much interest in modern social networking kinds of sites, but I'm rooting for Diaspora (http://gizmodo.com/5537502/diaspora-the-student+made-privacy+respecting-facebook-alternative) and for Facebook to burn to the ground. </OT>

Like I'd ever join Facebook, Myspace or any of that other crap. My online social networking is limited to this little pond. ;)

For simplicity and because I'm starting school again soon (and wont have time to learn CSS in depth), I've decided to stick with a fixed width of 800 px. If I feel that constricts me, I might squeeze in an extra 50px. I've registered my domain names today :).

Oh and thank you all for your generous input -- it has been very helpful to me.

For simplicity and because I'm starting school again soon (and wont have time to learn CSS in depth), I've decided to stick with a fixed width of 800 px. If I feel that constricts me, I might squeeze in an extra 50px. I've registered my domain names today :).

You gotta start somewhere. I think doing it the bad old way will be good for you and give you an appreciation for why web UI design has been evolving as it has. ;)

Keep it simple. You don't want to build a website that is dependent on screen widths. Lots of folks now are using internet enabled phones and other minimal graphics interfaces. Keep that in mind.

Very well said, even in America something like 2/3rds of homes are still on dial up - a lot of web designers get caught up in the latest graphics not taking into account that the load time for so many homes would be forever

I love the pre tag. :)

The user has plenty of control:



Choice of browser window size .
Choice of typeface.
Choice of font size.
Choice of default colors.
Choice of browser.
Choice of browser.
Etcetera.



...Most of which will obliterate, uglify, or make unusable a more rigid, fixed design.


Then you wake up in the real world and realize that most floating designs don't scale visually passed 1024, most people use whatever browser is pre-installed on their PC running maximzied, and no one uses custom style sheets.

This is a good point. For the business side of things, if it works, it works - how it works doesn't concern them - unless it doesn't work.

They're sometimes astonishingly ignorant when something doesn't work. CNN.com sucked for the better part of a decade, and there was a period of a couple weeks (might have been months, I don't remember), when their buggy javascript was causing IE6 to crash (and not just on my computer), although Microsoft probably shares the blame for that one.


Then you wake up in the real world and realize that most floating designs don't scale visually passed 1024, most people use whatever browser is pre-installed on their PC running maximzied, and no one uses custom style sheets.

The W3C has been trying for years to try to get browser vendors to make their products render HTML and CSS consistently so that it won't matter what browser you're using. I'm not sure what you're talking about with the scaling. I've got Bikeforums 1680 pixels wide right now. It's annoying to have to scan such width to read, but it looks proper. Also, people with vision problems like color-blindness often use custom style sheets, although that's admittedly not very relevant to a width discussion.

Whatever the screen width, make sure you also load up music when the page loads, everybody loves that...

Whatever the screen width, make sure you also load up music when the page loads, everybody loves that...

MIDI music, no less!