Here are a few general practical tips on building responsive sites that I would like to share.

Getting started and getting inspired

When starting a website project, it is a good idea to research other websites or templates for inspiration and ideas.  For example, if you need to build a website for a photographer, you can google "Best photographer sites" or "Photographer New York" – anything to bring up other sites in the industry (preferably on the higher end). This is a great way to get ideas about potential layout and look-and-feel. Of course, you won't be copying an existing website, this is about getting actionable ideas that will help you move forward. 

Also, you can google for keywords like "best responsive sites" to look at a list of general responsive websites for inspiration. A great thing about building a website from scratch is that you have the flexibility to imitate and create as needed. 

For beginners, the easiest way to get a hang of creating sites is to replicate the look and feel or the layout that you liked on another website (for practice), paying close attention to details like spacing and font sizes.

A pen and paper

Once you have a general idea on how the content would be positioned, you can grab a piece of paper and a pencil and draw a rough sketch - both of the smart phone and the larger screen version. A paper sketch is a quick way to capture and visualize your thoughts, and to determine if what you are thinking of would work before getting into the heavy lifting. 

A paper sketch also helps you organize your content priority, to make sure that important items don’t get pushed down too far on mobile devices.

Same user experience or different?

A lot has been said about the need to offer a different user experience for smart phone visitors, and I used to be a proponent of that myself. Just a few years ago the context of a mobile visitor was different from that of the desktop visitor. Typically mobile users were thought of as "on the go", with immediate needs to get something done right now (such as to find a phone number and make a call, or to look up a business nearby). The idea was to make the path to action for mobile users as easy as possible, even if that means hiding content or features.

Lately the lines between mobile and desktop context have blurred, with more and more users turning to their phones instead of a larger device for leisurely browsing or research. With the growing trend of increasing smart phone screen sizes we have to be very careful about limiting or removing features from the mobile users. Deciding what your mobile visitor should be able to see can create a disappointing user experience. Making assumptions that mobile users don’t need A or B is.. you know what say about making assumptions.

I am a big fan of offering the same information for all devices but simplifying the design for smaller screens to save on the page load time and the screen real estate space. 

You can see a great example of that on El Sendero del Cacao website. Here is the large screen version: 

.. and the smart phone version:

As you can see, all the information is still there on the mobile version, however the design is simplified, with most of the flair removed while still maintaining the brand consistency.

Prototype

If you are a high-end agency taking pride in delivering unique and amazing experiences for brands, you've probably been running into some difficulties with the traditional design methods. Photoshop does not work well for responsive design, as a Photoshop project starts by asking you to define a screen size. Your client wants to see what their website would look like on a variety of devices, and there is simply no easy way of accomplishing that with Photoshop. (Adobe Edge Reflow helps some, but it is rather limiting for my tastes, and it comes with a learning curve). 

What you could use is a prototyping tool that would allow you to share a website draft with the client and agree upon how the experience would work on various screen sizes. Once the content flow, layout, and perhaps even general design elements are agreed upon, you can fill in the design details in Photoshop. Or skip Photoshop all together and move on directly into a web framework.

SignalMind was designed as a flexible and easy tool for quickly building responsive sites, which also makes it an effective tool for prototyping.

Does everyone need a responsive site?

From the usability standpoint - not always. Some non-responsive sites simply “work”, meaning that they are readable on smaller screens, and navigation is relatively easy.  Also, some people prefer to get exactly the same experience on their mobile devices that they do on their desktops, and don’t mind just a little zooming and pinching (assuming it is really just a bit of effort required to get around). 

From the SEO standpoint, however, mobile-friendliness is about to become a lot more important. Google has recently announced that they will be expanding the use of mobile-friendliness as a SEO ranking signal as of April 21 this year. (You can use this tool to test how Google views your site as far as being mobile-optimized).

If SEO matters to you, and especially if most of your competitors already have mobile-friendly sites, then converting to responsive may be worth the investment.