Responsive Report 2014

Brought to you by

No one said designing content for every possible environment was going to be easy. In our last Responsive Report, the frustration with Responsive Design and all it entails was lurking behind a majority of responses, a result of our day-to-day web design tasks becoming exponentially more difficult. But this year, there’s a noticeable shift in respondent attitudes.

Good news web workers: we’ve gotten better. Our tools have improved, our standards are aligning, and Responsive Design thinking is rooting deeper and deeper into the organizations we work with everyday. One year later, this growth has matured the tone of our survey responses to that of confidence, both in execution and in the validity of strategies.

Responsive Design has levelled up.

Contents

Audience
A look at our survey respondents.
Challenges
Difficulties faced by respondents.
Feelings
The emotional undercurrent of responses.
Trends
Key takeaways from this year’s results.
Resources
Articles & tools that shaped RWD this year.

Audience

1014 people answered the survey last year, which is more than twice that of the previous year (496). In 2014, the roles and types of organizations taking responsibility for Responsive Design were shifting. Compared with 2013, we still see a large number of hybrid designer/developers and freelancers, but in 2014 we also saw a significant rise in management roles and in-house teams getting involved.

Role

The largest portion of respondents self-identified as hybrid designer/developers (38%), but this group is getting smaller: declining by 8% from 2013. Front-end developers (33%) grew the most over the last year with an increase of 10%, representing the largest change amongst the roles, and the only group reported in 2013 that increased in 2014. Designers (11%) and UX designers (7%) dropped slightly.

Business manager (4%) and project manager (3%) are new for our 2014 report, due to notable increases. These roles were tracked in 2013, but did not represent a significant amount of responses.

Organization

In our 2014 survey, we added more detail to the in-house category by splitting it into three organization sizes, matching the sizes mapped to agencies: small (up to 10), medium (10-50), and large (50+).

We saw remarkable growth for in-house teams in the 2014 responses. While in-house as a whole only represented 11% of respondents in 2013, in-house teams at large organizations made up 18% of our 2014 group. When including medium organizations (6%), the in-house responses grew by more than double in 2014 at 24% total.

Large agencies saw the most decline this year, dropping by 9%. Medium agencies declined as well (5%).

Environment

We define “environment” as role + organization type. By cross-referencing these two metrics, we can see how organizations are structured for Responsive Design, and isolate the key environments that our respondents represent.

“Optimization is hard. People think it’s done right, when it looks right when it isn’t done right at all.”

Challenges

We are getting better at working responsively, but while workflow concerns are diminishing, problems dealing with performance and sharing knowledge are growing. Optimization rose to become the top Responsive Design concern, up 11% from 2013 to 48% in 2014. Right behind it, educating clients (47%) about the impact of responsive design on projects debuted on this chart as the second most important concern for respondents. Learning the latest techniques also made its first appearance at 43%.

Testing – always a stubborn, chart-topping challenge for responsive design – made another strong showing (47%) as working with multiple viewports and operating systems continues to be a challenge.

Open-ended challenge responses

People were asked to elaborate on the Responsive Design challenges they faced in 2014. As we have in previous years, we categorized these open-ended responses manually by reading each and every one, and then tallied the results to generate these rankings.

Testing is back on top as the most mentioned topic, and clients are becoming more of an issue, year on year. Learning made the largest jump up the ranks, climbing six places on our table, while workflow fell six places. Content and browser specifications make their first appearances this year.

201420132012
1 Testing Educating Testing
2 Clients Workflow Workflow
3 Time Testing Educating
4 Educating Clients Time
5 Learning Time Internal
6 Silos Silos Clients
7 Images Internal Learning
8 Workflow Images Silos
9 Cost Optimization Images
10 Content Quality Cost
11 Browser specs Learning Quality
12 Internal Cost Optimization
13 Layout Tools Tools
14 Quality Layout Breakpoints
15 Optimization Retrofitting CMS
Hover over a term 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 the page, and how to squeeze complex content onto small viewports.
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.
Browser specs
Concerns with the overall HTML or CSS specification and its implementation.

Feelings

Over the past three years, the Responsive Survey has offered a catharsis for the trials and triumphs of a web community dealing with constant change. Unsurprisingly, some emotions leaked through in the open-ended answers. For each report, we’ve done our best to characterize, categorize, and highlight the strongest feelings.

The last report showed the tension of working with Responsive Design was easing, a trend that continued in 2014 as feelings of confidence trumped frustrations.

2014

2013

2012

2014

2013

chart 1

2012

chart 1

Anonymous comments

“RWD is a state of mind.”
“Not enough conversation between the content and the design side, still. This is crucial!”
“Responsive Design is a wonderful thing, but there is so much to learn and understand before it can be done really well.”
“It’s hard being a cheerleader for RWD in a company that still uses FAX machines to communicate… ugh.”

Tools

We asked respondents to list which tools helped them get the job done last year, and we ranked each by how many times they were mentioned.

201420132012
1 Sass Frameworks Edge Inspect
2 Frameworks Sass Frameworks
3 Grunt Prototyping Sass
4 Sketch Browser Inspector Grids
5 Photoshop Photoshop Browser Inspector
6 Prototypes Sketches Photoshop
7 Sublime Text Edge Inspect less
8 InVision Wireframes Twitter
9 Ghostlab Sketch Sketches
10 Sketches CodeKit Sublime Text
11 Macaw BrowserStack CodeKit
12 Coda less Coda
13 Pattern Lab Typecast Prototyping
14 Emmet Sublime Text Fireworks
15 Device lab Style tiles Boilerplates

Resources

The most influential Responsive Design resources we found in 2014, in no particular order: