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.

What's considered best practice for fixed-width sites?

Featured Replies

Hello :)

 

I have a designer friend who ships me psds of his website designs and I do the slicing, coding, and hosting stuff. He designs his websites on a wide screen monitor and the site container winds up being around 1100px wide. Is this not okay?

 

Specifically what I'm thinking is that these sites won't look good in 1024x768 resolution.

 

Wondering if you fellow coders have any tips on this? Thanks a ton!

Is there a particular reason why you won't go with a fluid width design?

 

If you have to go with fixed width then you have to consider your target audience. A pc gaming website will more likely have an audience higher screen resolutions than a government based one.

 

When I used to make fixed layouts I went with 800px wide and center the content so it is accessible to most screens and looks okay. Whatever you chose it's always a compromise, personally I don't ever see me creating a fix width site again.

I don't see an issue - especially if you build with responsive principles (applying those to the mobile market in particular). Twitter Bootstrap's max-width is around 1160px (from when I tried it).

  • Author

We don't talk much about the design process side of things. If I wanted to start developing strictly fluid sites, is there any special considerations the designer must keep in mind throughout the design process? Or is that more-so the developer's job when doing the coding? I'm unsure if I need to tell him to start doing anything different when he designs websites.

For fixed designs the 960 grid is quite popular

http://960.gs/

It's usualy 960 px wide (you guessed it)

If you want to go for a resonsive design the designer should be making PSD muck-ups of the design in various dimentions based on typical device widths. You (the frontend developer?) will then have to convert these muck-ups to css using scalable block elements and media queries.

  • Author

Ok thanks for your help, that makes a lot of sense. Yeah I'm the frontend developer. I'm still learning and keep putting the responsive stuff off but it's clear I'm going to need to jump in pretty quick here.. Thanks, guys :)

For fixed designs the 960 grid is quite popular

http://960.gs/

It's usualy 960 px wide (you guessed it)

If you want to go for a resonsive design the designer should be making PSD muck-ups of the design in various dimentions based on typical device widths. You (the frontend developer?) will then have to convert these muck-ups to css using scalable block elements and media queries.

 

I second this. For the time being working to 960px is probably the best way to go for fixed-width layouts. This width is ideal for users with the 1024x768 screen resolution. I very much doubt people are still using lower resolutions on a desktop computer.

We don't talk much about the design process side of things. If I wanted to start developing strictly fluid sites, is there any special considerations the designer must keep in mind throughout the design process? Or is that more-so the developer's job when doing the coding? I'm unsure if I need to tell him to start doing anything different when he designs websites.

 

You should talk! From the outset of the project you should be supplying them with content requirements so he/she has something to design for.

 

Building fluid/responsive sites really needs a designer who understands how documents and content are structured, plus knowledge of how sites display on the myriad of devices we have nowadays - from huge desktop screens to small smartphones.

You should talk! From the outset of the project you should be supplying them with content requirements so he/she has something to design for.

 

Building fluid/responsive sites really needs a designer who understands how documents and content are structured, plus knowledge of how sites display on the myriad of devices we have nowadays - from huge desktop screens to small smartphones.

 

True that, I once had a designer, who kinda didn't understood what to do with that, so I ended up designing it by myself :p

Good call :)

Coming back to this: more seriously, you should avoid 960.gs like the plague. It was first designed when 10-12px body text was the norm, thankfully we're over that now and using a much more legible and user-friendly 14-16px. The problem with that is that the 960's 20px gutters are too small for larger modern text.

If you absolutely have to use a fixed grid, try this.

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.