Web Responsive Layouts

There are a few ways of website layouts nowadays. Especially with the way we browse the web around the world. Who would have thought that someday we could be on the internet right off of our own living room TV? Or holding small tablets or mobile devices that are now more powerful than the first space rocket sent into space. We have many ways to surf the internet now so it can get a bit overwhelming when it comes to styling pages and making sure everything fits on all devices. Well in today's article we will be discussing the different styles of page layouts there are and they are Fixed,Fluid, Adaptive, & Responsive!

Life is like riding a bicycle. To keep your balance you must keep moving.
Albert Einstein

Fixed Layout

We will start off with Fixed Layouts, we have pretty much moved on from fixed style websites because we no longer focus on just a handful of users on a screen, but there are some occasions that may be the right choice to use this style for some sort of quick announcement for an event at school or just a landing page to direct folks to a different platform. Normally these are just poster images pasted onto an online single fixed page.

For example, if a student from a high school wanted to post the prom event poster online instead of printing paper and wasting ink making it more expensive, it was cheaper to create an HTML page to display the prom details on a computer. But it will look a bit different on mobile devices, still visible though but not efficient for the user. example from markupbox

Fluid Layout

Fluid layouts are a good example of components adjusting to the size of the screen the user is viewing the content on. This is where the designer comes into play to help the developer keep certain elements fixed even on different screen sizes. Meaning that each screen size will have a fixed layout to make it fluid on any device. Doesn't take much to take it a step further either which is where we will see Adaptive in our next example.

It is better to risk starving to death than surrender. If you give up on your dreams, what's left?
Jim Carry

Adaptive Layout

Adaptive layouts are typically the next version of fluid and fixed layouts since this is where we tend to start looking at progressive enhancement techniques to help the web pages fit into various screen resolutions. The only hard part about this design is the designer is going to need to come up with different layouts for different users to make sure it has a friendly user experience. That's where optimization comes into play and starts to get more tech-savvy.

Responsive Layout

Last but not least, the most popular type of web layout in today's world is Responsive Layout's. Why is that? I'm pretty sure the title of this style is pretty self-explanatory. It is also the most suitable and more cost-efficient. It provides a viewing experience of a website to the user on all sorts of screens across devices without having to create specific styles for all devices. Meaning you have more time to worry about your development and testing process to ensure things are working correctly.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time in sticking this far!

Feel free to give me a follow on Twitter and get connected on LinkedIn.