How We Work 1: Web Frameworks Explained
October 19, 2015
This is the first in a series of posts discussing the various technologies and techniques that we make use of for client projects, here at the Bridge .
We have previously discussed the selection and use of content management systems when building your website. Another, far more recent concept that has changed the face of modern web is the introduction of HTML & CSS front-end frameworks.
The use of frameworks in the development process is nothing new in back-end and software development. One of the leading development technologies, Microsoft .NET, is itself a framework consisting of libraries and tools to speed up and assist in development of projects using various programming languages. PHP has a number of development frameworks available for use as well, including Laravel and Symfony. In recent years, the same concept has been applied to front-end development.
Front-end web frameworks vary in complexity but generally include code for a responsive layout grid, as well as visual and user interface components like buttons, table styles, navigation systems (mobile menus, dropdowns) and/or other visual effects using jQuery or CSS3. The main reason for making use of these frameworks, whether integrated in a template or theme for a Content Management System or used for a static website or landing page, is to speed up development time. Front-end developers can use the existing components to rapidly build complex layouts without wasting time creating custom layout code or styles.
This works particularly well for time-sensitive, deadline-driven projects such as campaign microsites and landing pages but these frameworks also give front-end developers the ability to rapidly prototype projects with functional UI elements, preview-able by clients, graphic designers or back-end developers directly in the browser. In some cases, this approach can used to bypass traditional static “wireframing” techniques for experimenting with page layouts and User Experience design. Doing so can also allow front-end developers to work on projects concurrently with the graphics and back-end team, once again creating obvious workflow efficiencies.
An important distinction to note is that, while frameworks include visual and layout elements, they don’t provide a layout or content on their own. Out-of-the-box, even full-featured frameworks like Bootstrap do not resemble a content management theme or template, they are to be used as the building blocks for your own unique designs and layouts. Visual elements included can be customised and themed and used in other systems.
At the Bridge Digital, we work primarily with four main front-end frameworks: Susy, Foundation, Bootstrap and jQuery UI, which we outline briefly below:
Susy
Susy is a relatively new kid on the block and, compared to the others mentioned above, is very minimal. Susy is focussed on one functionality only, but its an extremely important one: the responsive layout grid.
Foundation and Bootstrap both include their own layout grids, but also a host of other libraries, tools and UI elements. Susy comes with none of this but there are plenty of cases where use of more fully-featured framework is either unnecessary (smaller projects that won’t make use of the additional elements) or undesirable (more bespoke projects, highly graphical layouts, projects with strict technical requirements etc). Susy on the other hand, can generally find a home in any front-end project.
Susy is focussed on being able to create grid-based layouts quickly and simply, with easy creation of media queries. Layout grids and responsive design components can be time consuming, so having a lightweight, go-to solution for generating content areas in re-sizeable, fully responsibly columns and rows is a godsend in front-end development.
Foundation & Bootstrap
While different products, Foundation and Bootstrap are direct competitors and share enough similar functionality to discuss in tandem. An in-depth comparison of the two is a perhaps a subject for another time.
Foundation, created by Zurb and Bootstrap, built by the internal developers at Twitter, are fully-featured frameworks with a host of components: the aforementioned responsive grid, UI tools and effects, jQuery and JavaScript plugins, image styles, typography elements and much more more.
Both these frameworks are very powerful and can greatly speed up development time. Using either system, a skeleton or prototype of a website or HTML app can be created quickly using the default styles. This can be extremely useful when trying to create a usable UI for a more complex project that can be utilised by back-end developers before the full graphical design has been completed. Because of their customisable nature, either framework can also be radically altered in design to form the base code for a website or CMS theme.
The only significant drawback of these kinds of full-featured frameworks is that the code often contains a lot of elements that will not be used in your project, adding complexity to the codebase. While both frameworks do allow a level of modularity, where only select components are loaded, this can be something of a turn-off for developers due to perceived performance issues and “code bloat”.
jQuery UI
Unlike the other frameworks that are based mostly on HTML and CSS, jQuery UI is a library of jQuery-driven user interface elements that can be plugged into existing projects. jQuery UI includes widgets such as collapsible accordions, date-pickers, buttons, progress bars, tabbed content areas and tooltips, as well as effects like colour animations, visibility alterations and toggles. These libraries are extremely useful for front-end developers to draw on when creating interactive or animated elements and can easily be used with other frameworks as necessary, in content management themes or static websites. jQuery UI elements are cross-browser and device compatible, cutting down on testing and troubleshooting for developers as opposed to constantly writing or re-writing code for similar design elements.
These frameworks and other modern front-end techniques like CSS pre-processing have become an important part of the Bridge’s development process, which we use to improve our response to client’s needs, whether technical or delivery-focussed. That said, frameworks aren’t always appropriate in all cases. As we’ve touched on, code from Bootstrap and Foundation can seem bloated and often additional components will go completely unused. However, the benefits of quickly deployable code, rapid prototyping possibilities and reusability are difficult to ignore when approaching a new project from scratch.
If you’d like to discuss your software development options with The Bridge at no cost or obligation, feel free to call Lawrence on 02 9993 3300 or email lawrence@thebridgedigital.com.au