We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience, it can be difficult to determine what can be implemented purely using HTML and CSS and what absolutely requires JavaScript.
Through this case study on redesigning the Building Social website, we’ll share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too.
Read more…
SGS (formerly Société Générale de Surveillance) is a global service organization and provider of inspection, verification, testing and certification services across 14 industries. SGS’ website (along with 60 localized websites) primarily promotes the organization’s core services, as well as provides access to a multitude of useful services, supplementary content and tools. Our goal was to transform sgs.com from being desktop-only to being responsive.
This presented a unique set of challenges, especially around the legacy navigation system, which in areas was up to seven levels deep (divided into two parts) and which consisted of some 12,000 individual navigable items.
Read more…
Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.
Read more…
It’s been almost five years since Photoshop Etiquette launched, which officially makes it a relic on the web. A lot can happen on the web in a few years, and these past five have illustrated that better than most.
Read more…
This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.
Read more…
Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Read more…
So how do you sell a design system to the client? How do you establish a shared commitment within the company to put a pattern library on the roadmap? As designers and developers, we often know and see the benefits of an overarching system that radiates consistency throughout the different experiences of a company. But sometimes it’s seen as a very unpredictable investment, and the value isn’t necessarily visible right away.
Read more…
CSS pseudo-classes and pseudo-elements can certainly be a handful. This guide will help you to learn about all the things you need to keep in mind.
Read more…
The modern logo has to work harder than ever before. In the past, a company logo was perhaps intended simply for a shop sign and printed in local newspaper adverts. Today’s logos have to work with a growing plethora of smart devices with varying screen sizes and resolutions, displaying responsive websites.
Often logos end up suffering within responsive website design. Many have not been designed with responsive frameworks and variable sizes in mind, and are just resized to fit whatever available space has been provided for them or not.
Read more…
You know how it works: you spend hours trying to find a workaround for a problem that you have encountered, just to realize that it doesn’t quite work in, you know, that browser. Finding little techniques and tricks to help you get to results faster can immensely improve your productivity, so you don’t have to waste time on solutions that will never see the light of day.
Read more…