Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Site size

Featured Replies

http://www.chrishiggins.net.au/bluecross/

 

I've put the above site together for a local animal shelter that my girlfriend volunteers at. They had a look at it, and although they love it, have asked if it can possibly be any smaller, as they had to scroll horizontally to see the content on the computer they were using. However, I made the centre container 960px, which as far as I'm aware, is the current "trend". Any advice? Is there a (simple) way to adjust the site so that it re-sizes depending on the viewers screen size? Or should I just explain to them that it has been designed to the current standard and will look fine on the majority of computers?

 

Cheers,

 

Chris

I agree that 1024*768px seems to be the most common screen resolution, so a page width under 1000px is normal. People who have 800*600 resolutions must have old computers, so they are getting fewer all the time.

 

You can make a site totally flexible in width; use % widths for all divs, side margins, side padding and size any image widths in % too (don't state a height and images will resize in proportion). Make sure all widths total 100% but it can be tricky to get it right.

 

Unfortunately borders cannot be sized in % so leave these in px and make the other widths total 97 or 98% to allow for the borders.

 

You will find that the page will look very spaced out at 1920px resolution and squashed up at say 500px so you can use min-width and max-width to control this. IE6 doesn't process min and max widths so use a conditional comment with a fixed width for IE6.

but then, how many people use there browsers are full screen? i certainly don't.

Although on my window size i have no issue.

I wouldn't bother redesigning the site to fit lower resolutions, advise the client that although they are using an older monitor with a low resolution, the majority of their visitors, if not all, will not.

 

the average monitor resolution is now higher than 1024*768px as most people are using 17+ inch LCD monitors rather than 15inch CRT ones.

 

1024*768px should be your lowest catered resolution, I build all my sites at either 980px or 1000px depending on if there a pattern on the body background.

 

just remember when designing or resizing your site to leave 20px for the browser scrollbars

Yes, 960 is the standard size. It's all very well trying to do clever things with variable widths etc. but then you have to do a lot of testing with different browsers to see how they handle your code. Stick with 960 absolute.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.