🌐 Public

Responsive Web Design

By Roy Swinkels

Introduction

Get quickly involved into designing and building a responsive interface.

Roy Swinkels — Passionated about a lot of things in life.

1 Responsive Strategy

Right now around 11 or 12% of the top 100,000 sites are responsive, and no doubt that number is slated to rise over the next few years. As the people in the depraved cat-skinning business say, "there's more than one way to skin a cat." The sick bastards. As more organizations roll up their sleeves to tackle the realities of

Added by Roy Swinkels: “Case study.

2 Breaking down the Grantland 3.0 redesign

Bill Simmons' Grantland unveiled its third iteration this week. The long-form sports and pop-culture media site originally launched in June 2011 with top-tier writing talent and a license to be to ESPN what Miramax was to Disney, "a boutique division with more room for creativity." The site relaunched on Wordpress VIP, practitioned by ESPN and 10up, a company specializing in

Added by Roy Swinkels: “Make your website responsive, soon!

3 Roughly 1 in 8 websites is Responsive

I've been on a bit of a quest to find out how many responsive websites are out there. In a recent post, I describe a decent way to track the adoption rate of the "One Web" concept, but that technique doesn't work well for tracking responsive design. Now, I think I found the trick for automatically identifying a responsive site.

Added by Roy Swinkels: “There's a new standard in town.

5 Built-in Browser Support for Responsive Images

Introducing the <picture> elementThe <picture> element offers a declarative approach towards image resource loading. Web developers will no longer need CSS or JavaScript hacks to handle images in responsive designs. And users benefit from natively-optimized image resource loading-especially important for users on slower mobile internet connections. Alongside the newer srcset and sizes attributes recently added to<img>, the<picture> element gives web

Added by Roy Swinkels: “SEO is also important for responsive websites.

7 SEO For Responsive Websites

When Google announced its preference for user-friendly responsive websites in June 2012, I immediately saw an influx of posts that equated responsive design with search engine optimization. This is unfortunate because, while responsive websites can be SEO-friendly, some responsive websites are not. I know not everyone's definition of SEO is the same, so for those of you who don't know

8 Infographic: Responsive Images Problems and Solutions

How are we supposed to deal with responsive images? We in the web community ask ourselves this very question time and time again to no avail. Just when you think you've found a so-called solution, it has knock-on effect causing problems elsewhere; we take one step forward and two steps back. Currently on the web there are tons of articles

Added by Roy Swinkels: “Let this plugin take care of responsive images.

9 Automate Your Responsive Images With Mobify.js

Responsive images are one of the biggest sources of frustration in the Web development community. With good reason, too: The average size of pages has grown from 1 MB to a staggering 1.5 MB in the last year alone. Images account for more than 60% of that growth, and this percentage will only go up. Much of that page weight

10 Tech Talk: Intro to Responsive Web Design

Meetup group "Responsive Web Design SF" kicked off their first event at Tagged HQ with an intro presention by Tara Feener. At Tagged, we believe knowledge is power, so we hold weekly "Tech Talks" to support knowledge sharing within our team and the broader tech community. Visit blog.tagged.com for more information.

11 Designing for the Responsive, Retina-Friendly Web

In her presentation at An Event Apart in San Diego California 2013 Sarah Parmenter talked about the changes responsive Web design requires of Web designers. Here's my notes from her talk on Responsive Design Workflow: Any change is accompanied by drawbacks and discomforts. We're going through this transition right now. Responsive design is new and can be hard. We're used

12 Responsive Layouts - How To Maintain Hierarchy Through Content Choreography

One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post " Content Choreography," which showed how visual hierarchy gets lost when columns are dropped below one another. What Is Content Choreography?As a

13 Responsive Navigation: Optimizing for Touch Across Devices

As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The DemosWhy do these navigation menus work across a wide

14 The State Of Responsive Web Design

Responsive Web design has been around for some years now, and it was a hot topic in 2012. Many well-known people such as Brad Frost and Luke Wroblewski have a lot of experience with it and have helped us make huge improvements in the field. But there's still a whole lot to do. In this article, we will look at

15 Adaptive Vs. Responsive Layouts And Optimal Form Field Labels

Editor's note: Welcome to a new column in the UX Design section on Smashing Magazine! Each month we'll pick a handful of popular questions asked by our readers around good practices in designing smart and usable experiences. They will be answered by Christian Holst, a regular author here on Smashing and founder of Baymard Institute. Prior to co-founding Baymard Institute

21 How to Design a Mobile Responsive Website

To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website? With mobile internet users set to surpass desktop internet users in the US by 2015, with tablets

22 Designing for Breakpoints

Issue № 376by Published in Stephen HayContent Strategy, Graphic Design, Responsive Design · Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves-perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes,

23 Must-know facts about responsive design

Responsive design is a relatively new term in web design. It was only coined three years ago in May of 2010, when web designer Ethan Marcotte used the term in his article for A List Apart. Today, there's even a mini debate going on regarding whether responsive design is here to stay or whether it's just a flash in the

24 Setup to Build Responsive Websites

Eric Wendelin is one versatile dude. When I met him he was writing Java at a small startup called Sun / Oracle, and now he's writing front-end code for a startup -- that's a big leap. With this responsive design post, Eric flexes a little muscle and shares his process for putting together a responsive website. Not long ago, the

26 Choosing A Responsive Image Solution

If you code websites, it's a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you'll need a strategy to make images flexible, too - a responsive image solution. The

27 24 ways: Responsive Images: What We Thought We Needed

If you were to read a web designer's Christmas wish list, it would likely include a solution for displaying images responsively. For those concerned about users downloading unnecessary image data, or serving images that look blurry on high resolution displays, finding a solution has become a frustrating quest. Having experimented with complex and sometimes devilish hacks, consensus is forming around

28 24 ways: Adaptive Images for Responsive Designs... Again

When I was asked to write an article for 24 ways I jumped at the chance, as I'd been wanting to write about some fun hacks for responsive images and related parsing behaviours. My heart sank a little when Matt Wilcox beat me to the subject, but it floated back up when I realized I disagreed with his method and

29 Responsive Web Design

Issue № 306by Published in Ethan MarcotteCSS, Layout & Grids, Mobile/Multidevice, Responsive Design, Interaction Design · The English architect Christopher Wren once quipped that his chosen field "aims for Eternity," and there's something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. A building's

30 Responsive Web Design Examples for Inspiration

Manish Salunke , March 20th, 2013 , Tags:CSS & CSS3, Design Best Practices, Development, Innovation, Inspiration, Layouts, Responsive Design, Tech ,Responsive web design is the practice of enhancing the experience of the user by adapting the web page layout to the device he or she is using when accessing the site. There are several ways to create a responsive web

31 5 lessons from a responsive web design classroom

net magazine is the number one choice for the professional web designer and developer. It's here that you find out about the latest new web trends, technologies and techniques - all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front and backend tutorials on subjects

33 Responsive Images With CSS Background Images

Editor's Note: This article features just one of the many, suboptimal solutions for responsive images. We suggest that you review different approaches before choosing a particular responsive image solution, including these two: How To Avoid Duplicate Downloads In Responsive Images and Choosing A Responsive Image Solution.With all the talk of new HTML5 standards such as the attribute and element, as

Added by Roy Swinkels: “Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

34 Multi-Device Layout Patterns

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts. To

Added by Roy Swinkels: “James Young recently surveyed his fellow designers about the biggest problems they face on responsive sites. Here, he reports on the results – and offers his solutions

35 The top responsive web design problems ... and how to avoid them!

net magazine is the number one choice for the professional web designer and developer. It's here that you find out about the latest new web trends, technologies and techniques - all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front and backend tutorials on subjects

Florian Sänger

Freshman

  • 0 Playlists
  • 0 Followers

Wendy Meerkerk

(Web)designer from Rotterdam

  • 0 Playlists
  • 0 Followers

monteroramses

Freshman

  • 0 Playlists
  • 0 Followers

Lordmando03

Freshman

  • 0 Playlists
  • 0 Followers

mia23

Freshman

  • 0 Playlists
  • 0 Followers

Imran Khan Limon

Freelance UI/UX/ Web Designer

  • 0 Playlists
  • 0 Followers

adbk

Freshman

  • 0 Playlists
  • 0 Followers

Ashley Nee

Freshman

  • 0 Playlists
  • 0 Followers

Mariya Lambrianov

Freshman

  • 0 Playlists
  • 0 Followers

Otakuguy01

Freshman

  • 0 Playlists
  • 0 Followers

Thiago Silva Ferreira

Freshman

  • 0 Playlists
  • 0 Followers

ftkghost

Freshman

  • 0 Playlists
  • 0 Followers

Taria Dawson

Freshman

  • 0 Playlists
  • 0 Followers

Brandon L. Harris

Freshman

  • 0 Playlists
  • 0 Followers

heychris

Freshman

  • 0 Playlists
  • 0 Followers

Alex

Designer | Sociologist | Aspiring Cheese Connoisseur

  • 0 Playlists
  • 0 Followers

cld3800

Freshman

  • 0 Playlists
  • 0 Followers

ziomss

Freshman

  • 0 Playlists
  • 0 Followers

Iman Carr

Multimedia Interaction Designer & Developer

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?