You are here

Responsive design - Foldy 960

Sunday, January 15, 2012

So, started playing with a few methods for creating a site theme with responsive design today now I have the new site up and running. The first plaything was Foldy960, I began with only a quick play, as I ultimately wanted to be looking more into media-queries. But once you get it working, and start to see how it is built, it is quite simple, and enticing to use. Ideally you would start with a flexible layout, it then works using this simple premise alongside the basics of the 960px layout. You design your site for a maximum size of 960px, and then create your columns using percentages (defaults are event columns of 1, 2, or 3, or a large column followed by thinner column). As the browser resizes, these columns then shrink accordingly. If the browser shrinks down to a certain size though, the columns suddenly become full-width columns and stack themselves in the reading order of left to right.

Some useful things that have come out of my quick overview though have shown that it uses something called micro-clearfix-hack, this appears to be just another approach to fixing the way some browsers do not clear items properly. The usual fix we have used in Drupal is a similar approach using css as opposed to extra markup fixes, but this one is a little shorter. So, if you are after little wins in the world of css performance, give it a whirl yourselves.

Another thing worth noting is the media-queries used, they work beautifully, and are contained within the style.css file. This means there is less HTML markup, and that we can now look into aggregating that query better with the rest of the css.

And so... whilst you may not want your desktop version to initially be a flexible layout, this could be an excellent place to start working as a boilerplate, and they you just built upon it do display as you require. I am going to try and skin this site using this idea, and see what comes of it, then I will slowly improve it, using various tools from the .net posting 21 tools for responsive design.

Technologies: 

Blog & News

Monday, March 7, 2016

Okay, I know it is awful practice to put 2 things into one article, but I didn't want to write two tbh, so I will keep this tidy, and you can grab out what you need.

 

Subscribe to Blog & News

About

Cultivating a better future, with the seeds of better websites

For several years I have evolved through one of the largest media charities in the UK to the role of Senior developer.  I loved it there, but have to stepped out on my own as a freelance developer.

My main skills are with the Drupal CMS, developing code for it, ensuring standards through projects (whether that design, development, or planning), and leading teams to build applications they can be proud of.

Digital Consultancy, Web Development and Project Architecture are where I try to focus my skills, supporting my passion and desire to create stunning websites on time, in budget, and meeting your objectives.

To build a powerful web presence, I combine my creative, technical, and managerial experience (alongside a good splash of passion) which I have cultivated over 10 years in the industry, creating websites people want to shout about.

More on how I can help