What is Responsive Design?
We first have to go over exactly what "Responsive Design" is before discussing why it is so important. In simple terms, responsive web design is a website which dynamically adapts itself to look native across all mobile platforms (Laptop, Tablet, Phone, etc.).
I say all because it manipulates the max and min widths (in pixels) of a website and all mobile screens have a set number of pixels. It does this by using CSS3 (Cascading Style Sheets - tells a website how it should look to the front-end user through it's layout, colors, and fonts) media queries to set different styles depending on the page's current width.
Why is it Important?
This is not only good for the SEO (Search Engine Optimization) of your website, but it is also quite useful for the potential customers viewing your site. The end-user will have a better time viewing your site on their mobile devices because the site will look clean and optimized for whichever device they choose to view it on. This will keep them on the site for a longer period of time, thus giving more time to convert them into a customer. Not to mention, it allows for more people to view your site, giving you more opportunities for conversions.
This is also good for SEO as having a separate mobile website will actually count as having duplicate content, and Google (along with many other major search engines) frown down upon this.
Why Don't All Sites Do This?
This is fairly new technology, and is really now more important than ever as there has been such a rapid growth in mobile usage. Not to mention, it is quite the time consuming task to implement a responsive design layout to an already existing website. It is best to decide if this feature is at all necessary for your site when it is first being developed.
Check it Out in Action
Simply resize the width of your browser on any page of our website to see the layout transform -or- visit our site on any of your mobile devices.
How Do You Make Your Site Responsive?
You essentially have two options available:
- Hire someone else to do it; or
- Learn how CSS3 media queries work and do it on your own.
No idea how CSS3 media queries work? Don't worry! I have some good news for you. Very smart people have gone out of their way to make our lives much easier. They have done this buy creating reusable responsive frameworks for anyone to use. Large companies like Twitter are even in this game and they have a team constantly improving their responsive framework, Bootstrap. Just because very talented people made this does not mean it is necessarily the best option out there though. It is regarded as a very bloated framework which has things like pre-made buttons, tabs, icons, and more in addition to it's responsive shell. For this reason, I personally stay as far away from it as possible.
Bootstrap, like its main competitor Foundation (by Zurb) are more meant for beginning web designers, or those who are better with the back-end (also known as web developers). So if I don't use Bootstrap or Foundation, which responsive framework do I use?
My Favorite Responsive Framework
Lost is unlike any of the above mentioned frameworks. Many grid frameworks have predefined columns which don't allow for very much flexibility. Lost handles this much differently. It utilizes smart CSS preprocessors tied with the likes of Stylus and SCSS to create responsive and flexible grids. It is truly the future of grid systems and responsive design. This grid system does have a pretty decent learning curve compared to fixed column grid systems though. It is important to first know how to use a preprocessor before using Lost.
Lost is also an open-source project hosted on GitHub that has countless great developers improving it each and every day. This forward thinking framework has stood the test of time and is only getting better. I highly recommend checking it out.