No matter where you look on the web today, Responsive Design is there.People are using the internet more than it ever thanks to the many devices these days having access to the web. A key job of a designer is to make sure they create something that is not only easily accessible and used by the user, but also accessible on any platform that best reaches the user. To do this in the ancient days of the web, we would have to create separate pages and even separate sites for a user to access a site or application on their phone and other devices. But now-a-days, we’ve simplified that process.In Today’s web, we integrate everything into one site. Why? This minimizes the page load and loading time between multiple devices, as well as makes it functional for the user no matter where they may be and what platform they may be using. People can access a site that is on a computer as well as by phones and other devices. If we didn’t use responsive design, the user would be given one big site that fails to look functional on their screen. They would have to zoom in and pray that they click the right link or button, squinting to read any information you are trying to provide to them.With Responsive Design, we fix this problem. A site that looks good on a computer, will also look good on a tablet and phone, no matter the screen size. We alter the sizes of images and fonts, so they can be properly displayed on the providing screen. And lets face it, with computer screens being as big as they are, we tend to add a bit of extra design and functionality to the page, so that the user can have a decent experience. However, the tools a laptop may provide aren’t necessarily provided with a phone or tablet. We don’t have a mouse to look around and click. We don’t have a massive screen to view things on. When our screen minimizes, so does our functionality.Example: Many big sites these days have Drop down menus. The issue? A phone does not have enough room to have a giant drop-down, much less list all the options across the top of our page. Additionally, phones do not have a mouse that allows easy downward scrolling while that drop-down is open. Solution? Create a drop-down that works on the users desktop or laptop computer, but also minimizes into a pop-out sidebar or options list when it gets to a smaller height. This way the user can just use their finger to navigate throughout the site with ease, but still have a successful experience on their computer.
What are some of the positive effects?
Well, for one, your client will be happy. Instead of having to make several side pages and sites like we used to, we can incorporate everything on one site or page that works on all platforms. This means less money out of your clients’ pockets, preventing them from having to pay for extra server space and urls. The mobility that you provide will satisfy users of the site. Instead of having to be redirected, they just go straight to the site and use the app as intended. You get to write less code and have less to manage, saving more money for your client and you have more time to spend on more important things.
How do I use Responsive Design?
The next step in the process is Media Queries. Media Queries are CSS-based and they’re handy little wrappers that allow you to add/remove or even change a page’s design based on the device’s screen width. No more having to use JavaScript to detect the size of your browser. The Media Queries do this for you and actually help you minimize the amount of JavaScript you use.
Percentages and Ems
Instead of using a specific width, (960px sound familiar?), we want to retain flexibility throughout all devices. This is where it would help to better understand percentages and ems. These two things will help change your element sizes based off of certain factors; how big your screen is being the biggest one. However, one specific percentage still may not look good on other devices. Fifty percent for a phone is much more different than fifty percent on a desktop screen.
Media Queries
In the event that something looks wrong on a different screen-size, Media Queries will jump into play. Media Queries are used within your CSS to detect screen-size and even type. They even cover whether the user’s phone or tablet may be in landscape mode or portrait mode. After detecting all this information, you can pass some CSS through the Media Query to go to this device only. This disables or overwrites styles you may need to change or don’t need at all.This is an Example Media Query:<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)">As you can see, we’re targeting any screen, with a minimum width of 701px and a max width of 900 px. This means that any device with a detectable screen between the widths of 701px and 900 px will be using this CSS.To make things easier, there are many sources out there for you to build responsively. The most convenient resources are frameworks that were built out to be responsive.Two of the best frameworks are:
Additional resources:
Responsive Design is growing at an incredible rate, especially considering the fact that most of the sites you find on the web now are web applications, and not just web-sites. I think it best that all designers and developers know how to work with this process. It may look and seem complicated at first, but honestly it’s very easily integrated into your normal flow of work.Smashing Boxes is a web and mobile app development company know for creating a lasting experience through bold design and disrupting the status quo. We are entrepreneurs and craftsmen first, and a digital creative agency second. Inspired by our visionary clients, we transform ideas into innovative web and mobile applications. Take a look at our work.Cover photo by Thom Weerd
