Responsive Web Design
Web users increasingly use mobile devices to browse Web sites and
apps, Web designers and developers should make sure that their creations look
as good and it should work well on mobile devices as on traditional desktop
computers. Responsive web design (RWD) is a web design approach
aimed at crafting sites to provide an optimal viewing experience, easy reading
and navigation with a minimum of resizing, panning, and scrolling, across a
wide range of devices (from desktop computer monitors to mobile phones).
Using responsive design to build a mobile site
takes less time than creating a stand-alone mobile site, it’s easier for the
client to manage and maintain, and the user has a seamless experience without
need for redirection. Whatever the screen size of the user they’ll be served
from the same database and same page, meaning that we have one solution to fit
all devices.
A responsive site should respond to the user’s behavior and environment based on screen size, platform and orientation. This approach is possible by the mix of flexible grids and layout, images and an intelligent use of CSS media queries. As the users move from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. This avoids the need for a different design and development phase for mobile, tablet and desktop views.
There are three
basic things involved in creating responsive web layouts,
- Liquid or fluid layout: Defining all container widths
in terms of percentages of the browser viewport, so that they expand and
contract as the browser window changes size.
- CSS Media queries: Invoking different style sheets
based on the capabilities of the display being used, such as size,
resolution, aspect ratio, and color depth.
- Fluid images: Setting images to occupy at
most the maximum display width.
Truly responsive Web design
requires all three features to be implemented.
Some of the real time responsive
websites that shrink to the size of the browser are,
Hint: Resize the browser to see how the above sites are
rendered at different screen sizes
Twitter
Bootstrap – An Introduction
Twitter
Bootstrap is a flexible, sleek, intuitive and powerful front
end framework that provides developers and designers an incredible set of
tools for faster and easier responsive web development. It was developed by Mark Otto and Jacob Thornton at Twitter
as a framework to encourage consistency across internal tools and after it was
released as open source, in a short span of time it turned out to be the most
widely used responsive framework. It is compatible in all major browsers (Even
IE7!).
In
addition to the regular HTML elements, Bootstrap contains other commonly used
interface elements. These include buttons with advanced features (e.g. grouping
of buttons or buttons with drop-down option, make and navigation lists,
horizontal and vertical tabs, navigation, breadcrumb navigation, pagination,
etc.), labels, advanced typographic capabilities thumbnails, formatting for
warning messages and progress bar.
The JavaScript components of Bootstrap are
based on the jQuery JavaScript library. Plugins are
accordingly found in the jQuery toolkit plugins. They provide additional
user-interface elements such as dialog, tooltips and carousels. They also
extend the functionality of some existing interface elements, including for
example an auto-complete function for input fields. In version 2.0, the
following JavaScript Plugins are supported: Modal, Dropdown, Scrollspy, Tab,
Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.
An implementation of Twitter Bootstrap using
the Dojo Toolkit is also available. It is called Dojo Bootstrap and is a port of the Twitter Bootstrap
plugins. It uses 100% Dojo code and has support for AMD (Asynchronous
Module Definition).
Why use Twitter Bootstrap?
To create a responsive website, it is always good to use a
responsive front end framework instead of implementing everything from the
scratch. This is because CSS3 media queries are not supported by older browsers
and doing graceful degradation would be another painful task for web designers.
So in order to save time, we should make use instant solutions available. Among
all the solutions that are available, Twitter Bootstrap is my choice for the
following reasons,
1. Saves Time
The Bootstrap
libraries offer readymade pieces of code that can pump life into a website. A
web developer doesn’t have to spend time laboriously working out and writing
code, but simply find the right piece and fit it into the structure they’re
working on.
2. Free of Cost
With lot of features and capabilities, twitter bootstrap
comes at absolutely free of cost and is provided under Apache license.
3. Consistency
One of
the main reasons this toolset was developed was because Twitter was seeing big
inconsistencies between developers working on their projects. This caused some
issues both on the development front and the end-user front. Since it works
with a central set of development code, Bootstrap’s results are uniform across
platforms. We can see the same thing on Internet Explorer, Chrome and Firefox.
4. Competitiveness
Bootstrap isn’t the only one of its kind. It has been pitted
against JQuery UI and the HTML5 Boilerplate, but a more realistic competitor is
the Zurb Foundation. Bootstrap 2 has a toolset that the Foundation will have a
tough time matching up to. Third party plugins, themes, a plethora of
features, codes, etc. are already up for grabs with Bootstrap – which isn’t
true for the Foundation at this point
5. Documentation
Bootstrap’s documentation is impressive. The case with most
newer platforms is that they don’t have proper documentation, but Bootstrap
gives us a head start because we don’t have to play with everything to learn
and instead can find information on just about anything through the
documentation.
0 comments:
Post a Comment