It's a given you want your website to be visually appealing, fast-loading, and easy to navigate. But it must have these qualities on all the various devices available today,
from smart phones and tablets to laptops and desktops. That is the goal of Responsive Design. You don't want it to be fine on some devices but "broken" on others.
Whether you use one of the many Content Management Systems available (such as Drupal, Joomla!, WordPress) and choose a responsive theme or template, or build your own site, it is important to at least consider implementing a responsive solution.
Is your site already responsive? If you're not sure, here are a few sites which will help you find out.
- Google's Mobile-Friendly Test : As of April 21, 2015, Google has been presenting two sets of search results.
If you search using a mobile device, sites which are mobile-friendly will rank higher than those which are not. If you search using a desktop/laptop, it is assumed you will receive a list of all sites, regardless of whether or not
those sites are mobile-friendly. So it is in your best interest to be sure your site is designed/redesigned with responsiveness in mind.
- Matt Kersley : Responsive web design testing tool. No frills, just enter a URL and see how your site looks at 5 major breakpoints (screen widths).
Also, Matt Kersley has provided an avenue to install it on your own server for additional functionality.
- Responsinator : Simulators for various specific Android and Apple products.
- DesignModo : Responsive web design testing tool.
- MobileTest.me : You can see, not only how your site looks/behaves on small devices, but on specific smartphones and tablets. This is currently free, but it is not
clear if it will continue to remain so.
- AmIResponsiveDesign : See how your site looks on different (simulated) Apple platforms. It only shows screenshots of the
"above the fold" content of the page you enter.
If you do build your own there are a number of frameworks available that are built with responsiveness in mind. Some of the more popular are listed below:
Clicking on any of the links below will open a new window or tab and take you to another website. Phase One has no control over these websites. Please use caution when visiting them. And, as with
all free software, please investigate before downloading to be sure they are safe and free from malware.
- Foldy960 : A responsive 960 grid starting point for your responsive site.
- Initializr : is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
- Foundation
- Responsive Grid System : "Spectacularly Easy Responsive
Design. The Responsive Grid System isn't a framework. It's not a boilerplate either. It's a quick, easy & flexible way to create a responsive website."
- Skeleton
- Twitter Bootstrap
- HTML KickStart
- HTML5 Boilerplate Mobile : "A best practice baseline for
your mobile web app. Mobile Boilerplate helps you create rich, performant, and modern mobile web apps. Kick-start your project with dozens of mobile optimizations and helpers.
- Ingrid "Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce
the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts. Ingrid is also meant to be an extendable system,
easy to customize to your own needs."
- Less+ Framework : "Less+ empowers designers and developers to build websites
that can adapt their content depending on screen resolution."
- Here is a page on Mashable "20 Exceptional CSS Boilerplates and Frameworks"
