Responsive Report

2013

Who Cares?
Who responded to our survey?
Challenges
What are people finding difficult about responsive design, and why?
Feelings
How do people feel about the changes responsive design has brought?
Trends
What recurring patterns are we seeing, and how do these change over time?
Tools & Resources
What apps, frameworks or others solutions are people using? What articles and tutorials are shaping our understanding?

In 2012 and again in 2013, we ran a survey investigating the struggles of modern web design. More specifically, the surveys dug into responsive design, and how it affected workflow for web workers in all sorts of situations.

At first, we only intended for this to be used by our team to get a better understanding of this new responsive world and how Gridset might fit into it. But after completing our analysis, we were left with data that we felt was too valuable to keep locked away.

So here it is, in five digestible sections.

Who Cares?

We received 512 responses to the 2012 survey, and 496 responses in 2013. Each year we asked for basic demographic data so that we could better understand who we were listening to. We asked respondents to select their role and the type of organization they work for. We consider these to be the people that are concerned about responsive design.

It should be noted that this data is skewed by our team’s ability to reach people through social media and our blog, but even within this skew there are interesting trends. We’re sharing this part of the data to make it easier for you to keep in mind the people these numbers represent while you’re reading through the results.

Organizations with 2–10 people are considered Small; 11–50 people are Medium, and over 51 employees are Large. Also, we use the term Hybrid to refer to someone who works in both design and front-end development.

Changes

From 2012 to 2013, results for role and organisation type did not shift dramatically. We saw a broadening of roles that added more user experience people and front-end developers, and a larger portion of respondents from medium-sized and in-house organizations.

Role

2012

Organization

2012

Role + organization = environment

By creating a pivot table – or cross-section – of our role and organization data, we were able to see the type of organization each respondent was mostly likely to work at, based on their role. This gave us a much clearer view of the working environments of our respondents.

FreelanceSmallMediumLargeIn-house
Designer18.18%27.27%21.21%15.15%18.18%
Front-end developer19.4%29.85%32.84%11.94%5.97%
Hybrid38.41%20.29%15.94%13.04%11.59%
UX14.29%7.14%21.43%39.29%17.86%

Challenges

To understand the current status of responsive design in the web industry we asked respondents to tell us what aspects they found most challenging in their work. Testing and workflow were the most-reported pain points across all groups.

Those working in-house and in medium to large companies were much more concerned with challenges around process than average. Freelancers and those working at small companies were more concerned with optimisation and challenges of time and cost than average. Small and medium sized companies were more concerned with testing and quality assurance (QA) than the other organization types.

Percentage of respondents reporting challenges in:
It’s our job to educate the client as to why our work is worth the cost, so that onus is ours, but it can be a difficult obstacle to overcome.”Anonymous open-ended response

Changes

The main challenges in 2012 and 2013 were similar, except that internal challenges within organisations and worries over time (processes taking too long once the project has started) were more concerning for respondents. There was also an slight overall drop in the number of times each challenge was selected, as you’ll see from the chart above.

Top 15 Challenges mentioned in open-ended responses

When asked to elaborate further on their challenges, comments centred on education, workflow, testing, and clients. We sorted through more than 400 open-ended responses, tallying keywords and ranking them by the number of times they appeared.

20132012
1EducatingTesting
2WorkflowWorkflow
3TestingEducating
4ClientsTime
5TimeInternal
6SilosClients
7InternalLearning
8ImagesSilos
9OptimizationImages
10QualityCost
11LearningQuality
12CostOptimization
13ToolsTools
14LayoutBreakpoints
15RetrofittingCMS
Hover a term at right to learn how we defined it in this report.
Select a term above to learn how we defined it in this report.
Advertising
Responsive design implications on online advertising units.
Breakpoints
At what sizes to add media queries.
Clients
Challenges that stem from clients. (vs Internal)
CMS
Limitations within content management systems.
Content
Content strategy and issues with structuring content.
Cost
Issues with cost for projects, when bidding and when in progress.
Deliverables
Concerns with what to show the client in a responsive process.
Educating
Respondent needing to educate others, such as clients or fellow team members.
Estimating
Problems with budgeting time and costs before the projects starts.
Front-end Development
Detailed problems with implement responsive designs in HTML/CSS/JS.
Images
Implementing responsive image solutions.
Internal
Challenges within the organization. (vs Clients)
JavaScript
Responsive design implications on JavaScript.
Layout
Where to put what on screen, and how to squeeze complex content onto small screens.
Learning
Respondent needing to learn and keep up with practices.
Migration
Issues dealing with moving legacy content into responsive environments.
Navigation
Issues adapting navigation to multiple environments.
Optimization
Concerns with web performance. Too many assets and long load times.
Quality
Concerns with producing a polished result. “Pixel-perfection.”
Retrofitting
Making existing design, content, or sites responsive.
Silos
Problems due to separation of labour. For example: designers vs developers.
Testing
Issues with testing time, difficulty, and want of myriad devices for testing.
Time
Issues with processes taking too long, once the project has started.
UX
User Experience concerns with responsive designs.
Workflow
Process challenges for a team or individual. Focussed on efficiency and continuity.
Tools
Difficulties with working with tools, or need for tools.

Feelings

Responsive design was a definitive transition. There was no question tied to feelings in the surveys, but while reading through nearly 1,000 long-form responses, some emotions came through loud and clear. We did our best to capture, tally, and rank the feelings as we went.

  • 2012
  • Fear
  • Anger
  • Frustration face Frustration
  • Oppression
  • Enthusiasm

Comments

The designer hands me a 960 pixel [wide] PSD and says ‘this needs to be responsive.’”
The details seem to be neglected.”
…every client needs an education on web design, the process of web design, and the internet.”
…usually the design is signed off (and paid for), the client is happy, and I’m left to make important design decisions when I’m just a developer!”
Previously the client knew exactly what they were getting – here’s a Mockup™ aaaaand it’s live! Voila.”
  • 2013
  • Lonely
  • Frustration (outward)
  • Self-reliant
  • Future-focussed
  • Accepting

Changes

2012 to 2013 saw a transition in attitudes. Whereas 2012 was wrought with an array of negative emotions – mostly around the frustrations of learning new processes – in 2013 the clouds started to part. The struggles of 2012 transformed into signs of confidence in 2013.

Trends

After diving deep into the challenges and feelings around responsive design processes, and how they changed from 2012 to 2013, patterns started to emerge. Here are a few trends we observed.

Workflow mapping

Across the different organization types, we noticed that the smaller the organization, the more fluid the workflow becomes. We observed traditional waterfall and agile processes, and coined a new term for those that are beginning to avoid a linear process altogether: Everything All The Time (EATT).

Waterfall, Agile, EATT
The process by itself is not hard… but when clients ask for responsive layouts halfway through the development process, [that] makes it [more] difficult. Also, it drives me nuts when our designers nitpick the littlest issues between browsers during development.”

Harder to be more designer than developer. The practical beats the aesthetic every time now.”

Silos

Varied workflows, and the opinions shared about each, highlighted a new problem facing the adoption of responsive design: silos. We use this term to describe the dividing parts of the web design process undertaken by teams focused on one task. For example, an organization may separate design, front-end development, and UX into different teams.

Respondents noted that responsive design required more communication between designers and developers, and where silos were in place, this caused a lot of friction. Often, the open-ended responses mentioned other roles as responsible for process breakdowns.

Tools & Resources

We asked respondents to name the tools they used each year to help make their responsive processes easier. The question was open-ended, but we were able to count and rank the tools mentioned the most. Changes between 2012 to 2013 further highlighted the shifting priorities our respondents were facing.

20132012
1FrameworksEdge Inspect (Shadow)
2SassFrameworks
3PrototypingSass
4Browser inspectorGrids
5PhotoshopBrowser inspector
6Paper / Markers / SketchesPhotoshop
7Edge Inspectless
8WireframesTwitter
9Sketch appPaper / Markers / Sketches
10CodeKitSublime Text
11BrowserStackCodeKit
12lessCoda
13TypecastPrototyping
14Sublime TextFireworks
15Style tilesBoilerplates
Gridset removed from rankings.

Survey methodology

Back in January, while knee-deep in planning for Gridset we began digging into an invaluable bit of research: The Business of Responsive Design Survey our very own Mark Boulton had run for two consecutive years. Since then hundreds of responses have been sorted into themes, pulled into pivot tables, and conclusions drawn – all to create the report you’re reading now.

Interested in finding out more about our process? Research director Emma Boulton has written all about it on our blog.

Influential resources for 2013

A curated list of the most insightful responsive design resources we found in 2013, organized by theme. In no particular order.

Big picture
Surveying the Big ScreenMike Pick
Data Monday: Impact of Responsive DesignsLuke Wroblewski
The Business of Responsive DesignMark Boulton
Windows on the WebKaren McGrane
Design
Made to MeasureAllen Tan
Designing for BreakpointsStephen Hay
Video: Antiphonal GeometryOwen Gregory
Logical Breakpoints For Your Responsive DesignVasilis van Gemert
Development
Choosing A Responsive Image SolutionSherri Alexander
Video: Cutting the MustardTom Maslen
Setting a Performance BudgetTim Kadlec
Content
Responsive Design Won’t Fix Your Content ProblemKaren McGrane
Clients
Client Relationships and the Multi-Device WebMatt Griffin
Selling Responsive Web Design To ClientsJeremy Girard
Back to contents