CSS: Responsive Design Made Easier

Make Your Sites Look Beautiful For Mobile – And Do It Fast

Responsive design made easier because responsive design is hot right now. Mobile devices might be the minority of users to your site if you check your analytics today but they’ll be the majority in a few years time. We’ll start by exploring the basics of responsive design and the challenges this poses in terms of extra work and code. Using advanced CSS extending pre-processors such as SASS (Syntactically Awesome Style sheets) live up to their name and are absolutely awesome at reducing the time spent making your site beautiful for mobile devices and big screens alike.

Basic Principles – Responsive Design Made Easier

Basic Principles – Responsive Design Made EasierIn order to fully explain the benefits of using a pre-processor when designing a responsive site we have to first go a little way into some of the issues and challenges faced by a modern web site designer.

When screen space reduces, a responsive designer looks to resize elements and features on the site to fit that working area effectively. Often grids are used to ensure things remain in proportion as the working area changes. This ensures things like, for example, a picture that is 400px across at a 1000px screen width only takes up 200px when the screen width is 500px.

At some point, however, this approach ‘breaks’. Either really important pictures become too small to be used practically on that screen size or three columns isn’t appropriate for text anymore or the menu can’t be read or used with a big chubby finger on a tiny little screen. Whenever one of those usability break points is reached responsive designers can’t just scale things using a grid.

At this point the designer might choose to reformat the menu into two wider lines for more effective finger interaction on a smaller screen. Two columns of text might become one and an image that was once half a column might take up the whole screen width on the smaller device. This departure from the original design is catered for by @media queries in CSS and is relatively easy to achieve.

Designers will find that blocks of code are repeated, modified and adjusted in similar ways across several of these break points resulting in copying, pasting and in cases of end users requesting changes editing the same items or very similar items in dozens of different locations. A credit card transfer comparison site would be a good example of where big changes might be needed – moving from wide columns with lots of data on a full screen to a smaller selection of information and the key offer details on a small screen.

CSS Pre-Processing And SASSBasic Principles – Responsive Design Made Easier

CSS by itself is very powerful and already allows the functionality we need to design beautiful responsive websites. Where SASS comes in is that it provides significant extensions to the basic CSS to make it more like traditional programming languages. The main four additions to CSS are Variables, Nesting, Mixins and Selector Inheritance (source: SASS-lang.com). We’ll take a quick look at how pre-processing will reduce your design time and make life easier as you face the complexity of longer, responsive style sheets.

Variables are extremely powerful in SASS. Much like a traditional programming language you can define a variable in one location and apply a series of functions and calculations on it. When you’re working with a responsive design this is particularly powerful as often you’ll have similar requirements across different sizes. Even looking at the example shown on the basic SASS-lang site one can imagine uses in responsive design. The .border class can now be used exactly as-is in both the wide and narrower screen parts of the CSS. The only thing that needs to be edited is the $margin variable in these two parts of your code. This could result in a huge time saving if that margin was manually entered at 16px all over your hand coded CSS – sure in some cases a search and replace can be done but if you’re site has lots of other elements at 16px it’s not exactly ideal!

$blue: #3bbfce;
$margin: 16px;
.border {.content-navigation { border-color: $blue; color: darken($blue, 9%); } padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
Mixins are the second tool that seem to offer a lot of use responsive designers with lots of different media queries and widths. They allow not only the repetition of entire blocks of code in different parts of the CSS but they allow those elements to be repeated with variables! An entire block of CSS could be repeated but at half the width or with a different number of columns simply using mixins. A simpler example is shown on the SASS-lang site but I’m sure you can quickly imagine the other ways you can use this powerful technique.
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px} } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; }
is coded to the following CSS:
/* CSS */ #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }

This is a very quick introduction to both the power, challenges and importance of responsive design and some of the time saving, exciting features of SASS. Hopefully it has inspired you to look more into SASS next time you are tackling a complex CSS responsive design project.