As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated.
A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Our main care was dealing with the dozen or so desktop browsers and jumping through a few extra browser hacks to support quirky old versions of Internet Explorer. But now, with the boom of handheld electronic devices in the last five to six years, everything has changed. We’ve seen the introduction of smartphones and tablets of all different sizes, eReaders, browsers on TVs and many others. The diversity is only going to increase each day.
Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. In fact, already a significant number of people use their mobile phones as their only access to the Internet. That means it is important for us designers and developers to understand how to deal with this entire mobile world. And although, as of this writing, we haven’t entirely figured out how to make all the content we are accustomed to seeing at our desk provide an equally pleasing experience on our handheld devices, the technologies and tools for doing that get better.
One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. It’s a mechanism for providing custom layouts to devices based on the size of the browser window. By default, most browsers on small devices such as smartphones and tablets shrink a web page down to fit the screen and provide ways for zooming and moving around the page. Although it technically works, it is not such a great experience. The text is too small to read, the links too small to tap, and all that zooming and panning around is more or less distracting.
The technique of responsive web design is to serve a single HTML document to all devices by applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a large desktop browser, the content can be placed into multiple columns with normal navigation elements. But when that same page is viewed on a small smartphone screen, it appears in one column with large links for easy tapping. You can see just how responsive web design works at the Media Queries gallery site. Just open a design in your browser and then resize the window very narrow and very wide, and watch as the layout changes based on the window size.
So far we’ve seen that, at least for now, responsive web design is an sufficient solution for fighting with the growing device diversity, but what are the actual tools and technologies to implement it in our designs? Do we have to be web gurus to handle it or will just the essential skills we already have be enough? Are there any tools that can help us?
This is where front-end development frameworks come into play. Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices, and much more. One of the most important advantages is that they are so easy to use that even a person with minimal knowledge can utilize them without any problem.
In brief, if you are serious in today’s web development then using frameworks is a must and not an option. Nowadays your site must be extremely flexible in order to satisfy different browsers, tablets, smartphones and a whole bunch of other handheld devices.
It is built with LESS and consists of four main parts:
- Scaffolding – global styles, responsive 12-column grids and layouts. Bear in mind that Bootstrap doesn’t include responsive features by default. If your design needs to be responsive you have to enable this functionality manually.
- Base CSS – this includes fundamental HTML elements like tables, forms, buttons, and images, styled and enhanced with extensible classes.
- Components – collection of reusable components like dropdowns, button groups, navigation controls (tabs, pills, lists, breadcrumbs, pagination), thumbnails, progress bars, media objects, and more.
Bootstrap is already powerful enough to empower any web interface. But in order to make more use of it and making the development process easier, you can find plenty of tools and resources that complement it. Some of them are listed below:
- jQuery UI Bootstrap - an awesome resource for jQuery and Bootstrap fans that combines the power of both. It brings nicely the slickness of Bootstrap to jQuery UI widgets.
- jQuery Mobile Bootstrap Theme - similar to the jQuery UI theme above, this is a theme built for jQuery Mobile. It is a handy resource if you have a web front-end built with Bootstrap and want to offer a similar look for mobile.
- StyleBootstrap.info - Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently
- BootSwatchr - a Bootstrap theme roller that shows the immediate results of your changes. For every generated style, the application generates a unique URL in case you want to share it with others or return and edit anytime later.
- Bootswatch - a nice set of free themes for Bootstrap.
- Bootsnipp - a good collection of design elements and HTML snippets for Bootstrap. It offers also form and button builders.
- LayoutIt - drag and drop interface builder based on the elements and components of Bootstrap. It helps you to compose your design visually by placing and arranging different elements into your layout via drag and drop and then allows you to edit their properties. You get the base code and then expand it. Simple and easy.
Fbootstrapp is based on Bootstrap and gives you the same functionality for Facebook iframe apps and designs. It includes base CSS and HTML for all standard components like typography, forms, buttons, tables, grids, navigation, and more, styled in the typical Facebook look and feel.
BootMetro is a framework inspired by the Metro UI CSS, which is built on top of Bootstrap, for creating Metro/Windows 8-styled websites. It includes all Bootstrap’s features plus some additional extras like tiled pages, an application bar, and more.
Simply put, Kickstrap is a kind of Bootstrap on steroids. It uses Bootstrap as its base and extends it with many apps, themes and extras. This makes the framework a complete kit for building websites without the need to install anything. Just put it in your site and you are ready to go.
Themes give you the ability to differentiate from most Bootstrap websites’ standard look and feel.
Extras are fan-created additions to extend Bootstrap UI library. They usually use the same or similar syntax.
Foundation is a powerful, feature-rich, responsive front-end framework. With Foundation you can quickly prototype and build websites or apps that work on any kind of device, with tons of included layout constructs, elements and best practices. It’s built with mobile first in mind, utilitizes semantic features, and uses Zepto instead of jQuery in order to brings better user experience and faster performance.
The framework also offers many useful add-ons.
- Stencils – all UI elements available in Foundation in a form of Omnigraffle stencils and vector PDFs for building wireframes and mock-ups faster and more easily.
- HTML Templates – handy, ready to go layouts for you to quickly start from and build on. To use them you simply grab the code and drop it between the <body> tags of your page.
- Icon Fonts – these are custom icon sets of pictographic icons stored in a handy web font.
- SVG Social Icons – a set of resolution-independent social icons.
- Responsive Tables - the mechanism of Foundation’s responsive tables is to take the first column and “pin” it to the left of the table, thus allowing you to scroll the other columns under it.
- Off-Canvas Layouts – these layouts allows you to keep content or navigation on mobile devices hidden until either a larger screen size allows it to be visible or a user takes action to expose it. And when the last happens the content or navigation slides into view.
As you can see, Foundation is like a treasure-house for web developers/designers. And in order to get only what you need you can use the customizer to build your custom download.
It offers an extremely flexible, nestable, fraction-based, fluid grid system that makes creating any layout possible. GroundworkCSS has some really expressive features like tablets and mobile grids which maintain the grid column structure instead of collapsing the grid columns into individual rows when the viewport is below 768 or 480 pixels wide. Another cool feature is a jQuery ResponsiveText plugin which allows you to have dynamically sized text that adapts to the width of the viewport: extremely useful for scalable headlines and building responsive tables.
The framework includes a rich set of UI components like tabs, responsive data tables, buttons, forms, responsive navigation controls, tiles (a beautiful alternative to radio buttons and other boring standard form elements), tooltips, modals, Cycle2 (a powerful, responsive content slider), and many more useful elements and helpers. It also offers a nice set of vector social icons and a full suite of pictographic icons included in FontAwesome.
To see the framework in action you can use the resizer at the top center of the browser window. This way you can test the responsiveness of the components against different sizes and viewports while exploring the framework’s features.
GroundworkCSS is very well documented with many examples, and to get you started quickly the framework also provides you with several responsive templates. The only thing I consider as a weakness is the missing of a way to customize your download.
Gumby is simple, flexible, and robust front-end framework built with Sass and Compass.
Its fluid-fixed layout self-optimizes the content for desktop and mobile resolutions. It support multiple types of grids, including nested ones, with different column variations . Gumby has two PSD templates that get you started designing on 12 and 16 column grid systems.
The framework offers feature-rich UI Kit which includes buttons, forms, mobile navigation, tabs, skip links, toggles and switches, drawers, responsive images, retina images, and more. Following the latest design trends the UI elements have Metro style flat design but you can use Pretty style with gradient design too, or to mix up both styles as you wish. An awesome set of responsive, resolution independent Entypo icons, for you to use in your web projects, is completely integrated into the Gumby Framework.
Gumby has also a very good customizer with color pickers which helps you to build your custom download with ease.
8. HTML KickStart
HTML KickStart is a HTML5, CSS and jQuery-powered toolkit for easily creating any type of layout. It provides clean, standards-compliant and cross-browser mark-up.
You can use 99Lime UIKIT which has all the UI elements of HTML KickStart ready to be used in your wireframes.
IVORY is a lightweight, simple and powerful framework that can handle responsive layouts from 320px to 1200px widths. It is packed with 12-column fluid width grid, styles for typography and some essential UI components like buttons, toggle-switches, accordions, tabs, tooltips, and more.
IVORY is a perfect choice when you need a simple and flexible, multi device solution, and your design doesn’t requires extra functionality which other frameworks offer.
Lastly, if you need a solid, yet simple base without needless complexity and extras, for your new project, Kube can be the right choice. Kube is a minimal, responsive and adaptive framework with no imposed styling which gives you the freedom to create. It offers basic styles for grids, forms, typography, tables, buttons, navigation, and other stuff like links or images.
The framework contains one compact CSS file for building responsive layouts with ease and two JS files for implementing tabs and buttons in your designs. If you are looking for maximum flexibility and customization, you can download developer version which includes LESS files, with variables, mixins and modules.
Sources 1, 2