Responsive Webdesign max width for website

Hello,

i see currently most websites which have a responsive design look good when you make the browser smaller, but if your screen is big like 1900 x 1200 pixel or bigger, then i see the websites seems like dont have more width then somethink like 1300 pixel width or a simular number.

Is this normal that websites have a maximal width when you make them responsive design, or should they also go over the complete screen when the screen have 1900 pixel width or more?

So my opinion on this is that it depends entirely on what your site is for. For example if you have a photography site it would be perfectly suited to go full screen and have a large picture showing across the screen as it’s a very visual thing. On the otherhand if you have a website with lots of text then going full width is not always the best option. You shouldn’t really have more than about 75 characters across or it becomes hard to read (ever noticed how newspapers are in columns rather than full width.

You can of course do a mixture and have a full width background but still maintain a narrow ‘page’ in the centre that has a max-width. Sitepoint for example has a central ‘page’ with a full width header. so on my 22inch screen i have whitespace down the sides.

It depends on the site but in general most web sites will need a max-width of some sort depending on the content.

As Noppy mentioned above it is bad practice to have one line of text that spreads to 2500px wide as that is very difficult to scan so you need to thing about the number of characters on a line instead. However that doesn’t mean that on wider screens you can’t have more smaller columns or more content organised in a better manner to take advantage of the available width.

If your design is completely ‘fulfilled’ at xxpx width then there’s no point in trying to make it wider just for the sake of it.

In the end its all about making the best use of the space available in a way that suits your content. If that means a max-width once the layout is as big as it can get then that’s fine.

I have a 27" mac and if I maximise the browser the screen is very wide and sites that stretch edge to edge are virtually unusable and you end up with ‘arm ache’ from moving the mouse so far each time you access something on one side or the either.:slight_smile:

The responsive website design min-width must be 960 px but I am open to suggestions about width and max-width keeping in mind that: Majority of visitors have 1366 px or wider screens. There is a separate version for mobile website design.

(edited by gandalf458 to remove spam links)

it’s not going to be a responsive website if you don’t display anything less than 960px. An old ipad in portrait is less that 960px and every mobile phone. Also depending on your site the majority of visitors don’t have 1366px or bigger as more than 50% of people use mobile phones for browsing the web now. The entire point of RWD is that you should be able to see a readable site on a mobile through to a 27" mac or a 48"TV or a whatever.

Unless you are trying to say that one of your transition points is 960px, but that is not separate it’s part of the same structure /stylesheet. Or you could switch to AMP if less than a certain screen size.

1 Like

Because i was thinking to make my website also fit to bigger screens like 1900 pixel and above but then i did see that many other websites or better to say all websites that i have browse have a max width, only if you make the screen smaller the website fit to the screen width, but if the screen is bigger then 1366 pixel the website dont become bigger mostly only the backgrounds and such thinks. I think you can say because of this that there is a max width also for responsive websites and we can maybe say the max with for websites today is this 1366 pixel which most have.

Maik1,

Please re-read Paul’s advice in post #3.

If you want to design a web site to fit a huge window, go ahead. If the size of the content appeals to users, they will return; if the size is “tiresome” or the content is pointless, they will not return. If you are trying to accomplish “responsive”, then you should be thinking of how the site will play on small devices, too, and how much of the content is wasted on big screens. IMO, use common sense. What size web site appeals to you?

About pixels and size:
One can find screens that are 1920 by 1080 pixels on smartphones as well as large desktops. Both screens have same number of pixels but the pixels are different sizes. Fortunately, there is a dots per inch calculation that helps the browser render the content at approximately the same size across most devices. Keep that in mind when you are considering the design of your web site. You can google for details, if desired, or search the messages on SitePoint by clicking the magnifying glass in the menubar at the top of the window.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.