Why do all websites built with Rails suck? Or rather, why does the UI for all websites built with Rails suck? And why do 99% of them have the exact same UI — you know it, a solid (usually reddish) stripe across the stop, a menu separated by pipe (|) characters, square tabs, large fonts, grey boxes & sidebar , etc. Make’s you long for rounded corners.
Of course it is probably based on the original simplistic design of the Agile Web Development with Rails demo app. Several other books and tutorials have followed the pattern, which is all fine. Programmers learning to program don’t need to focus on design. But why do so many real production sites copy this (lack of) design?
It’s because the programmers are designing the sites.
Hi, my name is Aaron, I’m a programmer and I design my own websites.
Or rather, they’re not designing them. They’re borrowing a design from a tutorial, and letting Rails take care of the rest. Now, I’m not saying it’s impossible to design a pretty website that uses Rails. I’m saying it’s *very difficult* to design a website that uses Rails unless you, the designer, are a Rails programmer. Not just a casual programmer, but familiar with the internals of Rails.
Because Rails wants to design your UI for you. And Rails wants to prevent you from creating your own UI. Rails wants to generate your HTML. Let me repeat that, because it’s the core of my argument, and I’m in a condescending mood:
Rails wants to generate your HTML
Don’t let it. We should ban link_to as well as form_for and other functions like it. Let’s summon Dijkstra’s ghost, remake him as a graphic designer, and get rid of link_to and it’s ilk.
The problem is, designers can’t get into your controllers and views and edit the page presentation, because you’re using link_to. They can’t even see what a link looks like, much less a table (“THE HORROR!” chants the CSS zombie brigade) full of content that might include links.
You could use ERB to get rid of them:
<a href="<%= site.page.link.url %><%= site.page.link.text %></a>
But there is a better way, and it’s been around for ages. Use attributes for real HTML tags to identify dynamic elements.
<a id="my_dynamic_link" class="please_parse_this_for_me">Link Text</a>
You can use components to build complex HTML elements like Menus, Tables, and other complex components:
<ul id="my_dynamic_menu"><li> example row to be replaced by dynamic content</li></ul>
<table id="my_dynamic_table"> <th> <td> number </td> <td> title </td> <td> summary </td> </th> <% site.page.table.each do |row| %> <tr> <td> <span id="row.number">default number <span> </td> <td> <a id="row.title.link" href="default link">default title</a> </td> <td> <span id="row.summary">default summary</span> </td> </tr> </table>
<div id="mytree" class="fancy.dynamic.nested.tree.component"/>