What resolution to make my website for?

[berryracer]

I'm having an urgent question on behalf of my friend Dx3me ;

In 2008 I created my website (budopower.com)... and at the time a resolution of 1024x768 seemed to be the best choice, on behalf of several forums.
So back than I made my website around that resolution, staying on the safe side by keeping it 1000 pixels in width.
I used 1024x768 as well on my personal laptop.
In 2010 I switched to 1600x900 (for personal use), but didn't touch my website resolution and left it at the previous mentioned 1000 pixels in width.
The site looks pretty descent, viewing at 1600x900.

- Now (4 years later) I recently switched to 1920x1080 on my personal laptop... and now I start to notice I have quite a bit of black (empty) space on both left-/right sides.
The site just looks a bit narrow when viewing at higher resolutions.
Also, the letter font seems to be a bit harder to read, or is that just me?
So I'm starting to think about re-doing my whole website, although I;m not quite sure what resolution would be the best choice to do that in?

* I don't even know IF it's a wise thing to do, re-doing the site in an other resolution?
I mean, what resolution is the most common these days?
(I want to be safe, not being forced to redo it AGAIN in 2015)
Of course I could just go for a bigger letter font and leave the width as it is - at 1000 pixels -, but still it does look a bit narrow for people (like me) who use somewhat higher resolutions...


--> So what do you recommend me?
(bigger letter font, change my resolution... if so, what size)

Thanks

[treehouse786]

the best website designs are responsive (like wilders and antimalware toolkit in my sig), that means that the website adjusts the page depending on the resolution of the viewer's screen. if that is not an option then i would leave the websites resolution as it is.

as you can see on this page. increasing your resolution would mean 14% of the viewers will have to use horizontal scrolling to see your website not to mention the smart phone browsers. your call, but my recommendation is to use a responsive website design or not increase the resolution.

[TonyW]

Originally Posted by treehouse786

the best website designs are responsive (like wilders and antimalware toolkit in my sig), that means that the website adjusts the page depending on the resolution of the viewer's screen.

I'm not sure Wilders is that responsive. For example, using a low resolution [600x800] the subscribed panels in User CP scrolls to the right. In order to have it more flush and in line with the rest of the page I find the easiest way is to use the browser zoom out control. It then looks like it would do under a higher resolution.

By the way, how do you make a web page automatically adjust to a user's resolution?

[HKEY1952]

Originally Posted by berryracer

--> So what do you recommend me?
(bigger letter font, change my resolution... if so, what size)

Build the Website and optimize it for 1024x768 using an Limited Liquid Design.

I navigated your Website using 1024x768 screen resolution. You have plenty of unused real estate left to expand the
column on the left to equeal the total width of both existing columns and leave the right column width as is.
Left align all tables on all Webpages, this will allow an small amount of free space on the right off all Webpages.
Now that you have more real estate in the left column, use an larger Font Size to allow for easier reading at the
higher resolutions or use EM-defined columns. With EM-defined columns, the Font Size measurement relates the users
Web Browser Font Size.

By using the Limited Liquid Design and Left Aligning all tables, regardless of the screen resolution, the Webpages
left margin will always be almost butted against the Web Browsers left edge and expanding to the right accordingly
to accommodate the screen resolution. Being that it is an Limited Liquid Design, you will want to limit the minimum
and maximum size the layout will contract and expand to. You want the layout to contract to accommodate 800x600
screen resolutions, but not contract no less than 640 pixels, and you will want the layout to expand to accommodate
screen resolutions greater than 1024x768, but not expand greater than 1600 pixels.

Being that this is an Limited Liquid Design, you must also take into consideration the Line Length of the text.
As the layout expands and contracts to accommodate screen resolution, you do not want the sentences to be compressed
down into narrow columns, nor do you want the sentences to expand into long sentences spanning the full length of
the screen monitor. Here again, EM-defined columns can be useful.

Below are some linkes to helpful information, be sure to click on all of the links in all of the articles to reap
all the information available.

You have an nice and interesting Website berryracer, and good luck to you and your Website.


Liquid layouts the easy way:
http://www.maxdesign.com.au/articles/liquid/

Screen Resolution and Limited Liquid Design:
http://www.boogiejack.com/html-help/...esolution.html

Ideal line length for content:
http://www.maxdesign.com.au/articles/em/


HKEY1952

[berryracer]

Thanks a lot for the suggestions guys!

Y'all rock!

[Mrkvonic]

If anything, the striped left and right margins make your site feel congested.
Overall, as long the site is readable, readers will ignore the sides.

Your font is relatively low contrasted. You can increase the font size without changing the container.

Cheers,
Mrk

[NGRhodes]

Stats counter has useful tool for finding out info about resolutions:

http://gs.statcounter.com/#resolutio...-201103-201203

You can narrow down by region.

I've been a web developer for the past 10 years and in my experience you are best designing your site to be an optimum at the most popular resolution, but still be usable at other common resolutions, no matter if you go for fixed width or a design that expands to fill the browser width, commonly know as fluid or elastic.

http://coding.smashingmagazine.com/2...t-one-for-you/

Cheers, Nick

[HKEY1952]

To give you an basic idea about what I was trying to express in Post #4 of this Thread, follow the link below.
That is what your Website should resemble at 1024x768 resolution. Just "Imagine" the content in the containers as
your content. Notice the text Font Size, and the Guttrers on the left and right borders of the layout.

Now, at an higher resolution, the left Gutter would remain at the same width, while the width of the right Gutter
would expand to the right and be restricted to the Limited Liquid Designs maxium width of 1600 pixels. Resolutions
greater than 1024x768 would simply see more free space on the right side of the Web Pages. The horizontal gray/black
striped image used as the Web Pages background will fill the free space on the left, right, top, and bottom sides of
the container, and the layout will not appear narrow or congested.


Example:
http://forums.xbox.com/xbox_forums/b...2d00_live.aspx


HKEY1952

[Dx3me]

Hi guys,

Well, first of all I would like to thank you all for your feedback... as "berryracer" posted this topic on behalf of mine.
(wasn't a member of this forum at the time)

@HKEY1952;
I will definitely look into this, sounds good I guess.
Slightly "problem" I'm having... I made the website through an online sitebuilder, that limits my option to make it in a responsive resolution.
(being stuck to a fixed resolution)

- 1280 looks to be the resolution I would be aiming for (coming from the current 1000), but before I make the official switch I have to be absolutely sure that it's a safe setting that most people can watch without having to scroll sideways in their browser.
What do you think?

[HKEY1952]

Originally Posted by Dx3me

Slightly "problem" I'm having... I made the website through an online sitebuilder, that limits my option to make it
in a responsive resolution.
(being stuck to a fixed resolution)

Welcome to Wilders Security Forums Dx3me

As an final note, the Example Link in Post #8 of this Thread is an Fixed Width Design, and that is OK.

The most popular screen resolution is 1024x768. By design rule of thumb, the Web Site should be designed and
optimized for the most popular screen resolution, allowing compatibility for higher and lower resolutions.
The Fixed With Design in the Example Link will do just that. You will not have to worry about maximum width.

I believe the Example Link in Post #8 makes an good Template to follow, text size and all.


Good Luck to You and your Web Site Dx3me


World maps of popular browser statistics by country.
Updated regularly (Current as of March 28, 2012) by BrowserRank.com:
http://www.browserrank.com/

Usage Share Statistics for Internet Technologies.
Screen Resolutions (Current as of March 2012) by Net Applications:
http://marketshare.hitslink.com/report.aspx?qprid=17

What is screen resolution? by Tinyverse Creative.
Blog Posted on February 29, 2012 by admin:
http://tinyverse.co.uk/blog/2012/02/...en-resolution/


EDIT: completeness


HKEY1952