Designing with Code in mind

(Last Updated On: August 15, 2016)

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.



The Code:

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.


The Solution

There isn’t really any magic solution for this, I would just suggest that the designer keep this in mind when designing. A designer who has never coded will never understand this, so its just a little learning step they have to take that will really speed up production. There are ways you could do this without duplication the code, like JavaScript or Flexbox but then you depends on JS for layout, and also Flexbox isn’t supported by ie9 (not that I would care, but the layout might not call for it).  I do no want designers to hold back, hell I’m not going to hold back, but I will always keep the code in mind.


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.


Leave comment

Your email address will not be published. Required fields are marked with *.