WordPress responsive web design – a designer or developer’s job?

March 26, 2018

Responsive web design has evolved so quickly – both in WordPress web design and other platforms – that it’s easy to be “reactive” rather than taking time to plan the best approach.

One big dilemma with responsive WordPress websites is who should be responsible for designing for smaller screens. Traditionally, a custom WordPress web design project would follow these steps:

  1. A designer creates a design for the site in Photoshop (PSD)
  2. The client requests any revisions and signs off the design
  3. A WordPress developer converts the design into custom WordPress theme

So how does responsive web design fit into this process?

Responsive web design – what usually happens

In my experience, responsive web design projects usually follow this process:

  1. A designer creates a design for the site in Photoshop (PSD)
  2. The client requests any revisions and signs off the design
  3. A WordPress developer converts the design into custom WordPress theme
  4. After coding the full width layouts, the WordPress developer uses their initiative to code the layouts for smaller screen sizes too

This approach usually produces perfectly acceptable mobile-responsive websites that work well from a technical perspective. However, it does have its downsides:

  • Most WordPress developers are programmers rather than designers and may focus on the functionality of each layout rather than the design and visual appearance.
  • Many WordPress developers are not trained and experienced in usability for mobile devices. Usability issues are very different for touchscreens, swiping etc. For example, you may not realise that a button needs to be enlarged to make it easy to tap on a touchscreen.
  • In my experience, mobile layouts designed by WordPress developers tend to be narrower versions of the full width layout, with the content stacked vertically. This can work fine, but it’s inevitably less creative than considering each screen size from a fresh perspective and designing it accordingly.

Responsive web design – what could happen

In my experience, the main reason why WordPress developers are usually expected to design the different responsive layouts is budget. The lowest cost way to produce a professionally designed bespoke WordPress website is for the designer to create one version of the design. The developer will then use this as the basis for all the responsive layouts.

If budget is really an issue then this is an acceptable way to produce a custom designed responsive WordPress website. However, ideally the budget would be available for the designer to provide PSD designs for each screen size. The WordPress developer would then implement these designs accordingly.

And of course, “Mobile-first” design is a fast growing trend in web design that has emerged in the last year or so. This is where the designer actually designs the mobile version first and then creates wider versions later, and is an alternative way to approach responsive design. Mobile-first design is a great way to ensure that user-experience is prioritised for mobile users and is becoming increasingly popular.

Realistically, at some point in their careers, most WordPress developers will be given a full-width design and asked to produce the responsive layouts. This means that WordPress developers should ensure they understand the main issues relating to usability for different screen sizes. That way, WordPress agencies can improve usability in their responsive web design projects regardless of the budget.

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

Please share your thoughts...

Your email address will not be published.