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 Kind Of Layout?

Featured Replies

Hi all,

 

I am creating my first website, and am wondering if I should go for a fixed or liquid design. Are there certain pros and cons I should know about?

 

Thanks a lot!

 

Brendan

  • Author

Or please notify me if there's another way of doing it that I'm not aware of :D

Always try to use a fluid layout IMO as your site will then be accessible and logical for all sorts of users on all sorts of platforms and screens. A lot of careful consideration and thought required though... definitely easier said than done!

 

Fixed layouts are much easier to implement and you have much more control over how it looks but when someone tries to resize something then it can go pear-shaped! But I find you can play around with more elaborate designs with fixed layouts as you don't have to worry about other users breaking your design. As with most things in life, it's all about finding a suitable compromise!

  • Author
Always try to use a fluid layout IMO as your site will then be accessible and logical for all sorts of users on all sorts of platforms and screens. A lot of careful consideration and thought required though... definitely easier said than done!

 

Fixed layouts are much easier to implement and you have much more control over how it looks but when someone tries to resize something then it can go pear-shaped! But I find you can play around with more elaborate designs with fixed layouts as you don't have to worry about other users breaking your design. As with most things in life, it's all about finding a suitable compromise!

 

Good advice! Thank you :D

  • Author

Is there some way that I can detect where the user is viewing the website (phone, big computer screen, small computer screen, etc...), and apply a certain css file to the website depending on the results?

 

Thanks in advance,

 

Brendan :D

yes u can tell what cssfile to use for those by using the media= in your css link like this

 

<link href="style/basic.css" rel="stylesheet" type="text/css" media="screen" />

<link href="style/handheld.css" rel="stylesheet" type="text/css" media="handheld" />

<link href="style/print.css" rel="stylesheet" type="text/css" media="print" />

  • Author

OHH!!!! Thank you very much!!! So would you say it's safe to have a fixed layout for all screens, or should I still have a liquid design in case of resizing the window?

 

Thanks in advance,

 

Brendan :D

  • Author

Also, could you talk about time/effort when you say which one would be best for the screen please?

 

Thank you all so much for the help!

 

Brendan :D

well a liquid layout is still always best since media=screen doesnt say much about the size of that screen. its just that you can never make it so liquid that it would still look just as perfect on a phone as on a computerscreen, or maby if you want to simplify it for print.

Surely a liquid layout always would be better? what are the downsides?

  • Author
Surely a liquid layout always would be better? what are the downsides?

 

The main downside of a liquid design is that you lose control of how your website will look. With a fixed design, at least you still have some control over how it will display in the browser. I want to know what is best, to sacrifice control for flexibility of screen/window size, or to go with a fixed design and sacrifice screen/window size not displaying it properly.

well the best thing is to design your website like that so that it can be liquid but still looks great, however that is a real challenge :rolleyes:

  • Author
well the best thing is to design your website like that so that it can be liquid but still looks great, however that is a real challenge :rolleyes:

Do you have any tips on how to make sure that it still looks good regardless of the size it's being displayed?

Hi,

 

Liquid layouts are good for sites that span the entire width of the browser window (100%), as they allow the web page to resize with the browser window. They are also very useful for when you don't have fixed sizes on fonts, allowing the user to increase font size while at the same time allowing the design to remain fluid. The problem with liquid design is the lack of control as mentioned previously. You will have to test your website extensively to make sure that the look and feel stay consistent in many, many environments.

 

With a fixed approach you have a lot more control over the design and layout of the page and can restrict the the user from breaking your design. One important factor you will need to consider is screen size. It used to be the norm to design for screen resolutions of 800 x 600 pixels as this gave the best compatibility, as the majority of users did not have resolutions any smaller than that, indeed todays hardware no longer allows a resolution lower than 800 x 600 pixels.

 

Now though, it seems as though designers are progressing towards 1024 x 768 pixels as the primary resolution.

 

In my opinion, I would, if possible, design for a 800 x 600 pixel resolution and you should not have any problems as long as you have valid code and you understand floats correctly.

 

Remember though, that Internet Explorer still has issues when rendering CSS. You can use conditional comments which link to alternative style sheets in order to get around any IE display issues.

 

Go to our new blog to read a quick tutorial on conditional comments.

 

Kind Regards

 

Gareth Daine

 

Website Design Liverpool

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.