Responsive website design

Other posts in these subject areas: Color   CSS   Design   Education   Marketing   Security   Other Subjects

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.

  • ish. : "I'm happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It's called "ish." because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It's our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help."
  • 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.

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
  • Gumby Framework
  • Base : a "Super Simple Responsive Framework".
  • 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."

  • Responsive Design : A site packed full of hints and tips to help you with your responsive design efforts.
  • Here is a page on Mashable with many more links to investigate.

 

Other posts in these subject areas: Color   CSS   Design   Education   Marketing   Security   Other Subjects