Responsive Design

A responsive design makes the web page layout compatible with all device types - computers, tablets and phones. A good design uses HTML and CSS to make items dynamic so that they can adjust in size and position in the layout.
It is important to realise the difference between a responsive design and one with dynamic width. A dynamic width design will fill the browser width no matter how wide it is whereas a responsive design is centered in the browser and has a maximum width setting to stop it expanding too wide when viewed on large screens with a wide browser setting. A dynamic width merely reduces the items width whereas a responsive design will reposition items using CSS media queries.

One Site or Two?

While a single site design which can be viewed on all devices may seem like the web designer's version of eutopia, this is not the case. It takes a lot of time and skill to create an efficient and workable design. Those offered to Wordpress designers are almost laughable in their inefficiency and resort to using huge amounts of javascript to overcome the user's lack of skill and knowledge.

Mobile First

In many cases, the mobile site is all that is needed. For example, over 80% of surfers access local business websites using touch devices. A responsive mobile website with a maximum width of about 780px will perform well on tablets and phones and will suffice for the minority using computers.
A small busines with limited resources should focus on the mobile version of the website and only consider a full version of the site when time and finances allow.

Two Sites

If a full version of the website is considered essential, the next step is to decide where the crossover should occur. Should tablet users be able to view the full site or the mobile version? If the full site is mobile friendly it will also be suitable for tablet users. Mobile friendly means that all user inputs should be fingertip size and hovers avoided or replaced with click. Slideshows need to have swipe or tap navigation and audio/video players need a play/pause control at least 32px square.

Break Point

The break point is the browser/device width at which the switch is made from one version of the site to the other. The break point for an iPad in landscape mode should be set at 1059px and 799px for portrait mode.

The image shows the screen sizes of the various sizes of iPhone - both in portrait and landscape mode.
It should now be obvious why a fixed width mobile version of the site is far from satisfactory since the screen widths vary from 736px right down to 320px.
To target smart phones, the break point should be set at 739px.
See THIS page for info about setting up a responsive layout in EverWeb.

Mobile Site

Making a separate mobile site allows the media files to be reduced in size for faster download. All images - including those used in sliders - should be no more than 720px wide. Video files should be reduced as much as possible. Use a widget which shows a poster image on page load and prevents preload.
A slideshow or image gallery should be replaced with a lazy loading, swipe slider or an image grid.
Make sure all user inputs - especially navigation links - are at least 32px wide and 28px in height.

Content

Mobile website content needs careful thought in terms of keeping it to a minimum and focusing on getting the visitor to the required information using CTA (call to action) links rather than having to drill down through navigation menus. Keep text descriptions brief and to the point and make sure all images have descriptive captions. Test images on a device or the iOS Simulator in both portrait and landscape mode to make sure they fit within the screen's dimensions.
Use more pages rather than cram too much in and make sure they have a smooth scroll to the top function.

Testing

Mobile designs must be tested properly using a device or the iOS Simulator. See the Testing page for more info.