A commonly encountered issue that I addressed quite often begins with one of the following paraphrased sentences:
- "How do I make my application work on mobile devices?".
- "What do I need to do to make my website look good on all platforms, phones and tablets?".
- "What is a CSS Media query?".
- "How can I detect my browser to apply a style-sheet on a browser-by-browser basis?".
Although questions like these are often worded differently, they all revolve around the same basic concept: Responsive Design.
This post will cover some of the common methods that you can integrate Responsive Design (or elements of Responsive Design) within your website or application to more easily target multiple devices, platforms and hopefully audiences using a single design.
What is Responsive Design?
Responsive Design is an approach that suggests that design and development should respond to the user’s behavior and environment taking into consideration screen-size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries to target and apply a single design that has the same look and feel across all devices and platforms. As the user switches between their desktop, laptop, tablet and even cell phone, the website / application will automatically switch to accommodate for resolution, image size and scripting abilities.
The beauty of Responsive Design as opposed to older and more traditional methods of web design (e.g. mobile style-sheets) is that will allow your site or application to actually respond to the environment of your user and serve them the most appropriately designed option. This eliminate the need for developing a different design, layout and styling for each newly released device on the market and allows you to spend that time actually designing your application.
Common Approaches to Responsive Design
When discussing Responsive Design, I usually focus on the following three major options that a developer has to add some responsiveness to their website or application:
- Using a Responsive Design Framework
- Using CSS Media Queries
- Using Percentages
Each of these approaches has their own benefits and challenges when it comes to actual implementation. We will cover each of these briefly to help determine which might be the best for you and your applications or web sites.
Using a Responsive Design Framework
Responsive Design frameworks exist for a reason. They are tried, tested, supported and proven.
This will allow your site or application to run on basically any device regardless of platform as long as it had an internet browser to access it and will make it much easier to develop as you will only need to create your ASPX page within one area and the beauty of Responsive Design is that it will style your pages appropriately based on the current platform and device.
There are tons of Responsive Design frameworks and boilerplates available that you can use to implement these into your site such as Twitter Bootstrap and a variety of others.
It's important to know that these are not just magical frameworks. You can't simply drop them into your application expect everything to be instantly responsive. They often require a great bit of tinkering to get everything working and looking just as it should, but it is probably the best method of handling a situation like this (depending on the controls that you are using).
Many use different forms of grid-based design systems that will essentially break your layout into rows and columns to handle any shrinking or expanding content. Each framework varies on their own implementations, some rely more heavily on JavaScript, others might use more CSS, but you don't really need to worry about much, because all of the hard parts are basically done for you.
These could fairly easily be integrated into a Web Forms or MVC application and would basically be all that you would need to use:
Using CSS Media Queries
CSS Media Queries play a crucial role within Responsive Design.
These queries allow you to place actual rules and constraints within your style-sheets which your browser will interpret and apply styles based on information provided by your browser, such as screen-size, orientation, display density and other information. These rules will actually allow you to define ranges that you’ll use to target specific resolutions and screen sizes and style elements accordingly, however this is a bit more manual and you would have to write queries for each of the sizes that you are targeting.
These will take a bit more work that using a Response Design framework (which also uses media queries) as you will have to write queries to target all of the different major resolutions that you want and then within each of these actually re-size some of your elements manually.
For example, if you wanted to style your website specifically to look a specific way for mobile browsers only, you might have an entirely separate style-sheet that you use media queries to determine if it should be used or not:
- <!-- This style sheet will ONLY be used if the max width of your device is 480px (or a mobile display) -->
- <link href="mobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" type="text/css" />
As you can see by the query above (present in the
media attribute) this style-sheet will only be applied if the maximum width of the device is 480 pixels (basically only targeting mobile or very small interfaces). These queries are not limited strictly to elements and can actually be used within your style-sheets as well.
You can see an example below that will change the size of the font within the body element based on the width of the current viewport:
-
- @media only screen and (min-width: 1600px){ body { font-size: 128px; }}
-
- @media only screen and (max-width: 1600px){ body { font-size: 72px; }}
-
- @media only screen and (max-width: 1200px){ body { font-size: 48px; }}
-
- @media only screen and (max-width: 900px){ body { font-size: 36px; }}
-
- @media only screen and (max-width: 600px){ body { font-size: 24px; }}
-
- @media only screen and (max-width: 400px){ body { font-size: 12px; }}
You can see an interactive example of this
here.
As you can see in the example above, the size of the font within the page will actually adapt with the width of the view-port without the need to call any JavaScript-based re-sizing events or anything like that.
Using Percentages
Percentage-based widths can be another great way to add a responsive feeling to your site by simply migrating away from explicit sizing for your elements (e.g 16px, 30em, etc.) to a more percentage-based system (width: 10%, width: 100% etc.). This method will typically take a great deal of planning a work to determine where everything will go and how it will all mesh as the browser window is re sized. You’ll have to scale everything within your site to use percentages and explicitly define minimum and maximum heights and widths for your elements (this is necessary to establish boundaries).
If this sounds too laborious, it’s because it often is, but it is a completely viable method for incorporating Responsive Design into your site or application. If you elect to take this route, I highly recommend using Media Queries as well (if they are available to you) because will likely make your life much easier and make you hate CSS much less.
Why you should care
The web is everywhere now.
It’s available on phones, in your car, on your television and
even in your glasses. With new devices being released each month and resolutions continuing to grow even as the size of some of these devices dwindle down, it’s important that you use Responsive Design to ensure that your application or web site doesn’t look like crap on all the latest and greatest new gadgets. You always want to impress someone when they access or use that you do, regardless of where or how they get there.
It’s not that tough to implement and quite easy to maintain and your users will appreciate it.