Authored by Primate

A rather awesome, informative
and witty blog about all things web

Front-end developers, don’t be shy of design

I really should have created this image myself!

There’s a lot of talk of designers learning to develop, but what about developers learning to design?

I’ve been involved with the “web” for quite a number of years, and began to gravitate towards it while at university. When I say I’ve been involved with the “web” for quite a number of years, more specifically I’ve been working with the web for around 8 years.  Not as long as some people, but a good length of time, and time enough to see changes and cycles in the industry.  Change is obviously common, but there is a change occurring at the moment which I think will impact me (and others) fairly considerably, and it’s a something I welcome happily.

I believe there are many people like me, who are technically minded (perhaps ‘trained’ is more appropriate), but are drawn to the design and appearance of websites.  For me this has led to enjoying HTML and CSS a lot, and spending my time working in that direction.  I get my satisfaction from building a nicely designed website, and enjoy working with designers.  So much so, that I would struggle to enjoy working in a company that didn’t value design.  But as much as I enjoy working with designers, they are upsetting me at the moment because there is a movement for designers to build the sites themselves!

Will the role of a CSS/HTML developer (non designer) exist in the near future?  I honestly don’t know.  Is the current progression of designers designing in the browser a step towards a future where they build the complete site?  A part of me thinks it’s inevitable.  HTML and CSS is not hard, and there is no reason why designers can’t build the sites they design.  It feels to me that browsers have become stable and consistent enough that designers can start dipping into HTML/CSS without the frustration of browser inconsistencies.  Lets also throw into the mix some great learning tools such as Adobe Reflow, and  soon Macaw, which ease the transition between thinking graphically and thinking in CSS.

Partially driven by the responsive movement

Surely the sensible thing for a developer to do in this situation is to start to design themselves. It’s logical, but easier said than done. I don’t know about other developers but I feel a bit shy about trying my hand at design. Personally, it’s the right time for me to stop being so timid about designing, but it’s also a good time for developers to make a concerted effort to keep a design eye on what they build.

If you are part of a team that build responsive websites, I’m sure you are aware that site mockups are starting to become more like site guidelines. It’s very difficult for a designer to graphically document a flexible page, and a static mockup is not up to the job. Designers don’t have a means of presenting their design flexibly. This results in a game of tennis between the designer and developer. The designer creates a mockup which represents the appearance of a web page at a particular width and height, which the developer then builds, attempting to make the design work in the browser and on devices. The designer then needs to become involved again to ensure that spacing, typography, and layout remain solid. Inevitably changes are required and the designer passes the work back to the developer. This back and forward between developer and designer can become very time consuming, and it’s really important that a team limits the amount of iterations that take place.

To limit the amount of iterations a developer should aim to make small design decisions as he builds. I should make clear that the small design decisions are mostly only concerned with layout, spacing, typography, and usability. A developer that has an eye for these things is a great benefit to a web team and it certainly helps to remove a burden from the designers.

As a team, if you would like to be in an ever stronger position, it helps if the designer can do the CSS themselves. At the end of the day, the build sign off comes from the designer, and it’s more efficient if they can tweak CSS and finalise the build to a level they consider “complete”. I think that increasingly designers are going to be delving into CSS, as an inability to portray their design intentions means they have to jump into CSS if they wish to be in control.

Let’s not get carried away

Adjusting things like layout, spacing, and typography are only small elements of an overall design. In fact it might be better to think of these elements as technicalities of the build? The real meat of designing a website must be creating visual concepts and crafting the website experience to align with client requirements and goals. To be able to do that takes another set of skills which take longer to attain and present a higher barrier to entry.

That being said, you need to start somewhere, and turning your eye “on” to the appearance of what you build is definitely a step in the right direction. If you are part of a team building responsive sites, use the lack of a concrete mockup as an opportunity to experiment. Does a page break when viewed on a mobile? Don’t ask the designer for advice straight away, attempt to make it work, then take what you’ve done to the designer and receive feedback. If you’ve done well, you’ve made the build process that little bit more streamlined, and if not at least you’ve perhaps picked up advice that will help you with your next attempt.

You potentially have more time to grow

If your designer colleague starts to pick up some of the CSS, you’re going to have a little more free time on your hands. The designer has effectively taken on some of your responsibility. Why not use the time to branch out your development skills, and to experiment. Have you tried using CSS pre-processors? Do you have a competent level of Javascript, beyond using jQuery plugins?

Using a CSS preprocessor such as SASS really provides an opportunity to organise and streamline your CSS production. Picking up a CSS preprocessor language might seem simple, but like everything there are subtle complexities that occur when you start to become an advanced user. If however you become confident and experienced, you have a tool which is going to increase the ease in which you can manage CSS on larger more complicated websites.

Javascript is a programming language, and can be quite a complicated one at that. In my opinion if you are predominantly a HTML/CSS developer, learning Javascript should be high on your priorities. It’s a skill to be able to write lean, concise Javascript, which is decoupled from your markup and CSS. Not necessarily to write complicated Javascript applications, but to be able to progressively enhance the sites you build.

Change keeps stagnation at bay

Recently in his online journal, Jeremy Keith mentioned the growing diversity of devices, and that people may find the situation depressing. He combats that notion by saying “Let’s face it, the web was getting boring there for a while a few years back”. I really like that kind of response and attitude. Keep upbeat about change, embrace it, and importantly look at the positives, not the negatives.

I quite fancied ending with a quote, and think this one does the job quite nicely:

“Continuity gives us roots; change gives us branches, letting us stretch and grow and reach new heights.”

- Pauline R Kezer

If you liked this article then why not subscribe to our RSS feed.

Author: Chris Lamb

Chris is terrible at coming up with taglines.

Tags

, ,

Comments

Showing 8 Comments

Leave a comment
  1. Spiros Martzoukos August 8, 2013 at 9:40 am

    Really good article that helped me amalgamate some of my inner thoughts on the same subject.

    I think we have all internalized, during the past few years, Job’s famous quote: “design is not how it looks, but how it works” which started shifting our mentality towards this direction – so it is not a surprise that many designers have sought out to learn how their flat designs “work” in the medium they design for.

    As many people, I believe too that HTML authors & designers will co exist in one hybrid type of professional in the future, the reason for it not being only the need for someone to have control over both but also because of increased complexity in the Javascript front (whether it’s a JS backend or advanced an app UI) and the Design/Branding front.
    In the latter, a designer should set the generic tone that will apply on a broad range of devices and off-device applications (prints, sings) – I think that this is the work of the current Creative Director.

    This work set up instantly creates a spectrum where in the one end you have developers, taking care of the app architecture (we are already seeing a lot of backbone, angular, ember) and on the other end you have “high level” creatives who will overview the application of the design guidelines across all platforms/mediums.

    As you may have guessed, in the middle, a varying degree of design/develop mixture pros will undertake the, currently, hard task of applying the design to all screen sizes and applications we cannot think of now (print–friendly, anyone?).
    The design skillset that is currently useful to these coders is what you mentioned: grid & typography. In my experience, these are also the easier for a coder to pick up as they usually obey to simple rules, not as strictly set as a coding language but solid enough to apply in a big percentage of use cases.

    The work balance of these 3 types of workers, should be equal in most of the cases, and that’s why I believe the design/develop dust will settle in this set up.

    And now I realize that I should have written a blog post about it :).

    • Chris August 8, 2013 at 11:41 am

      Hey Spiros,

      Glad you enjoyed the post :-)

      I found your interpretation of Steve Job’s quote interesting. I certainly hope the majority of designers interested in designing for the web delve into their medium. It’s a maturing process, and it’s very apparent when a designer has a feel for the workings of markup and CSS.

      You’re right about some Javascript frameworks perhaps becoming complicated enough for them to be taken out the reach of less ecperienced developers, but I would still encourage people in that situation to delve into JS. I think the middleman front-end developer would be the appropriate person to handle browser interactions and animations.

      Why not write your blog post, sounds like you have a clear picture of it in your mind. If you do write one, post a link up to it here, I’d definitely be interested to read it.

      Thanks Spiros :-)

      • Spiros Martzoukos August 13, 2013 at 6:54 am

        Hey Chris,

        I will be writing this blog post sometime this week.
        I can agree with you on encouraging designers to learn JS along with HTML&CSS (after all, JS plays a significant role on how web works) but I wouldn’t know how deep they should dive, before they start spreading very thin in this spectrum and maybe lose focus and expertise.

  2. James Kyle August 11, 2013 at 7:34 pm

    I must say that as a front end developer I’ve never held a position that I have (or known another front end developer that has) not been expected to be able to design. In many positions, I’ve also been expected to be able to write copy and have good marketing sense.

    In fact most front end developers I know have a lot of experience with design. One of the best designers I know considers himself a developer first. Developers often build things called spikes that present new design concepts by solving an issue from a technical perspective, they are semi-working prototypes to help figure out what’s technically possible.

    So while I agree your argument is very valid, I also think most front end developers are way ahead of you. I regularly go to designers with new ideas or concerns about the designs they give me. I try to be as involved as possible in the design process.

    The reason why the ‘designers should understand code’ idea is gaining popularity is because the web design process has long been just a rehash from print design. I think designers have a ways to go to truely adapt to a new medium.

    Also if front end developers aren’t already branching out regardless of what their design colleagues are doing, then they aren’t doing their job right. A good front end developer should already be familiar with code preprocessing with sass/less/coffee/haml/jade/etc by now.

    Good article :)

    • Chris August 12, 2013 at 12:33 pm

      Ouch James, this sentence hurt “I also think most front end developers are way ahead of you”. But it hurt in a good way ;-)

      Ha, I think perhaps we’re working in different circles, a lot of the developers I’ve come into contact with haven’t focussed on design to any great extent. I wonder if it’s because I don’t know a lot of Freelancers?

      I really like your take on the topic of designers understanding code. Surely part of the excitement in designing for the web is it’s freshness and the fact that’s it’s new territory (albeit with similarities from print design). Is learning CSS any different from learning how different print techniques are achieved? No, knowledge of printing techniques will influence a print design, just as knowing what is achievable with code will influence a design for online work.

      I’m not sure if I agree that all good developers know how to use pre-processors. I’m sure there are people out there who are very good at CSS who don’t use them.

      Cheers James :-)

  3. Laura Andresen August 12, 2013 at 7:13 am

    Great article! I’ve written down some thoughts on the responsive web process myself, http://lauraandresen.no/2013/06/thoughts-on-the-responsive-web-process/ but you picked up where my article ended.

    • Chris August 12, 2013 at 12:57 pm

      Thanks Laura, glad you liked the post :-)

      I’ve just read your article, and enjoyed your views on how to involve a client during a responsive design and build. I found myself nodding a lot while I was reading it :-)

  4. Christian Krammer August 12, 2013 at 7:19 am

    WIth Macaw knocking at our doors soon literally everybody will be able to design and build websites. It’s like the MS Frontpage of 2013. Therefore the role of the sole HTML/CSS developer may vanish soon, since Macaw also produces very tight code. So you either have to become really good at what you actually do or expand your skills, because otherwise you may be without a job soon. I’ve also written about this topic recently: http://www.css3files.com/2013/07/29/no-coding-skills-required/

Leave a Reply