Educating designers on responsive and designing for the grid

Hi there,

Apologies from the outset - I’m not attempting to sound demeaning to designers/developers by putting this post up.

At the moment we are going through a phase of developing/designing for semi-responsive to fully responsive with our website content. To my knowledge the designers have a limited knowledge of what is possible/not possible with regard to responsive, aside from sourcing examples that look good around the web (though some which are sluggish and in my opinion from a UX point of view are sub-standard).

Many of the designs that have come across for building would require duplication of content to make them work across desktop/tablet and mobile which makes the pages difficult to maintain and build in general.

Currently we are working with a very basic framework (Skeleton) due to technical limitations (i.e. no JS support) and only looking at desktop and mobile due to an fixed/adaptive website. In a few months time we will be working with Bootstrap and producing fully responsive content.

My question is what would be the best way to approach educating the design team in producing designs that will work across all breakpoints effectively and ensure that build times are kept to a minimum where possible?

If you have any further thoughts around this please feel free to post.

Cheers,

Shoxt3r

There should be no need to duplicate content. It’s an easy mistake to make when new to RWD. Content is html, that does not change, how it looks or is laid out is down to css which can be altered in media queries.

I’m not a fan of “adaptive”. Another easy mistake to make is thinking RWD is all about media queries and targeting layouts to specific sizes for specific devices, that’s the wrong approach. The key is fluidity, to make the layout work on any size. Then use queries sparingly, only if and when required.

I guess if you are going down the route of Bootstrap, you just all stick to the BS rules and guidelines, and that’s that.

Stop thinking about “breakpoints” as if they exist already. Think “fluid” and break points can be dealt with as they are discovered along the way.

2 Likes

If you really feel education is the issue, then how about offering to subsidize online learning opportunities for them? There are a number of e-learning sites (including here, but it’s just an example - and no, I’m not a paid SitePoint employee)

I guess it depends on their experience to see where the issue lies. If they’re coming from the print world, then it’s definitely an education/experience issue because print and online techniques are definitely different, though some of the same basic concepts can apply. But if they’re experienced online designers, then I would say the issue may be more one of setting basic requirements and expectations. Set minimum expectations. What MUST be able to be done on all devices and what can be minimized. What response times should you expect (though that COULD come down to hardware as well).

A few years ago I had the same problem with a designer whom I work with regularly. I found that demonstrating what responsiveness is on a real site helped them understand how layout/content adapts across various devices. It took a while but eventually they grasped it. When they design a site now they produce a variety of mockups for various device types, eg desktop, tablets and phones so I can get an idea of their thought process.

Another concept you may want to look at is Style Tiles (google it to learn), rather than focus on layout these suggest overall presentation for site.

Lastly, Bootstrap is fine sometimes but it’s terribly bloated unless you strip out stuff you’re not going to use. By all means use it but learning to code your own responsive CSS layouts will teach you a lot rather than relying on someone elses CSS.

3 Likes

I think this issue is pretty simple.

  1. Think iPhone. Design for that and all should work nicely with the obsolete desktops.
  2. Think about what you want your customers to do within the first minute they are on your site.
  3. Have that function or content fit in that first shot of your website on an iPhone.

Almost all the world was “mobile first” before the USA and we have been there since 2012. The iPhone may not be your phone, but it is the #1 worldwide that uses one os from one manufacturer.

People are busy, get them what they want without scrolling, zooming or having to put their magnifiers on. Otherwise they will “bounce” away very fast.

If your dev is stuck on being pretty, tell him you would rather be functionally relevant to your high intent client/visitors. Tell your dev that means high quality content that gets straight to the point and a CTA (or two) somewhere on the first view of your site.

Tell your dev that pretty is nice, but not when it eats bandwidth/and resources or causes your site to take half a day load. Devs love pretty because it sells, but content is what rocks your clients.

Oh yeah, sliders are not good. That is old news as well. Plus they are a pain in the but when it comes to mobile. If you can’t use the element on an iPhone, don’t incorporate it on your site.

Of course there are some exceptions to every rule, but rules are designed to no be the exception.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.