foundation

In todays online landscape, there are more types and sizes of devices then ever before. This creates the absolute need to design websites with this factor as the governing principle. It’s a fact that websites that are not fluid and that do not resize with the device or browser window seem old and outdated.

Web design is responsive design. Responsive web design is web design, done right.

ANDY CLARKE

In the most simplest terms, responsive web design is a fluid layout that has minimum and maximum layout constraints. Meaning that there is a minimum browser (device) window width that has a set of CSS instructions to tell it how to appear, and a maximum set. This part of responsive design is a pretty easy task to setup. All you need to do is know what the width cut off points are (you expected target audience browser size… think iPhone, then tablet, then split screen on windows, then Safari) and you can setup your CSS document to contain instructions for each set. This is done with the CSS top layer code @media (min-width: XXXpx) { }. This tells the browser that any CSS code in between the brackets are only active when the browser window has a minimum width of XXX pixels. Simple enough, right?

What if you want a mobile friendly navigation menu to replace your navigation bar when someone is on a mobile phone, as it does with this website? Or you want a mobile footer to be present when the screen is a certain size? This is where I like to employ third party tools to make my life a little easier. There are many libraries out there that are built around responsive principles, but the one I would like to share with you is; in my opinion; the most easy to use and advanced responsive library available to date.

It’s called foundation (think, this will be the foundation of my responsive website) and has not only a great responsive set of rules and functions, but also includes all the standard layout features and widgets you might want to use on your website. You have place form elements with client side validation, accordion panels, tab panels and so much more. All elements are styled vanilla (no styling) with easy to build upon rules so that you can integrated them easily into your website project.

Foundation is used on this website, and if you would like to give it a try, you can download the latest full foundation package by clicking here

I would also recommend checking out the foundation website, and reading through all the documentation.

If you don’t have the time or resources to bring your website up to date with a responsive design, shoot David (david@tillerphish.com) an email to talk about what you might want and how we can partner to get your website responsive.

Leave a Reply