Category Archives: CSS
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.
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.
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:
- Cucumber – BDD framework
- Capybara – DSL for driving browsers
- Poltergeist – Capybara driver for PhantomJS
- PhantomJS – Headless browser (no GUI) based on WebKit
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 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.
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 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.
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…
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
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).