Responsive web design is easy with fluid layouts
So, I have been thinking a lot about responsive web design recently. I’ve been reading about some CSS frameworks and recoding some of my core files so they can adapt to any grid system that I choose to use. As a result, I’ve decided to use fluid or elastic layouts or hybrid layouts wherever possible from now on.
Checking out responsive grid systems
Over the last few weeks I’ve been browsing a few responsive grid systems/CSS frameworks, partly as a means of learning new responsive web design methods and also because I’ve been considering whether I should completely redevelop the core set of files that I use for website layouts. I think that the answer to that question is ‘No’ because I’ve yet to find a system that completely resonates with me.
Neverthless, I’ve definitely learned some new methods by looking at the CSS/HTML code of each system so I’d encourage you to do the same. Without exception, all frameworks that I’ve looked at have been very well commented so it’s been relatively easy to understand how they work.
I’ve looked at 8 or 9 systems/frameworks and downloaded a subset of these to look into more thoroughly:
- Get Skeleton is a boilerplate for mobile friendly development and it includes styles for typography, buttons, tabs and forms. It looks a very useful resource that covers a lot.
- 1140 CSS Grid uses a fluid layout and I love this approach. Fluid layouts may not be suitable for every single site but you gain a lot by doing it this way. Fluid (or elastic) layouts greatly simplify the work that you need to do to make a site mobile friendly with media queries (in my experience).
- InuitCSS “combines years of my best dev tips, tricks and practices in one handy file”. The InuitCSS framework is perhaps looser than some others but that means you get a very sensible and streamlined system. You can also add to it with plugins (or ‘Igloos’) which extends the core to add more specific functionality. I like that approach.
I’m going to extend my learning here by rebuilding a personal site with one or more of these systems (probably starting with InuitCSS). Why not do the same? I bet you’ll learn some useful new techniques by doing so!
Learning new things for 2012
The last few months have been pretty busy round here with client work so it has been tough to set aside any time for learning new things. For example, I’d like to spend some hours learning more about responsive web design grids like Skeleton, writing an app that uses the Perch API, or even increasing the range of CSS selectors and properties I use.
Learning about new things was what dragged me into web design and development in the first place. Well, that and the lure of Internet fame and fortune ;-).
So, with an objective to have more personal development time in 2012, I’ve signed up for 12412 which I hope will provide peer pressure and/or motivation for me to look into some web design and development subjects that I would otherwise not find time for. Why not sign up yourself?!
And, of course, it will provide a few subjects for me to write about here as well….
How I learned to love invoicing
A few months ago I read Grace Smith’s article 8 Services That Power My Business where the online invoicing application Curdbee was described. I took Curdbee for a test drive and I’ve been using it for the last few months. I don’t use every single feature but I think it’s a great invoicing or billing app for any freelancer or small business.
CurdBee is a simple web application that makes billing a breeze. Use it to send estimates and invoices, track time and expenses, and accept online payments. Say goodbye to paperwork!
Curdbee is an app that allows you to manage your invoices and clients via a web interface. It’s not a full-blown accounting app but it has made invoicing a much more enjoyable and quicker task for me. Here’s why I like it…
An evening out with Points Brighton
I’ve been to a few web conferences over the last 3-4 years and they’re great. You get to see some famous web folks and hear their presentations in large venues and meet with other designers and developers. At the same time, with conferences averaging 500 or more attendees, it’s sometimes easy to feel a little ‘lost’ at such events. For that reason, I also like to attend some informal, more grassroots-style, local events as well. Last Thursday evening, I went to the first Points Brighton event and here’s my short review of the meeting.
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
In this Think Vitamin video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups » UX Wireframing Introduction
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Subscribe
Recent Comments
- Ian Lunn on Responsive web design is easy with fluid layouts
- rick on CSS3 box-shadow and image hover effects
- Clive Walker on Useful tip for creating double borders with CSS3
- Dmitry Pashkevich on Useful tip for creating double borders with CSS3
- Zap! Media on Checking out responsive grid systems
- Clive Walker on Use more than one CSS class
- Anand on Use more than one CSS class
- saco termico on Use more than one CSS class
