Category Archives: CSS

Improve your CSS with the Sass @extend directive

The Sass extend directive can improve your workflow. Nick Walsh explains how to implement the CSS preprocessor component without bloat.

Watching a CSS veteran discover Sass for the first time is always entertaining. Concepts like nesting, variables and mixins seem so natural and, once the syntax is committed to memory, it’s difficult to remember a time before their availability. Relief is the most common emotion: a recognition that the days of manually prefixing and copying hexadecimal values have passed.

Of the core concepts found in the preprocessor @extend stands out for three reasons: it has the highest potential to drastically change your workflow; misuse is dangerous to the health of your stylesheet; and newcomers struggle with it far more than other Sass functionality. Follow the accompanying patterns to start safely utilising @extend.

Read the rest of this entry

100 CSS and JavaScript tutorials to boost your skills

There are so many blogs and sites publishing high quality CSS and JavaScript tutorials these days that it can be hard to keep track – and it’s easy to miss an amazing tutorial completely. And sod’s law dictates that the one you do miss will be the one that could have saved you days of work on your latest project

So to help out we’ve rounded up some of the very best CSS and JavaScript tutorials from around the web, covering web design techniques old and new, how to use the latest tools and frameworks, and a series of projects you can sink your teeth into. They’re all written by leading experts in the field, and many come with downloadable code you can play around with. Finally, we’ve grouped the tutorials into a series of categories to make it easier to find what you’re looking for.

Read the rest of this entry

Top tools for testing your responsive site

Technical leads John Cleveley and Tom Maslen reveal the tools they use to ensure the BBC News site behaves itself.

RWD has far more visual variations than traditional approaches. This can lead to frontend code becoming increasingly fragile.

CSS preprocessors, such as Sass, can help in keeping code DRY and modular. For JavaScript, RequireJS promotes great, decoupled code if used correctly. But even with the best code in the world, testing all the responsive variations is the only way to be confident the site works.

Real devices

You can’t get better than having real devices to test on: feeling the tactile response and quirks can make the difference between a good site and a great site. This is tough for small teams who can’t afford a cupboard full of devices, but even investing in a few of the most popular ones will be money well spent.

Simultaneous device browsing

Once you start to build up your collection, a tool like Remote Preview saves a lot of time. It lets you preview your site on a large number of mobile devices at the same time, so you can quickly scan through your pages across devices and pick up layout and behaviour issues.

Automated behaviour tests

If manual testing sounds too much like hard work, adding a suite of automated tests is well worth the initial upfront cost. We use a combination of:

For responsive sites, you can easily resize the PhantomJS window to check behaviour at your breakpoints. For example, we can test if HTTP requests for ‘Tablet’ components aren’t requested by smaller devices.

Visual regression tests

PhantomJS has another killer feature. You can take fully rendered screen shots of your site. We use this to crawl the site, taking shots of pages on our live site and re-running on our test server. You can process the images with ImageMagick to compare each page at each resolution. Picking out visual regressions becomes a piece of cake.

Performance testing

Performance is probably the easiest area to neglect. But ignoring it can slowly ruin your site. Again, PhantomJS to the rescue! The browser has an API to save an HTTP ARchive (HAR) file, which records all the requests made by the browser.

Uploading HAR data to a tool such as HAR Storage or HTTP Archive helps to visualise HTTP metrics over time and highlights areas to optimise.

4 ways to create CSS that’s modular and scalable

Several methods have emerged to help designers write scalable and modular HTML and CSS. Freelance web designer Steven Bradley presents an overview of four.

Modular and scalable CSS

Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites.

Read the rest of this entry

Adobe Creative Cloud: everything you need to know

2013 has been a big year for Adobe. Rather than jumping from CS6 to CS7, the design software giant instead released new ‘CC’ versions of Photoshop, Illustrator, Dreamweaver, After Effects, InDesign, and more, exclusively through its Creative Cloud subscription service. All new features and products will be released this way from now on – so unless you want to be stuck on CS6 forever, you need to sign up.

Are you going to subscribe? There’s a lot to take in before you make the decision, so here we’ve collected our articles about the Creative Cloud together in one handy post to help you out. See below to discover where you can find the exact details you’re looking for…

Read the rest of this entry

Build a basic responsive site with CSS

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website


Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers seem to me to have misunderstood the problem it’s trying to solve.

Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes.

In this tutorial I’ll look at the principles behind responsive web design in detail, so we’re sure to understand the concepts correctly. Once we’ve got that out of the way, I’ll walk you through building a website that scales perfectly on both large and small screens.

Responsive web design has mainly become a hot topic because more and more people are using mobile devices such as iPhones, iPads, and BlackBerrys to access the internet.
Read the rest of this entry

How to design great web forms

Need to make a web form? Unsure where to start? Jessica Enders has a recipe for forms that’ll work for you – and the people filling them in

This article first appeared in issue 240 of .net magazine – the world’s best-selling magazine for web designers and developers.

When it comes to forms, the temptation is to dive straight into the details. Do we need to collect phone numbers or just email addresses? Should this button say ‘Submit’ or ‘Apply’? And so on. But as with any successful design or development project, the best place to start is establishing the overall framework.

As the author of the famous Seven Habits of Highly Effective People, Steven R Covey, said: “Begin with the end in mind.” For forms, it’s important to clearly define what the form must achieve. The ‘six Ws’ of journalism are useful:

  • What information do we need to collect?
  • Why is that information needed?
  • Who is going to use this information?
  • How will the information be used?
  • When do we need the information?
  • Where is the information going to live?

You’ll see that these questions don’t talk about forms at all – their focus is on information. The form is just a tool for gathering this information. Therefore, its design should be determined by the information need. Discussing the above questions with key stakeholders will help elicit constraints, which will also influence the design of the form. These constraints may be about any part of the process, from the development platform (for example, to ensure connectivity with legacy systems) through to the need to collect data in particular formats (to be consistent with relevant standards, for instance).

Read the rest of this entry

Use CSS transitions for link effects

Bringing hovers back from the vaults, Jenn Lukas explains how to use CSS3 transitions to create fun link effects and enhance user experience

This article first appeared in issue 239 of .net magazine – the world’s best-selling magazine for web designers and developers.

Steering clear of tacky Flash interactions, page corner flips and the MM_SwapImage hovers of past years, CSS transitions can add nifty and contemporary effects. CSS3 offers a variety of properties to transition. By applying these transitions to links, and changing the link properties on hover, we enhance the way users interact with designs.

If they’re thrown into page design without careful planning, transitions can end up simply distracting users. After all, for most sites, content remains the top priority. However, by adding neat responses to hover and focus (always remember to pair these together for keyboard users) we can introduce just the right amount of surprise and delight when the user initiates the sequence to enhance their experience without CSS tricks getting in the way.

Read the rest of this entry

%d bloggers like this: