Responsive Layout

Quick Contact

Get Quick Quote
+91-288-2672777

Responsive Layout

Responsive design at its most elementary definition is simply the use of css media queries and some javascript to rearrange a website's layout to fit multiple screen sizes. This can range from a wide screen monitor down to the smallest of smart phones. It is done all through the same site, same installation, sharing the same files, and no extra layouts needed as in the past. Unlike many pixel grid based sites, our sites are already built on a fluid width layout based on percentages, with an optional pixel width wrapper, which is what responsive layouts require.

What Makes our design The Best and Most Flexible?

  • Virtually no javascript. The only javascript used is for the mobile bar effects and to add responsive capabilites to IE7. We believe that javascript should only be used as a last resort.
  • Every area of the site, ie: columns, row, and body; are set to a fluid layout.
  • Automatic onclick menu functionality for small touch screens.
  • Optional IE7/8 responsive layout.
  • Very easy to understand layout, which allows users to navigate your site with very little effort.
  • Fully customizable mobile bar styling.
  • Optional row re-distribution at smaller screens.
  • Hide divs, modules and content easily with hide classes at specified screen sizes.
  • Wide screen support options.
  • Multiple options for fluid width images.
  • And much more!

Easy To Understand Layout

One of the biggest advantages to our Responsive Layout is that we start the layout as if it were designed for a desktop viewer, and then simply reduce, modify, or remove certain sections or font sizes based on the size of the user's screen. This is all done through css media queries, and is all done automatically for you!

The best way to see this approach, is simply resize your browser to see it all take effect.

Some responsive designs simply use a series of floating divs that re-arrange themselves on the page and add columns as the screen width increases or decreases. The biggest con to this approach is it can become very confusing as to where your content will actually exist on any given screen; making it very hard to create a specific layout and confusing for a client; especially those with specific product and content placement needs.

Our approach is much easier to understand. When the screen changes it will adjust as described below. The majority of rows and columns will not change their basic styling or positions until they reach the mobile version. Again, only minor adjustments are made on varying screen sizes so that you always know what your site will look like and where content will be placed!


Below are illustrations of the center columns only in the scenarios described above.



Mobile Bars

When the screen size reaches 750px wide (anything smaller than a standard 10 inch tablet), a navigation bar will appear across the top of the site and the bottom. This bar replaces the main menu, login, register, and search, for easier user on mobile devices. In the configuration you can choose what to enable on these bars as well as change the colors and style however you would like.





There are two layout options you can pick from: 1. A drop down layout where each item appears in an independent drop down that slides from the top of the site. 2. A off canvas sidebar option, where all items fit into a nice side slide-out area on the side of the site.





Mobile Links

Even though this is a responsive layout and there is no separate layout page for mobile devices, that does not mean that your site's viewers will understand this or even know what a responsive layout is. It has become a standard for websites that use a mobile layout to have a link to view the desktop view of the website, and this is what your site viewers will expect to see. This link simply turns off the responsive configuration using a cookie and calls the website like a standard desktop would when viewing in mobile. There is then a link to return back to the mobile view of the site presented.

I like what I see! I want to MAKE THIS FOR MYSELF.

Customer Support

+91-288-2672777

Mon-Sat
10am - 7pm