There are certain frustrations as front end web developer you might come across when you receive a responsive design from your web designer.
I’m a front end developer who likes to design the UX / UI and then implement that into code. I find this process is easy for me because I have an understanding for how the code will work, so straight away I know how I’m going to write the markup & what the limitations are. Now Its not always possible to be the one who designs and codes a website, this happens with my current job. We have a designer which leaves me to implement these designs into code, but sometimes there are little issues that crop up from time to time which I would like to discuss and give tips to the designers out there.
Firstly I will assume you know what a grid system is, as a web designer I feel this is a minimum requirement. Now I’m not saying you need to stick to a grid system at all, some of the best designs I have seen throw a grid system out the window, but it is something you should always have in the back on your mind. If you are not sure what I am talking about I will probably write a blog post about it in the future, but for now head here and have a quick read at this smashing magazine article.
So here is the problem:
As you can see below, element number <2> is being taken out of position for the mobile version of the website.
As you can see below, element <2> has to be duplicated to account for the position change on different screens sizes.
The top <2> will be hidden on mobile, while the bottom <2> will be hidden on desktop.
The Real Issue
If element <2> is an image, then this isn’t a hard problem to fix. If element 2 is text then this is where the problem occurs because you’re going to need to duplicate something that might get edited. Meaning that if someone(a client) goes to change the text, especially if its in a CMS like WordPress, they will have to do it twice. And this isn’t really acceptable, and kinda defeats the purpose of a CMS in the first place.
At the end of the day, its all just a case of education and communicating with your team so that they understand the technical limitations or difficulties that might arise. If you can talk to your designer and just let them know that this is something to be aware of the whole process will be a lot less frustrating and time consuming. win. win.