Bootstrapping the Chameleon

In the last post I gave you my overview of Bootstrap and how it helps a web project to grow faster.
In this post I will show you RESULTS.

When I first started working for SUSE Linux GmbH the first product I was assigned to was SUSE Manager. After  10 months of work this is what I (and the wonderful team of developers) have accomplished:

SUSE Manager: a SUSE product based on the project Spacewalk

 

Details of the upgrade
SUSE Manager is our System Management tool based on Spacewalk Project. Until now, the original project was (speaking about the front-end only)  based on XHTML, CSS2, Prototype (javascript) and some old-school 3d icons.
The last months, with the team of SUSE Manager, we have been working on this huge contribution to the community of Spacewalk where we implemented Twitter Bootstrap in the front-end which gave the project not only a better looking theme, but it also updated the entire front-end technology with HTML5, CSS3 which is written in LESS, Jquery and icons that are now a typography (we used FontAwesome and I also made our new icon set – with more specific icons for our product – in SVG which, by the hand of IcoMoon, was converted into a typography)

 

Responsive HTML: the present and the future.

This is how Spacewalk looks like now. It has also improved as much as SUSE Manager did, you can see in the next images:

 

With Twitter Bootstrap 3 to accomplish a fully responsive website takes a lot less time. However, there are loads of customisation you will need to apply to make the application look the way you pretend it to look like in each different screen size.

By default, Bootstrap has stablished the screen size and responsive capabilities for the main screen sizes of tablet, desktop and mobile.

Spacewalk, and consequently SUSE Manager, has been specially customised for each device improving the visibility of text, tables, forms and all the rich information shown in the system.

It is very important to consider and identify the user of each device and therefor plan strategically where to establish the focus to develop the front-end to offer a better user experience for each of our different “personas“.

 

Want to see more Before-After images that will convince you of implementing Bootstrap in your projects?

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>