The word “responsive” gets thrown around a lot these days, and as Fireant has adapted to many industry changes over the years, this is one we love to implement and offer to clients. This is post 1 of 2 where we entertain four easy responsive web design options, and examples of mobile solutions we have created for clients in the past.

Designing Responsively

A multitude of options exist for creating a mobile/tablet/desktop friendly site. If you are starting a new website or already have one, we will cover four options available to create a mobile-friendly user experience.

  1. If you (or your designer) is making a custom theme, using a 100% liquid width is a great way to accomplish a responsive website. This can be done by setting a “max-width” and “width” in your CSS style sheet. It can also be done using a HTML5 Boilerplate or a Framework. This article describes 20 exceptional options for a Boilerplate or Framework.
  2. If you prefer using WYSIWYG tools to design, Adobe’s Dreamweaver or Headway Themes for WordPress, among others, allow you to select a percentage-based grid layout. Dreamweaver CS6 even includes an adaptive vision to create custom designs for phone and tablet sized screens.
  3. If you will be using a CMS, such as WordPress, you can use (or buy) a responsive theme, and input your content, allowing the theme to take care of the other screen views for you. If you are already using WordPress without a responsive theme, fret not! There are options to amend that. One option is using a WordPress plugin, Responsive Select Menu, which will turn your navigation menu into a scroll for smaller screens, enhancing the user’s mobile experience. Or, view options to make your entire wordpress site responsive using plugins.
  4. The fourth and final option we will discuss is outsourcing to a third party that creates a separate mobile/tablet website representing your non-responsive theme. This one is cheating, though. By definition, a separate mobile site is NOT responsive, it is just the opposite. But these third parties can make your site “mobile-ready.” Most have monthly paid options to help you create a mobile site based on your original layout. Some do it for you, and some are do-it-yourself.When using a third party it is important to remember that you rely on that company to stay in business as long as you will, and to supply that support for an ongoing cost. In that regards, creating a truly responsive site that requires no contract or monthly fees to maintain is beneficial. In the next blog, we will discuss when a separate mobile site is more beneficial than a responsive option.
Review, Reflect, Respond

When making the decision of how to achieve a responsive (or mobile-ready) website, think of your options, budget, and user. Let’s review the 4 ways we covered:

  1. Do it in the code, or use a HTML5 Boilerplate or a Framework.
  2. Use a WYSIWYG tool, such as Dreamweaver or Headway, to apply a fluid grid.
  3. Add WordPress plugins or Responsive Select Menu.
  4. Third party providers.

Stay tuned later this month for how Fireant creates responsively, and happy clients who present their site everywhere their user is!