Responsive Utilities
Venu Boddu

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images & cascading style sheet media queries.

What is Responsive Web Design …?

• Responsive design is about creating web sites which automatically adjust themselves to look good on all devices from small phones to large desktops.
• Almost every new client these days wants a mobile version of their website.
• It’s practically, one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle & all screen resolutions must be compatible too.
• In the field of Web design & development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions & devices.
• For many websites creating a website version for each resolution and new device would be impossible or at least impractical.

At Symphisys, we have done many projects with responsive itself. Clients are have being very happy with our works.

Adjusting Screen Resolution

• More devices come varying screen resolutions, definitions & orientations.
• New devices with new screen sizes are being developed every day & each of these devices may be able to handle variations in size functionality.
• Previously, when flexible layouts were almost a luxury for websites, the only things that were flexible in a design were the layout columns and the text.
• Images could easily break layouts & even flexible structural elements broke a layout’s form when pushed enough.
• Flexible designs weren’t really that flexible.
• Bootstrap is the most popular in HTML, CSS and JavaScript framework for developing responsive mobile-first web sites.
• Bootstrap is completely free to download and use it.

What is Bootstrap …?

• Bootstrap is a free front-end framework for faster and easier web development.
• Bootstrap includes HTML and CSS based design templates for typography, forms, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap History

Bootstrap was developed by Mark Otto & Jacob Thornton at Twitter and released as an open source product in August 2011.

Advantages of Bootstrap

Easy to use

Anybody with just basic knowledge of HTML and CSS can start using Bootstrap.

Mobile-first approach

In Bootstrap 3, mobile-first styles are part of the core framework.

Responsive features

Bootstrap's responsive CSS adjusts to phones, tablets & desktops.

Browser compatibility

Bootstrap is compatible with all modern browsers like Chrome, Firefox, IE, Safari and Opera.

Where to Get Bootstrap …

Here, there are 2 ways to start using Bootstrap on our own web site.

• Download Bootstrap from getbootstrap.com :
  If we want to download and host Bootstrap ourselves, go to getbootstrap site and follow the instructions.
• Include Bootstrap from a CDN :
  If we don't want to download and host Bootstrap ourselves, we can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap's CSS, JavaScript & jQuery.

Advantages of using the Bootstrap CDN …

• Here, many users already have downloaded Bootstrap from MaxCDN when visiting another site.
• As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
• Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.