Tag: layout

What is a fluid layout?

A fluid layout is a website layout where all the containers remain proportional relative to the screen width. In other words if you were to make the screen smaller, the fluid layout will adjust itself automatically to fit your screen without breaking the containers or moving them under each other etc.

A fluid layout is easily achieved most of the time by replacing all fixed widths with percentages.

Replace this:

.container {width: 1024px;}

With this:

.container {width: 100%;}

What is a responsive layout?

A responsive layout uses media queries and is a little bit more technical, but the result will be even better than simply having a fluid layout. A responsive layout can change the look of your website completely when viewed on smaller screens and this is its main advantage over a fluid layout because if your screen is very tiny and you are using relative container widths then those containers could become too small and your website becomes hard to navigate (especially on touch screens).

The example below will change the containers padding and font-size automatically when the screen size goes below 1024 px.

Google’s “mobilegeddon” will change everything

It’s called the mobilegeddon for a reason. Google is going to update its search in a way that mobile friendly (fluid and responsive websites) will get a significant advantage over regular fixed websites. In other words, if you’re not mobile, you no longer exist on the internet. (Google IS the internet in case you didn’t know that by now!)

Google is not doing this to punish you. The statistics show that more and more people are switching over to mobile devices to find relevant information online so it’s really just a step towards a better user experience in the long run. Besides converting your old fixed website into a modern fluid layout is no rocket science, but can still be challenging enough so that a better solution in some extreme cases would be a complete design overhaul.

Whether you need a complete design overhaul or a simple conversion to a fluid/responsive layout, I can help you! Just message me on Facebook or Skype (frank.petser) and we’ll talk more about it.