Responsive Design posts

Recently, Condé Nast Digital undertook a complete redesign of the articles published on wired.co.uk. The aim was to provide a more content-first and immersive experience. These aims were established after research by our Information Architect.

We started on the path of fulfilling those aims over a year ago with the redesign of the GQ.co.uk articles and the introduction of what we call the ‘StickyScrollRead’ component, which allowed the editors to embed media that would be pulled out of the body copy at screen widths wider that 1000px and pinned on screen. That meant the user could continue to read the article and still refer to the peice of media that the copy was about. This proved to be a much more immersive experience and allowed the body...

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll...

With every new revision of CSS, a plethora of new, exciting attributes come to light;  one of which being the understated display: flex approach.

The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).

In...

It’s no secret that many believe responsive web is the future. Creating a responsive site means that it’s able to adapt to the many different browsers and sizes that are available. If I want to make sure my website I’ve created on my desktop can be seen on a tablet with minium scrolling and zooming, I’m going to be interested in creating a responsive site.

One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens. It’s not fun having to increase the size of your window or scroll horizontally to see an entire website.

While creating...

Responsive design not only challenge our tools and approaches to web design and development, but also forces us to review our ways of planning and managing content. New workflows require the right tools. Upon first thought, this opens an opportunity for completely new content management systems (CMS) and publishing platforms (and we’ll probably see plenty of them in the near future). But anyone who has ever migrated from one CMS to another knows very well that the process is not painless. So, can we adapt a familiar and popular CMS such as WordPress to help us create and manage adaptive content?

First, we’ll need to get things straight. What does adaptive content mean, and why do we need it in the age of responsive design?

Edge Reflow is one of the exciting new weapons in Adobe’s ever-expanding Creative Suite arsenal; helping to bring the modern web’s powerful features within reach for designers.

Reflow is designed to help creatives work towards the holy grail of current web design standards: responsive design. Previously only possible for the HTML-savvy, now everyone can produce sites that rearrange themselves for different...

Remember the good old days? You know which days I’m talking about; the days not so long ago when we used to design websites to fixed widths. Looking back now they seem like such a simpler time; a happier time; a time when I could recite every font that was available to use online without a second thought. The truth is that Responsive Web Design changed everything. The world was flat and now it’s round, I was blind and now I see, the web was pixels and now it’s percentages.

With the introduction of RWD, it is vital that we as designers evolve our workflow to better suit the demands of the new web. Many of us have voiced our frustrations on how Photoshop’s fixed pixel approach is unsuitable for designing the fluid layouts needed for a responsive website but no useful alternatives have been offered. The web design world is desperate for a bespoke software that is built from the ground up with RWD in mind. Products like Adobe Reflow are a great start, as it shows that Adobe are at least working on a solution, but after spending a few hours with it...

Anyone who’s up on technology has heard of mobile web design and content marketing—two terms used with increasing frequency in the online world.

Can mobile design and a great content marketing strategy be combined without sacrificing either content or design elements? Or does the content of a website suffer because of the restrictions imposed by design for small screens? 

The truth is that great content does not have to be sacrificed for mobile design and can even...

Responsive web design has become a near ubiquitous buzzword on the web. Try searching for #rwd on Twitter to find equal parts content and Twitter spam. This is a common phase in the maturing of a new idea. I remember when AJAX was all the rage; the term got driven into the ground. Now, few people talk about AJAX but libraries like jQuery are fully embraced in a developer’s workflow.

This seems to mirror what’s happening to responsive web design. The term is everywhere. A friend of mine is in magazine publishing, she went to a conference recently, and an editor for a well-known new magazine was talking about upcoming trends and mentioned responsive web design. Editors may not be web professionals, but they know...

Every year the world of web design gets a new catch phrase that trends on just about every discussion platform there is. Some time ago, responsive web design was a blip on the radar that picked up a massive amount of steam recently.

We all know why responsive web design is so important, with the influx of mobile devices designers need some way to present their sites so that it looks as good to a person on their smartphone as it does while sitting in front of a 27-inch monitor. Responsive design is just that, the technology that keeps things standard...

Techniques, technology and terminology change constantly in web design, and keeping up with them is crucial to your success in online design and development.

Device-agnostic and responsive design are two of the current hot terms being bandied around in technology circles, and often in the same sentence.

With the increasing use of a wide variety of internet-enabled mobile devices, web designers and developers are encouraged to keep work responsive; adapting content and design elements to the limitations of whichever device is being used. However,...