I have been inspired to write this article by an acquaintance in an attempt to clarify the reasons for using UI/UX frameworks such as Twitter BootStrap and jQuery Mobile, over developing bespoke designs, and vice versa.
I will look into the reasons for using these solutions but firstly, I think it is important to solve the confusion that users seem to have with the terms ‘Website’ and ‘App’.
Website? App? What’s the difference?
My belief is that there are no differences between a Website and an App. They both have exactly the same work-flow processes and anticipate the same end result. To name a few:
- They have a separation of logic and view
- They practice user friendliness by design and interaction
- They deliver data to the end user
- They can be configured to interact with 3rd party API’s
The reason for explaining this is because most front end frameworks refer to themselves as ‘app’ frameworks. If the developers perception is that an app is different from a website then this may convince the developer not to use it for a web design project. So, even if you’re reading this and do not agree; for the purpose of this article we define the following:
A website is an app. An app can be a website.
I think that part of the confusion derives from mobile and tablet application development where a mobile app has an installation process the same way as a desktop app does. But comparative to the illusion that websites are different, when you load a website the browser is compiling the front end code in just the same way as an app except it’s handled at runtime instead.
The clients requirement is our problem
It’s hard to create a common pattern of tools to use when conducting a solution to a clients brief. Every requirement is different in some way and this will become more complicated in years to come when users are more familiar with their devices and the standards set by the design and development teams of the big software companies (ie.. Metro for Windows8 and Apple iOS).
As developers, it is our responsibility to provide the best solution based on what we know about the technology that surrounds us. This too is becoming more bewildering as more and more technology is released into the webosphere, each with it’s own advantages.
A helping hand from an experienced team
We have a little saving grace though. There are design frameworks available that replicate the standards set by these companies without us developers having to do much work. For example, if you want a Windows8 style layout just use MetroJS. Or if you want a nice looking, well maintained user interface library, use Twitter Bootstrap. There are so many advantages to using these frameworks. To name a few:
- They include all the styles you’ll need for creating a great UI
- They are being developed by teams of people who have a lot more time to see what users expect from the design angle of a user interface
- Easy to understand documentation
- They reduce development time
- Usually, you’re able to factor in your own design preferences
Since these frameworks out-of-the-box include all of these nice elements to be employed by your app, your client may not need to take so much of a hit on investment and it could allow for more time to be focused on the functionality of the app, which can sometimes be more important.
But on the other hand…
Should we be creating applications that make the web look all the same? Well, one thing to remember is that what is familiar to users is acceptable. For example, since thousands of apps incorporate Twitter Bootstrap, users are familiar with it and quickly understand things like what the icons are for and how to navigate through the app. The choice in using Twitter Bootstrap is a safe one as you know your end user is going to grasp it.
This is slightly off topic but worth a mention. This is a quote by Paul Rand that I found from a tweet by Jeffrey Zeldman about end users and why they like bad design.
This is relevant to the designers out there who do not think that front end app frameworks are good design practice. Familiarity over good design is, perhaps, another debate.
A good designer is always want to break the rules and create what they believe to be even more innovative and creative than the front end frameworks. But they will need to be cautious, for they will be making these decisions based on what their client’s requests. The ultimate question; is good design necessary?
What about branding standards?
In most cases, your client will have strict branding standards that you will need to adhere to and you find that out-of-the-box client side frameworks may not support what you need. Let’s assume this is the problem, you have 2 choices.
- Create an element design framework from scratch (very time consuming and expensive)
- Incorporate parts of bespoke design merged with a framework
I’ll discuss number 2 and will once again take Twitter Bootstrap as an example since it’s fairly comprehensive.
For the most part, you can customise the layout type elements of bootstrap (colours, fonts etc…) using a tool such as stylebootstrap.info. If you’re not happy with the icon set, then you can use fontello.com to make your own SVG icon sets. Then, images etc.. are up to you.
Fontello in particular includes the very familiar font-icon set called Font Awesome. I am a huge icon-font fan. In my work it seems to solve so many problems such as when designers don’t supply the correct sprite-sheets for icons and scalability/resolution problems with regular icons (retina doesn’t quite cut it sometimes). Since icon-fonts are SVG we don’t have any of those problems. Another thing I found is they can be easily animated to add life to an app.
The above demonstrates how using a flexible front end framework can save a lot of design time and keep your client happy.
Mobile frameworks, such as jQuery Mobile and Sencha Touch, are designed with a common set of interface tools that again, are familiar to the user. You do not specifically need to keep the to design scope that it sets and it is very useful to have the user events in your tool belt. You typically want pages that slide and flip when navigating through. You also want multiple scroll areas and scalable navigation panels that have been tailored to suit the mobile touch screen user.
So, when shouldn’t a front end framework be used?
All of what I’ve written about is in the context of a client that is asking for an app that is scalable, needs ongoing functionality built into it, with ongoing improvements and maintenance. This, for me, is the most common type of client. However, it may be that a client just wants a simple brochure website and in this case, a front end framework will contain far too much overhead for the usage of elements that will need to be included. In that case scenario, there is no reason to use one.
In conclusion, don’t reinvent the wheel;
Unless of course you think that you can improve it.