Ask HN: Is it worth a back-end developer's time to get into web-design and HTML/CSS

pj · on Jan 25, 2009

omg, this question is painful.

HTML and CSS are skills that are worth your /time/. Forget the money. You can improve your /own/ life with HTML and CSS.

The more you know, the more powerful you are!

Have you ever been approached by someone from the front end who said, "Man, it's hard to build this page the way I want it because the backend doesn't do XYZ?" and you look at them like, "figure it out!"

You only do that because you can't relate to them. You don't know how hard it is to do a three column layout in CSS so you blow them off and think, "It's been done before go do it."

But that's not the right approach. The right approach is to understand /why/ it's hard from the front-end so you can make your back-end more suitable to the front.

Building complex systems is a conversation between layers. Data comes from the database, goes through the "backend" then gets displayed. At each of these levels, the more one knows about the other, the easier the dialog between the layers.

So, OF COURSE it is worth a back-end developer's time to learn more about the front-end. It's also worth a front-end developers time to learn more about the backend.

YES.

alabut · on Jan 25, 2009

Here's a designer's take on why this is a great answer by pj - the html/css is the meeting ground between designers and programmers, so without a basic understanding goes a long way.

Think of it this way - html by itself, even without css, is like the skeleton of a body. The programming (backend & javascript) is like the muscles that move stuff around and the css & visual design is the skin, makeup and clothes that define the style. It's a bit simplistic and ignores more advanced interaction design that can help define the skeleton in the first place, but it's a good shorthand for how designers and programmers make stuff, especially in early stages.

So that's a hell yes to learning html/css. Learning web design means more than learning simply the toolkit to create those designs, it's also about developing an eye for what makes an attractive or usable interface, so learning whatever you can there should probably be a hobby that teaches you to appreciate good work. Try cruising the css gallery sites or smashingmagazine for examples.

alabut · on Jan 26, 2009

Oops, make that "so a basic understanding goes a long way".

mechanical_fish · on Jan 25, 2009

Amen.

The right approach is to understand /why/ it's hard from the front-end so you can make your back-end more suitable to the front.

I still don't know how to answer when people ask if I am a front-end or a back-end developer. I just don't get it. I used to think I could claim to be a back-end guy because I do know SQL, but I don't know how to make pretty mockups in Photoshop. But now it's apparent that knowing HTML and CSS and JS makes me a "front-end" developer in many people's eyes, so I've gone back to not knowing how to answer. It's like asking whether I walk primarily with my right leg or my left.

I think the dichotomy broke completely when Ajax came on the scene. In earlier times it was possible to pretend that the division between client-side code and server-side code was aligned with the division between the presentation layer and the logic and persistence layers of your app. That alignment was never very clean (there are limits to what you can rearrange with CSS alone, and while JS can theoretically rearrange everything the result is liable to be slow and fragile and terrifying to behold, and obviously the needs of the interface designer need to drive the optimization of the back-end data store, etc.), but you could still pretend. The ever-increasing role of client-side JS makes that view of the world less tenable. Now some logic lives on the client as well as on the server, and Google Gears threatens to give the client persistent storage as well, and the interaction between client and server can potentially have a lot more moving parts, and a developer gains a big advantage by having a basic understanding of the entire stack.

pxlpshr · on Jan 25, 2009

Very well put. A team is only hurting them self if designer|vs|engineer qualms and misunderstandings aren't managed. It's as equally important for the product to work, as it is for the consumer to understand. There are complexities on both ends.

Retric · on Jan 25, 2009

I disagree. It's useful to be able to do a full prototype so a superficial understanding is useful, but I don't think there is significant value really learning HTML / CSS.

There is a huge body of information about which version's of which browsers work with which feature. This is one of those cases where specialization pays huge dividends and working with someone who keeps up with this field is really useful. Think of it like accounting it's useful to quickly learn the fundamentals, but knowing how to audit a fortune 500 company is overkill.

PS: The problem with learning HTML / CSS / JavaScript is it's got a short shelf life. You can learn C and come back to it in 20 years but GUI side of things keeps evolving so unless you constantly keep up you are basically starting over when you come back in 5 years.

anonyreliant · on Jan 26, 2009

Our full prototype is earning revenue. Javascript is extending into desktop applications through Webkit and I'd say HTML/CSS/Javascript is the core GUI skillset for anyone who wants to work on next-gen cross platform applications.

If you're working for other people be a specialist. If you're working for yourself you have to be a generalist. Very difficult to effectively manage and coordinate something you don't really understand.

rockstar9 · on Jan 25, 2009

I think it's important to learn HTML/CSS. A good understanding of user interface will complement and affect the way you program. You should have a good grasp of how a website should "flow."

On the other hand, graphic designs is a different story. Developing a good artistic sense will take time and practice. If you plan on developing entire websites on your own, why not spend a little time to graphics design to make things look prettier? However, you don't plan on spending any time on this, then find a good designer :)

potatolicious · on Jan 25, 2009

Having a good design "sense" is important - you should at least be good enough to tell excellent from good from bad. This goes doubly if you're in business for yourself, since you'll likely have someone else doing your design for you on a contract basis, it's good to know they're good at it.

raffi · on Jan 25, 2009

I'll avoid me too and agree you should learn these front end technologies. That said, there seems to be a question of how and what underlying your post. I'm not a designer by any stretch of the imagination, still I hope this helps:

== XHTML/CSS ==

1. Learn basic HTML, understand what "semantic markup" means. I assume you know some HTML already.

2. To understand CSS, understand the box model. Understand inline and block elements. Understand selectors. Understand positioning. The rest of it falls in place from there.

Hopefully you'll have an appreciation for markup and meaning versus presentation at this point.

== JavaScript ==

3. Learn Javascript. Understand that everything is a hashtable. Understand how it handles scoping and understand classless objects. Once you're comfortable with this you're ready to move on.

4. Understand the DOM and how to manipulate it.

5. Read a little on AJAX, I found the DHTML utopia book on Sitepoint.com?myaffiliateid=me was good.

6. After you understand AJAX and DOM, go learn a library like JQuery or whatever else people advocate these days. These libraries are like mana from heaven. They will save you time! Oh, if you did steps 3-5 you'll be productive with a JS library in about 2 minutes. The learning curve is small at this point. Great stuff!

7. Install Firebug and spend an hour or two learning how to use it. Firebug will save you time and console.log is so much better than alert(). Firebug has made me happy.

Now you know how to manipulate sites on the client side. Great! Last step:

== Graphics ==

8. Learn a tool like Photoshop or the GIMP. Understand how to select stuff, copy and paste. Then become familiar with layers and masking. I am not a graphics guy but I've only recently become turned on to the power of masking. Wow. People like you and I can do neat things.

I don't have resources for everything because I scrimped and learned as I went. However this should represent a good order (and some pointers on what to look at) as you pursue this. Good luck!

mnemonik · on Jan 25, 2009

Nice outline. I agree with just about everything you have put forth here, but I think OP might want to either skip the graphics part for now and let someone who really knows it handle it, or learn that right after XHTML/CSS. JavaScript is going to be easy for him, better not to focus too hard on it and give time to what is going to be a little more challenging.

As for learning XHTML/CSS, http://htmldog.com/ is an incredibly easy tutorial. You'll understand it all in hours.

gry · on Jan 26, 2009

Another resource is the relatively new Web Standards Curriculum by Opera [http://www.opera.com/company/education/curriculum/]

ssharp · on Jan 25, 2009

The answer could be to source it now but still learn it for the future. The nice thing about learning the entire vertical of a platform is that you don't HAVE to rely on outside help for any part of the process. You may still want to, but being able to do everything yourself is a definite advantage, especially when time and/or money is an issue.

However, you time is best spent just learning CSS and web page layouts. Web design and graphic design are not the same thing. You can learn to layout web pages with limited artistic talents. When a site may need heavier graphic elements, you're better off going with an expert. Knowing your strengths and weaknesses is very important.

The wonderful thing about the web is that its very easy to stand on the shoulders of giants. With layouts and usability, you don't need to do your own work and testing. Take a look at websites with great layouts and morph their ideas into your own. Read design and usability blogs and try to determine what will be best for you.

Best of luck!

rsayers · on Jan 25, 2009

I am also a back-end developer and have found design knowledge to be very useful.

Very often I'll be given a layout which breaks once I started adding code to it, a good html/css understanding will let you fix issues like this without having to pass it back to a designer.

I can think of many times where design skill has paid off, namely a time when our sole designer quit leaving me to fill in for him, but I've found the knowledge to be extremely useful even if I only need it occasionally.

critke · on Jan 25, 2009

From my experience I would suggest learning html/css coding but finding a creative person to do the actual design (colors, logo, white space, typography etc etc). I really doubt that it's possible to be good at everything - but html/css is 'just' coding - design however is a completely different story.

alain94040 · on Jan 25, 2009

I second that. Learning CSS/HTML is easy for a developer, not a problem. But don't think you can draw, pick color or balance objects on a page in pleasant way. Artistic style can't be taught the same way you learn a language.

If you are like the average geek, you can spend years reading many books on good design and you still will only create ugly, flat, boring sites. Just be aware of your limitations.

Encosia · on Jan 25, 2009

In the ASP.NET community, we catch a lot of flak for the terrible sites that some developers have created with ASP.NET WebForms. That embarrassment is due exactly to developers choosing to hide behind the (leaky) WebForms abstraction and remain ignorant of the markup that their server-side code produces. I'd advise against emulating that failure case.

If you're working on any code that's within one tier of the HTML/CSS, you should have a basic understanding of the HTML/CSS.

That general rule applies to most things. The more understanding you have of adjacent concerns, the better you will be at your own task.

teej · on Jan 26, 2009

I'll reach across the aisle here and admit that this happens in the Rails community as well. Reliance on scaffolding and generated code can be toxic and should be handled with care.

sachinag · on Jan 25, 2009

I'm going to, as someone who cannot code, take the minority view here. You are more valuable to your company or to your clients (if you're doing freelance work) if you know systems administration in and out. Between crowdSPRING + PSD2HTML, you can get a decent implementation of a design relatively cheap. There's no way to outsource "good enough" systems administration.

russell · on Jan 25, 2009

This is especially good advice if you are in the Java world. Configuration, deployment, and all round administration skills are part of the tool kit that you need even if none of this is your primary responsibility.

I would also add JavaScript and Ajax to the necessary skill set. If you are a freelancer or job hunting, JS, HTML, and CSS increase the number of gigs that you can tackle. Even when the backend is your primary responsibility, you will often be called upon to do a quick fix in the other areas.

Farming out design is good advice, but often the HTML and CSS is not really usable, so you will need to know enough to make it work on your site.

wallflower · on Jan 25, 2009

The more you know about design in general, the more effective you are. People don't respond to a back-end transaction program - they respond to the user experience.

I would highly recommend checking out a CHI meeting (Computer-Human Interface a.k.a. UX/UXD). I guarantee you will learn a lot by meeting and listening to designers lecture other designers.

http://www.sigchi.org/local-sigs/

ggruschow · on Jan 25, 2009

http://c2.com/cgi/wiki?SpecializationIsForInsects

sokoloff · on Jan 25, 2009

It depends on what your goal is.

I'm a backend guy who runs an IT department for a top 100 e-commerce site in my day job. Knowing HTML/CSS doesn't do me any practical good there.

For my side projects, I know just enough HTML/CSS to be dangerous. (http://www.almamatersports.com is all programmed by me in a couple hundred hours this year, but has obvious visual bugs on several different browsers, some layout issues, etc, but that didn't stop it from pleasing the guy paying the bills.) For those kinds of things, knowing more at the start of the project would have saved me tons of time and gotten a better looking end result, but wouldn't have changed the clients satisfaction all that much. Then again, the gameplay is so much better this year than last for him that it's not a fair comparison, since for most sites that level of visual bugs would be unacceptable.

When I think about my day job (which is what really pays the bills), in my experience it's much harder to find top-notch back-end developers than it is to find top-notch front end guys. Yes, the very cream of both crops is hard to find, but there's a much larger number of A players in the front-end space, so I'd recommend concentrating and developing your skills on the back-end and just getting a (relatively) tiny bit of exposure to front-end development issues and hiring that expertise out.

gommm · on Jan 26, 2009

Like a lot of people here said, I think it's important for you to learn html/css. At least enough to be able to do simple websites (or modify designs that you outsourced to integrate them in your website.)

For css try to use and understand a framework like blueprint or better even compass which is a meta-framework ported on sass (sass is to css what haml is to html). It will save you a lot of time by not having to deal so much with browser inconsistencies).

On the javascript side, read the book "Javascript the good parts" from Douglas Crockford, watch his videos and then play with jquery (it's very sweet and simple to use).

One last recommendation on the front end is to read Steve Souders "High performance websites". It's a quick easy read and highlights a lot of important considerations for the front end performance (like this you'll know for example that it's a good idea to ask designer to slice images that they use as background in the css file)...

It doesn't mean that you need to do everything by yourself (I hate doing css for example) but having a thorough understanding will help you chose the right web designer to work with and make sure that you both speak the same language.

inerte · on Jan 25, 2009

Yes, it is worth, specially since you're making a website, even if you're going to hire someone. You can at least glance if they're doing correctly, as far as you will know.

HTML/CSS isn't hard. And you need to consider if what you're doing will work on multiple browsers, including mobiles. Knowledge about this will mean more visitors, and thus more money.

Now, creative... that's another question. A good design, in the strict aesthetics sense of the word, is very hard. In fact, for some people, it's a whole career :)

Also, while I don't recommend going for the aesthetics route, there's much more involved in webdesign. SEO, usability, accessibility. You should be able to take a pretty PSD from a designer, and develop with ul/li for menus instead of using Flash, for example.

cmars232 · on Jan 25, 2009

Yes, you need to know design. Even if you hire a designer, you'll be better off in understanding what you're paying for, being able to maintain the site they deliver (and being able to tell if what they give you is maintainable).

I learned design by reading a bit on CSS, JS, and reverse engineering & imitating sites that have a certain effect I'm trying to get. Firebug is awesome. jQuery is awesome. Blueprint CSS might be what you need, or it might get in the way, but give it a try.

Oh, and don't be afraid to break the "rules". If your page looks and works the way you want, you win, even if you used (gasp!) tables.

epoweripi · on Jan 26, 2009

I was a backend guy and was faced with the same dilemma. I thankfully listened to the engineer in me (at that time we had our UI work contracted out and was not shaping up well). It took a while to get a good grip of HTML, CSS and JS. They are the tripod on which today's web UI is balanced. In the end I think it was the right decision to learn it all!

Moreover if no core team member knows UI - then either get one or you become one, becoz sooner than later you will repent outsourcing it fully.

eugenejen · on Jan 25, 2009

I did back end for a long time. But in last two year I have to get into the front end because I couldn't find good front end guys for the project. It helps me to be better in looking at whole pictures and prevent some mistakes that front end developers made for the the back end and vice versa.

Business wise, it is not good. But for a better understanding of the whole system. I think it is worthy. It is especially good for DIY projects for bootstrap and experiments.

ramenjunkie · on Jan 26, 2009

as a very proficient front-end designer/developer, and a competent but generally average backend person, the short answer is a resounding YES.

whether or not it's worth your time depends on why you want to learn and to what extent you want to be proficient at it.

here are the best reasons why i think you should delve into the front-end:

- you want to be able to bootstrap reasonably well a site from front to back - you don't want to be completely reliant on a front-end person - you want to become a better back-end person by learning the needs of the front-end - you want to fully appreciate the value a front-end person brings to the table - you want to have more control over how users directly interact with and perceive your product

if you agree with any of those reasons above, you should certainly consider delving into the front-end. however, let me get to my second point.

if you're going to jump in, i recommend you afford yourself the time to really get deep into the subject matter. why? because we've seen a tremendous diversity of front-end design patterns/methodologies sprout up in the last decade; all of which can have a sizeable effect on how the back-end is designed.

functionoid · on Jan 25, 2009

I'd say learn html/css and along with that concentrate more on usability of the website. To be really good at creating graphics and flash for websites could take some time. So I'd say definitely learn HTML/CSS also learn the usability aspect of web design and out source the graphics part. May be for this project you might want to outsource the html/css also.

epall · on Jan 25, 2009

If I/he were to hire out the design stuff, where is the best place to find designers? Optimally I'd love to find a designer to partner with and work on projects as equals, but I'm willing to pay somebody to do the design if necessary. Any ballpark estimates on what reasonable web designers cost?

siong1987 · on Jan 25, 2009

So, you are a MC Rails guy without the V. IMO, you really have to learn how to design a simple website with CSS and HTML.

One thing that definitely can help you is to screen shot or bookmark every website that you think that is simple and nice. From those example websites, you can start designing your website.

nside · on Jan 26, 2009

You need to learn it, but you don't need to do it this work. First hire a designer. Then hire a integration shop. Shops like psd2html are doing it for 100$-1k-2k$ So get a good designer and have a shop do the slicing work. Then adjust it to your needs..

jraines · on Jan 25, 2009

Based on my experience just this morning, yes. And don't neglect Javascript, either -- no matter how hard you try, you're not going to be able to avoid needing it.

glances at copy of Simple and Direct on bookshelf

Learn HTML, CSS, Javascript, a library like JQuery. You'll need them.

code_devil · on Jan 25, 2009

I am often in the same boat as you are in. I would say for this current project, hire a Web Designer to complete the project. However, also try to learn HTML/CSS so you can follow the HTML/CSS written by the outsourced programmer.

csuper · on Jan 25, 2009

It can't hurt to learn it, right?

I would image that you will find it very simple to pick up and likely very rewarding.

phoreo · on Jan 25, 2009

I straddle the line between these worlds. My day job is frontend development with some Ruby here and there, while I've been designing and building out a Rails app on the side.

I think my response would be similar to your 'developer-side' response - if at any point in working on a project I find myself confronted with something I do not understand, I have this compulsive urge to figure it out. In the process, I've saved myself thousands of dollars by investing a few days to learn what I need to at the time to get around the problem.

It sounds like you're a great Ruby developer with a leg up on all of the new "ZOMG RAILS!" converts. Don't be too concerned about the "jack of all trades, master of none" category. If you're working on building a company from scratch, product guys/gals are key - people who may not be experts in everything, but can get the job done for rev1 no matter what. If you can play that role yourself, you'll have far fewer people to depend on.

If you decide to work on the frontend yourself, start with raw HTML and forget that CSS exists entirely. This might help you to think of HTML/CSS as a backend developer.

HTML is just XML with a fixed set of elements that are named according to their purpose and have specific functions in a document - and you'll probably only need a small subset of them. So, look at your comp and think of the elements in it; paragraphs, lists, images, buttons, links, etc. Then, start writing what seems like an XML document describing it. Again, don't even think about styling it at this point. Just build the best web page that 1994 ever saw:

  <html>
    <head>
      <title>My Application</title>
    </head>
    <body>
      <div id="header">
        <div id="branding">(Name, logo, etc. here)</div>
        <div id="nav">(Navigation)</div>
      </div>
      <div id="content" class="column">(Main app content)</div>
      <div id="sidebar" class="column">(Sidebar content, if you have one)</div>
      <div id="footer"></div>
    </body>
  </html>

Once you've got your document written, you can start to tackle CSS. Since you've got a valid, well-formed document composed of semantically-meaningful elements, you'll find it much easier to style than people who focus upon the look of the document as they write it rather than its well-formed-ness. If you choose to hand it off to a dedicated frontend developer at this point, they'll be grateful that you've provided them with a solid canvas to build on.

Good luck building your application; whichever route you choose, let us know when it launches!

And if you'd like any recommendations for either a designer or just someone who can slice and dice a comp, let me know; I've got a few solid friends who charge reasonable rates and have some availability coming up.

travisjeffery · on Jan 25, 2009

CSS/HTML is simple as shit. Frameworks like Blueprint make layouts/grids easy as anything.

_b8r0 · on Jan 25, 2009

alnayyir · on Jan 25, 2009

Learn HTML and CSS, then you'll know the full circle.

You need to know these things as a backend developer and as a programmer period.