With all the experience that I have with building websites I often get caught up in my own little design and development world and forget that the way I see and experience the web via the browser is just that: my own.
I do most of all that I do on my 15″ MacBook Pro and I rarely ever use an external monitor. I simply forget at times that a lot of people view these sites on many different machines and many different screen resolutions.
So, I went to Best Buy yesterday and tried out their 27″ iMacs to see what the sites looked like “in the wild” on a large screen.
I knew they would look great (and that the design would “stick”) but it was still a shock to see how “narrow” the content area was on a widescreen.
Anyways, just a few random thoughts for the day and a simple reminder to remember that your viewership is much more than the way you see your design and development.
Check it out [click for full resolution image]:
Homepage:
Single Post View:
The 8BIT Network Site:
So, do you guys remember to make sure your sites are “ok” for larger screens?
No, actually I don’t, but you’ve definitely inspired me to check.
word. check it out.
I’m a bit different, I do virtually all of my work on a 25.5″ widescreen. However, I have my tabs in a sidebar on the right, and the left sidebar takes up a bit of space, so it still winds up being a typical viewing area. I always make sure to view it in different resolutions though, and prefer designing the total width of a site around 1100px.
yeah. you typically work in a larger environment.
I have a 24″ iMac that sits on my desk at work. It’s the computer that my church has provided me with to do my job. I pretty much only use it for video editing because of the great amount of hard drive space it has. I use my personal 15″ MacBook for everything else.
What would we do if our sites are built for a 15″ screen but we want them to be viewed in the same way on a larger widescreen? It seems like it’s something we should be aware of… but I’m not really sure what we can do about it.
hmm. yes.
You should look into making your site “fluid” width, this is done with CSS. Fluid width basically means that the content will expand (or contract) to fit the width of the browser.
Of course if your CSS is coded for fixed then it might be a bit of extra work.
definitely an option!
I have been designing sites for 12-14 years now I usually don’t make it “ok” for wider screens because I like knowing how wide to make some images, videos and keeping consistency.
very cool. good points.
Forgive me if this is a stupid question, but how do you check if you don’t have a bigger screen?
But I can just imagine that some design decisions I’ve made would look goofy on really big screens..
I’d like to know the answer too!
Are there ‘big screen’ emulators out there?
I don’t think 8Bit’s content is too narrow. I’m using a 25′ monitor, and I hardly ever max out my browser for this reason.
Good reminder though!
Is it still a common law to design for the majority?
It is a real issue now to remember that your site could be viewed on a 1900×1200 monster, or on a 320×480 mobile!
I usually remember, but can’t honestly do much about it.
I wouldn’t say that your site is broken on widescreens. On the contrary, by fixing a narrow width, you are ensuring that it is not broken, regardless of the width of the users screen. Yes, if the browser is maximized on the widescreen, it wastes a lot of space, but you are allowing your users to run their browsers with a narrower width, and use the rest of the screen real estate for other things.
One way to test your site at alternative resolutions is with a Firefox plugin called Firesizer. You just pick which resolution you want to use, and your browser window is automatically resized.
Just for clarification: are you talking about fixed width vs non-fixed?
And for the record- I use a Big Poppa 27″ iMac and rarely use more than 2/3 of the screen for browsers.
It’s a good reminder to check this out- especially if it means getting some drool on the units at Best Buy!
I am not a huge web design guy, but im sure there is a way to get the width of your website to act like a rubber band. No matter what size (width) the screen the website could change based on resolution. Am I right on this?
yeah. yo ucanhave it scale.
Hi John,
Thank you for sharing. I normally don’t check the websites that I make when I was active in my short lived career as a freelance Web Designer. However, before I end that part of my life, I started to integrate that pratice to every project. Saves me more time in editing.
hehe. thanks for stopping by!
Even Apple’s website isn’t “wide-screen compatible”.
hehe.