Is Web Design All About Hacking or Kludging?
So I decided to spend the weekend redesigning/modernizing my lifetime project, a citation-management tool mxplx, because the site is old and ugly looking and I wanted to play with some of the shiny new toys in CSS:
The 00s Called, They Want Their Website Design Back
So hundreds googlings and SOings and two sugar-driven all-nighter’s later, I’ve got the new “placeholder” tags in my inputs, nifty-gradient backgrounds in my divs, my inputs are modern-ish looking, and my checkboxes, buttons, and selects are all replaced with images. Yay!
Shiny New Website
It’s nothing special. I’m not a web designer. I tried to become one in the 90s, but years of working UI only drilled into my head that I have awful awful awful aesthetic taste. I’m much happier immersed in code, but UIs are something we still have to deal with regularly and this little design sprint reminded me of why it’s such a bother.
Web design requires lots of hacking. CSS has come a very long way and isn’t anywhere near the agony to use that it once was, but the biggest difference between UI development and backend development is still the lack of control. On the backend, we have total control over everything. We know our database, our chosen language, and local environment. When developing a front end for the general public, you have no idea what the user is using to look at your site.
That doesn’t just mean old browsers, but new ones as well. I once lost a fantastic job opportunity because the interviewer looked at a site in my portfolio with the then-brand-new IE6 and it was completely broken. So UI designers aren’t just trying to build sites that degrade gracefully into old browsers, but having to keep up with the latest additions as well.
My weekend hackathon got inspired by this glowing form border, which I ultimately didn’t use, but did apply some gradient backgrounds and animated highlighting from the demo. Because the gradient backgrounds in the demo don’t work in IE, I found a css gradient background generator to produce gradient backgrounds (ironically hosted by Microsoft).
Totally awesome right? But check out the CSS output:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #96067E 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #96067E 100%); /* Opera */ background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #96067E 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 465, color-stop(0, #FFFFFF), color-stop(1, #96067E)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #96067E 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #96067E 100%); |
Six definitions for six different browsers, sharply illustrating why web design is still such an incredibly time-consuming headache. This isn’t a hack, this is just freakin’ fugly, but state of things in the wild wild web make it a necessary evil.
Which raises the question in my mind: are design work tricks hacks or kludges? “Hack” implies an elegant solution, while “Kludge” suggests a patch or workaround. Into which category do all the little CSS, JavaScript, and HTML tricks used in design work fall?
Take this example for the Internet Explorer z-index bug, where select input show through absolutely-positioned elements placed above them. So, if I have a pop-up div, and there’s a dropdown box beneath it, the box will come through like so:
Selectors Coming Through a Div
This bug wasn’t fixed until IE8, so it’s still out there in the wild. There are two solutions, one is to use JavaScript to hide all selectors in the page before showing the div. The other, JavaScript-less solution is to put an iframe beneath the div and make it visible at the same time to hide the content below. I can’t describe either of these solutions as “elegant;” however, they get the job done and are a response to an inelegant variable in the environment: an IE bug.
Here’s one specific to this weekend’s work. So I’ve got these list evenly-spaced (fixed min-height) items with various groups of information in each div, and I want them displaying uniformly. So I positioned the folksonomies (fancy word for “tags”) absolutely at the bottom of the div (rather than float, because fixed min-height), and the grouping of related object counts absolutely to the right.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .folksonomies { position:absolute; bottom:4px; width:70%; } .objectcounts { position:absolute; bottom:4px; right:4px; } |
To produce the following effect (divs highlighted in red):
If only it were so easy. Because I’ve positioned these two elements absolutely, they are now free to overlap with other elements in the div. So when my application outputs an object with too many folksonomies/tags to fit on one line, it pushes the folksonomies div up into the description text like so:
I found lots of recommended solutions to this, like adding clearfixes to the div, which wouldn’t work because I don’t know how many line breaks I need to add to account for the variable number of tags and characters in them. What I ended up doing was outputting the folksonomies content to the browser a second time, positioned normally, and then hiding it. This preserves an empty space with the same height as the visible element:
1 2 3 4 5 | .folksonomiesHeight { width:70%; visibility:hidden; } |
On the “hack” end of the spectrum, I’ve now got evenly-heighted list items with sub-elements that are positioned identically in each row. Pushing this to the “kludge” side of the spectrum, I’m hiding (duplicated) semantic content on the page. I know Google and other search engines frown upon this. I’m leaning toward this being a kludge, but one that I’m a little proud of.
What do you think? How do you define “elegance” under-the-hood in web design? Is it inelegant to resort to JavaScript tricks? What about duplicating efforts for cross-browser support?
If you’re curious, here’s the site in action. It’s only really been tested in Chrome, with better cross-browser support pushed onto my future todo list. I’ve reopened the site for anyone to open an account, but it is really only intended for my personal use, so suggestions are welcomed, but please set up your own instance if a total lack of user-support is going to be a problem.
To me, elegance means pure separation of content, form and function.
Elegance under the hood is almost impossible to attain unless you really limit your audience or the tech you use, I’d say. No hackey kludges to accomodate a bazillion different browsers to achieve some pointless cool effect. I’d rather leave that effect out than hack around. Don’t even get me started on using javascript for layout or applying styling…
OTOH, coding in general tends to be filled with these kind of things no matter where you look so I don’t agree in full with your premise that there is “full control” on the backend side of things.
Good to know I’m not alone wondering if this is how it’s meant to be. Web publishing is an incredible timesink.
Comment by hawkse — May 5, 2013 @ 4:11 pm
It’s up to us as ‘thought leaders’ to just say *NO* when our fellow coders foist this horseshit on the world. Just make your website in pure HTML – HyperTEXT markup language – and let Google, Microsoft, Apple and Adobe piss away their resources while your users get their job done without CSS or JavaScript.
Comment by M. Edward (Ed) Borasky (@znmeb) — May 5, 2013 @ 5:01 pm
“What do you think? How do you define “elegance” under-the-hood in web design? Is it inelegant to resort to JavaScript tricks? What about duplicating efforts for cross-browser support?”
Elegance in web design is much the same as it is in other implementations – hacky, kludgey things are always frowned upon, and resorting to javascript as a fallback is a massive no-no.
Since you’re admittedly not a web designer, it’s understandable that you may have missed the underpinning currents of the past few years. One of the most important ideals to come about has been the idea of Progressive enhancement – http://en.wikipedia.org/wiki/Progressive_enhancement – an ideal that when followed, allows everyone to access the content, regardless of browser.
I think that perhaps starting with a “new shiny CSS feature” without understanding why these things exist and how best to implement them may have been your first pitfall. I’m afraid that it potentially led you down a rabbit hole of assumptions and conclusions that weren’t tethered to the reality that is the landscape of what web design is today.
It’s not enough to just say “I want this new shiny thing” – especially not in a UI-driven context – you really do need to understand why things have changed in the direction that they have, then you will be open to best practices – which admittedly do not always jibe with traditional back-end or other software dev ones. This is something that is slowly but surely being rectified.
To sum up for you and hawkse – no, this is not how it’s meant to be. But you’ve missed a vital thread and should circle back so you can begin to understand how it should be.
With regard to Ed (@znmeb) – I can say without doubt that there is no “thought leader” in the field of web/UI design who would agree with you. Yes, accomplishing a task is always the ultimate goal, but secondary to that, in this day and age, is always differentiation. Things like progressive disclosure, responsive design, mobile enhancement, and the general simplification of traditionally complex User Interfaces are often completely impossible without modern javascript or CSS practices. There is money to be had in making your users happy by making their experiences nicer. Throwing a plain HTML page as a UI out there might’ve been fine in the late 90s – early 00s, but now it is not sufficient, and to encourage it is tantamount to suicide for any application or product that truly wants to succeed.
Comment by Nick — May 6, 2013 @ 2:20 pm
Wow Nick. What a thoughtful and thorough response. You are absolutely correct that I was still working under the “graceful degradation” paradigm, and your post really illustrates how far out of touch I’ve let my front-end development skills get. I feel like the time I had a peer scold me for still using the “document.all” in my javascript years ago. : )
It looks like I’ve got some studying to do. Thank you for the very interesting and informative link for me to use as a jumping point. I’ve really appreciated many of the comments and suggestions I’ve gotten on Hacker News as well. I confess, this blog post was partially intended to get peer reviews such as yours. Again, thank you.
Comment by ideonexus — May 6, 2013 @ 2:52 pm
Yes, Nick, good post. I’m very aware of the way the modern web is supposed to work according to the progressive enhancement strategy. The tech behind it still makes me want to cry every time I scratch that shiny surface and expose the dirty details of what needs to be done to achieve a modern looking UI.
I’m glad there are people willing to put up with all that crap just to give me a nice looking UI but frankly, most of the time I’m fine with a boring, unstyled HTML document.
What I try to say is that I value my sanity far more than having that HTML form look shiny across all major browser versions. Probably easy when you’ve spent a few days mucking about with it but it’s an entirely too depressing state of affairs for me to get myself kneedeep into. And yes, things definitely have gotten way better than they were back in the bad old days of NN4 and IE6 but it’s nowhere near good enough.
Comment by hawkse — May 6, 2013 @ 4:40 pm
I have a question and a suggestion for your consideration:
1) Why did you change the name of the application from MemexPlex to mxplx?
2) Have you looked into SASS or LESS for dealing with the vendor prefixing within CSS?
Comment by @_bmf_ — May 10, 2013 @ 8:28 pm
Hi bmf,
1. I got tired of typing “memexplex.com” all the time. I like having a five-character url. I also have an item on my todo list to goto shorter-urls, replacing the words “meme,” “schema,” reference, triple with m, s, r, t to make them tinier.
2. LESS is pretty awesome, but felt like overkill for this application. We currently use LESS for one of our single-page applications, which helps a lot, but the CSS is still very difficult to navigate and behaves unexpectedly in different browsers. I have not played with SASS yet, but will definitely take some time to check it out. Thanks for the lead!
Comment by ideonexus — May 13, 2013 @ 9:53 am
[…] Is Web Design All About Hacking or Kludging? (ideonexus.com) […]
Pingback by Pre-Live Website Checklist | GmaNs WorlD — June 28, 2013 @ 10:03 am