[LRUG] Best practices for reskinning / redesigning the look and UI of a Rails app?

[Jon Wood]

We've been through that process a could of times at Hubbub now. For our
latest revision we rebuilt the entire customer facing website from the
ground up as an API client - it was the right move, as it killed off a lot
of technical debt that had grown over the years, and allowed us to
completely rethink how customers approach the site. However, its a bit
drastic, so I'll write about the first time round when we just rebranded
without any major changes to the UX.

As you say, branch first, nothing is going to be pretty for a while. After
that we started by rewriting our application layout to use the new
framework, and introduce the new design to any global elements on the page
like navigation and sidebars. That also involved reworking a lot of
partials that made up those elements. The key thing here was to start
afresh with CSS which allowed us to avoid having two frameworks conflicting
with each other.

At this point the entire site was hideously broken in the most literal
sense. Now begins the gradual process of updating every view in your
application - hopefully its been built with some sort of reusable
components in the frontend which will make this easier, but ultimately
you're going to be reworking a lot of CSS classes.

Once that's done, its time for some pretty extensive testing. We ran a beta
period where we slowly rolled the new design out, first to staff, and then
to some of our more friendly customers.

Something we didn't get the chance to do, and I wish I could remember the
name of the tool, was to run the entire site through a tool which can pick
up any unused CSS classes in the HTML, and find any unused CSS definitions.
If you've got decent integration test coverage it should be enough to run
your suite of tests and see what that brings up.

Hopefully that's of some help - I'm working from memories of something we
did in 2013, so its a bit rough!

Jon

On Fri, 18 Mar 2016 at 14:56 Jesse Waites <jesse.waites at gmail.com> wrote:

> Hello everyone,
>
> I've recently started a new job and one of my first orders of business is
> to reskin the app. It basically looks like hot garbage right now and my
> boss wants me to redesign it with a proper framework, etc. I am also
> looking forward to this because I have a pretty good design eye and it will
> be cool to have complete ownership of the look and feel of a production web
> app.
>
> I have started with making some general UI mockups in Balsamiq and have
> approval to implement this design from upstairs.
>
> I suppose I will simply create a new branch and start adding the
> framework, and start redesigning this maybe a controller at a time, hitting
> each view in each controller? That seems like a reasonable approach to me.
>
> I know how to technically do this but I'm curious about the best overall
> strategy to reskin (Add a new front end / UI) a rails app. If someone has
> done this before and wouldn't mind writing about their process / best
> practices for something like this, I would appreciate it.
>
> Thanks!
>
>
> --
> Jesse Waites
> JesseWaites.com
> _______________________________________________
> Chat mailing list
> Chat at lists.lrug.org
> Archives: http://lists.lrug.org/pipermail/chat-lrug.org
> Manage your subscription: http://lists.lrug.org/options.cgi/chat-lrug.org
> List info: http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lrug.org/pipermail/chat-lrug.org/attachments/20160318/08abfb2a/attachment-0002.html>