Topic: Webdesign best practices - the target resolution (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=29954" title="Pages that link to Topic: Webdesign best practices - the target resolution (Page 1 of 1)" rel="nofollow" >Topic: Webdesign best practices - the target resolution <span class="small">(Page 1 of 1)</span>\

 
argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-02-2008 18:22 Edit Quote

Hello.

Which resolution to design for? A simple question. I tend to like 1280x1024, but realistically, there still is
a huge share of the 2nd/1st world on CRT monitors with resolution "up to" 800x600.

What do you think?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-02-2008 18:38 Edit Quote

If you can, forget screen resolution and go fluid design.

Otherwise I tend to aim for 768px wide content. My old craptop is in 1024 and with the tabs on the right hand side it leave ~860px of browsable area.

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-02-2008 18:49 Edit Quote

Some technicalities and a real world example - http://www.mauro-colella.com/
- what I'll do is "try", as much as possible to get an idea on the client side resolution from server side, and serve accordingly
with different business card sizes. This is the front door, so it should contain "nothing" dynamic, not even rollovers - anyone and spiders
should be able to play around.

And frankly, getting the same result with html/css tweaks instead of a big image...
Thank you for the tip.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-02-2008 18:58 Edit Quote

Server side code for a client resolution check, are you serious ?

I would go for some simple CSS3 Media Queries providing the best image possible for the current width and height of the document, with a JavaScript fallback, and a default CSS as last resort fallback.

But honestly I doubt, I'd bother. Just use background images and plain text positionned in CSS, so that it remains accessible and more or less semantic.

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-02-2008 19:09 Edit Quote

I don't think it's the biggest concern ever. But...

Counter arguments :
- server side detection is possible using an iterative approach, reallyreally, I have several php examples at hands.
- CSS3 may be the future in Opera in Firefox or it may be nothing - See XHTML becoming gently obsolete, and Microsoft's rejection of HTML 5 in favor of Silverlight.
- Fallback is a NO-GO for that page , the maximum I set for myself is some css2 - for marketing reasons :
people MUST see the same page when they arrive as the physical card they have in their hands.

For several reasons.. See "NLP" about it : it enforces a feeling of consistency, enforces the impression I can turn their "paper dreams"
into a virtual reality, and it subtly enforces their decision to be interested in my stuff (ok, I was with the business card, now I am watching the site,
and this stuff feels good).

These are marketing driven reasons, making them more solid than a concern about "showing my CSS3 media queries" - no offense meant,
but while the interior of the final site will be a mind boggling OpenGL/Ajax/newsfeed user pick, I will abide to the rule :
NO PARTICULAR TECHNOLOGY OTHER THAN PLAIN HTML AND SOME LIGHT CSS FOR THAT PAGE.

Now take my word : while many dynamic, mid to small size company, and the end users are great with (better) Open Source technology,
companies with 10'000 to 570'000 employees (DHL has that) use MS for Desktop, have used it for years, invested millions in keeping their it personel
trained on that - until the masses make alternative technologies MUCH MORE ATTRACTIVE than these past investments,
the main browser in companies like Philip Morris or Nestle will remain IE.

This is not to break your dream : by all means, please use better/alternative technologies, but for me, the goals are sales/marketing - knowing,
in addition, that the group policies for web usage in such companies restrict "anything new". Thanks.

But no, thanks.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-02-2008 19:19 Edit Quote
quote:
NO PARTICULAR TECHNOLOGY OTHER THAN PLAIN HTML AND SOME LIGHT CSS FOR THAT PAGE

Then forget the CSS3 or JS or PHP mumbo jumbo and do as said in my last sentence

quote:
See XHTML becoming gently obsolete, and Microsoft's rejection of HTML 5 in favor of Silverlight.

Nothing new under the sun. If people are ok to lock themselves in, fine by me. I won't.

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-02-2008 19:37 Edit Quote

Spiders, poi, at least be gentle to these spiders - I am far from being ok to lock myself in anything - and in fact went solo for a reason.
But first access point : wether you're impaired in some way, don't know the basics of technology, or are a businessman forced to
use IE because you can't install anything decent is not my problem - whoever "you" are, you are my customer and user.

From this "so compliant" welcome point on, though, to each their technology, me, I'll deliver web interfaces never seen before.

The above gets the job done, I may simply resize it - good point about the php mumbo jumbo - but never will it be anything but the simplest
access point - and that's what service is about to me.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 02-02-2008 23:10 Edit Quote

over engineering much?

Why are you using images for text? It is recommended that textual information be rendered as HTML text, apart from accessibility and semantic markup, it also aids in SEO, regardless of keeping your corporate font there, I don't see how this is the best use of a website.

Secondly you could easily use JavaScript to show/hide the two sides of the card, I see no reason to have two html pages or any server-side shenanigans.

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-03-2008 08:21 Edit Quote

Why don't you guys give me a break - all I asked for was a tip about the resolution, really?

It's gonna be a tough post, 'specially after such a Saturday night.

Bottom line : I know what I do, I know the tricks you're mentionned, and to me they're useless in this context
- as much as it comes from a good intent :

- when I am ready to publish it, the site will feature rss or atom, advanced Ajax, and a JavaFX OpenGL interface very accessible to many gazillions of people.
- so the info on the image will be available in details - and all I want indexed are the details, not the outline.
- I WANT to use two images on two html pages for the entry point,
I want the page to look EXACTLY like the physical business card, pixel by pixel - do that with CSS, make my day - there's no "losing the fonts",
there's no losing a single pixel of the paper version of the card - that does not happend in this space/time continuum. Never - EVER.
- I REFUSE javascript on that page : I want lynx users and spiders to see "business card of argo navis" and nothing else when hitting that page - until the extra links
to content are posted.
- all the rest (like a couple of dozens of documents) will be indexable, textual, detailed, and freaky as it gets.

Don't get me wrong - I appreciate your intent to help. But if you want to help, please assume I know what I do
and assume the question which is the title of this thread is the only thing I needed an answer to

(plus check my rant above about marketing applied to this thing)

(note to self : dude, what the hell are you doing posting rants after having danced the night away with that bunch of hot babes,
and given that hot babe "salsa" is in the next room dreaming a little dream of you - oh, right, realizing and figuring how to handle the results
of that mess of a weekend)

(*puts ice on forehead and sips some coffee*)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 02-03-2008 12:05 Edit Quote
quote:

argo navis said:

Why don't you guys give me a break - all I asked for was a tip about the resolution, really?It's gonna be a tough post, 'specially after such a Saturday night.

Bottom line : I know what I do, I know the tricks you're mentionned, and to me they're useless in this context- as much as it comes from a good intent


Fair point, I admit I was getting a little carried away knowing your tendency towards perfectionism.

Understand of course that we all know too well your technical ability and know-how, so assumed you'd lap up some more constructive criticism :P

Anyway if it hits your target audience and fulfills its technical specification then there's nothing really wrong with it, regardless of semantics

Poi probably gave you the best answer regarding screen resolution. however if you have something fixed in design then I would certainly make it viewable on a 1024x768 browser without showing horizontal scrollbars (thus probably around the 980px wide mark).

Hope that helps!

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-03-2008 12:24 Edit Quote

I appreciate every single word of input - so, to pay the advice back :

there is a reason why I stroke marketing, NLP, and other "weird" stuff - it's the skillset I am training, and have found to be
one of the core set of competencies for owning a business : convincing implies reaching people deep, starting from ground 0,
and there are subtle ways to do this.

Hence the difference between my "strange" perspective and the reality of webdesign for inmates.

But I do take every word of advice and integrate it, trust me, respect where it is due.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-03-2008 17:55 Edit Quote

SitePoint Blogs : Stretchy Images with HTML and CSS
CSS Liquid : Resources

argo navis
Paranoid (IV) Inmate

From: Switzerland
Insane since: Jul 2007

IP logged posted posted 02-03-2008 19:26 Edit Quote

Now, that's sweet. Especially like the 2nd link

camp185
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2008

IP logged posted posted 06-05-2008 21:22 Edit Quote

You should design for a specific width, but as poi said, it should be fluid. Know that less than 10% of the world uses settings of 800px or less.

Here is how to design for common screen resolution, to be specific in the width you decide, and be fluid:

Right now, most people in the world use a screen setting of 1024, or greater. You should design for the greater audience, meaning 1024. This does not mean that you should set the sites width to 1024 though, or 1000. That is not a fluid design. To design for a specific width and still be fluid you must use percentage. If you want a site that appears to be 900px wide on a 1024 monitor you set the width to 88%. 900 x 100 / 1024 = %. It's as simple as that. Now your site will be look just the way you want based on how most people will see it, and it will adjust to those monitors that use alternate settings.

Subscribe to my full feed RSS for Usability Tips and Site Reviews
Get My Basic Usability & Design Analysis

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-05-2008 22:56 Edit Quote

Screen resolution/width !== available browser window width.

sophielucky
Bipolar (III) Inmate

From: Miami
Insane since: Nov 2010

IP logged posted posted 12-16-2010 03:27 Edit Quote

I think the resolution depends on your own requirement.
If you want to have a big one, you can design a larger resolution.

__________________
My Favorite Tools:
flash banner | flash menu

KARN
Bipolar (III) Inmate

From: Vancouver, BC
Insane since: Apr 2001

IP logged posted posted 05-22-2012 20:53 Edit Quote

If you really have nowhere to start 960px is a good starting point/desirable width. Depending on the requirements of your site you may be over and under that but its a good number for modern sites/resolutions.

Mainly from a designer aspect that it applies to the grid/golden rule very well.

Now 960px would be where your content container area would sit in, the left and right could be padded with background and possibly a social widget on the side.

A quick search:

http://ca.ign.com/ and http://www.cnn.com/ are very close to this number sitting at 975px and 1000px respectively. Currently they have an ad take-over right now which is perfect demonstration of this. Their site sits inside but client ads are on the outside.

Portfolio | Tweet Me



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu