Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Responsive Web Design’.

We are pleased to present below all posts tagged with ‘Responsive Web Design’.

Logo Design For Responsive Websites

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.

Logo Design For 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.


Quick Tips Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF)

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.

Front-End Tips and Tricks: Slides PDF

I love finding those little useful front-end goodies that make our lives easier. Since technologies emerge and evolve permanently, keeping track on what's going on is often difficult, especially since specifications change and so does the browser support. For a replacement talk at SmashingConf Oxford last week, I've decided to collect some of the useful techniques from various articles, conversations and my workshops in a slide deck — and since it proved to be useful for many front-end developers I've spoken to after the talk, I'm very privileged to share it with the entire community as well.


Efficient Responsive Design Process

What's your responsive design process like? Do you feel that it's efficient? The following article is an excerpt from Ben Callahan’s chapter “Responsive Process,” first published in the Smashing Book 5 (table of contents). We've collected some useful techniques and practices from real-life responsive projects in the book — and you can get your hard copy or grab the eBook today. You will not be disappointed, you know. —Ed.

Responsive Process

“The successful respondent to this RFP will provide three static design options for our team to evaluate.” I’ve never been a huge fan of taking a multi-option design approach, but I get it — sometimes a client needs this. “Each of these options will provide design for three unique layouts: home page, listing page, detail page.” All right. Now, we’re up to nine static design files. This is getting a bit out of hand.


Quick Tips Creating Content Wireframes For Responsive Design

As I was leading my course in responsive web design between 2011 and 2012, I kept stumbling over the process of wireframing. My students tended to focus on the wireframe as being the end game in the planning process. They didn’t understand that responsive design focuses on how users will access the content.

How To Create Content Wireframes For Responsive Design

You can only imagine my relief when I happened to come across a video by Stephen Hay speaking at the Beyond the Desktop conference in 2012. There, in his talk on responsive design, he presented the concept of the content wireframe. This was a huge relief to me. I just knew there was a step before the process got real, but I couldn’t articulate it. In this post, I’ll describe the methods I use to get from content to responsive wireframe — and how you can, too.


Responsive Image Breakpoints Generator, A New Open Source Tool

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. We can solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

Responsive Image Breakpoints Generation: Challenges, Mistakes And A New Solution

The lives of web developers aren’t getting any simpler as the number of different devices and potential screen resolutions increase. The high-resolution arms race seems to be never-ending as vendors try to top one another with innovations in laptop and mobile device screens. New devices such as TVs and smartwatches are entering the market, making the race even more complex.


Responsive Images Now Landed In WordPress Core

While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. Although it is entirely possible to write the feature into your theme on your own, doing so is a challenging and time-consuming endeavour.

Responsive Images In WordPress Core

Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let's take a look at how the feature works, and how you can use it to get the best support for your WordPress site.


Responsive Upscaling: Large-Screen E-Commerce Design

The responsive design revolution is truly upon us (if it hasn’t already happened!), and even though e-commerce websites haven’t picked up responsive design quite as aggressively as in other industries, it’s becoming increasingly popular.

Responsive Upscaling In E-Commerce

So far, most of the responsive design thinking has revolved around covering the range of experiences from mobile to desktop. Yet little attention has been paid to the opportunities for expanding that range beyond the standard desktop screen, to create an experience optimized for modern large-scale displays.


Typographic Patterns In HTML Email Newsletter Design

Last year I read Jan Constantin’s post “Typographic Design Patterns and Current Practices” and straightaway wanted to do something similar with email. At the time I was studying responsive typography on the web, trying to break down the websites I liked in order to understand what made the typography work so well, then attempting to apply those findings to email design.

Typographic Patterns In HTML Newsletter Email Design

After seeing Constantin’s work, I also wanted to explore how other email designers were handling responsive typography. So, I amassed 50 emails across various industries that I think do a good job with typography to see if any patterns emerged. You can skip straight to the Google Doc showing the raw data and results.


From Russia With Love: Behind The Responsive Redesign Of

Relaunching a large-scale website is always quite an undertaking, especially if the task involves a huge political entity with content accumulated over a dozen years. In this article, we look behind the scenes of the responsive redesign of, Russia’s most prominent government website.

Search on

We had an opportunity to talk with Artyom Geller, one of the creative minds responsible for the design and UX of the project. We talked about the design process, the challenges and constraints, creative front-end solutions, as well as unusual budgets and stakeholders. —Ed.


↑ Back to top