By Ben T. Smith, IV and Steve Trefethen
User experience is paramount in today’s world of extreme competition full of independent, sophisticated consumers. In general, user experience refers to how people feel when they use a particular technology, and is often applied in regards to websites and apps. In the past, this was a relatively simple process that meant designing the website to be easy to navigate, nice to look at and quick to load. Now, however, people are accessing sites from a variety of devices including mobile phones, tablets or laptops with different screen sizes, interaction options and software capabilities. No longer can a website be designed only for desktops or laptops.
In a survey conducted earlier this year by Uberflip, a single person tends to use several devices practically at the same time. Nine out of 10 people have been found to use different-sized devices sequentially throughout the day. Two thirds of survey respondents typically use their smartphone and laptop or PC at the same time. People often begin their online activities on a smartphone, except when shopping or managing their finances. Meanwhile, tablets are the most common device on which to watch videos and plan trips.
Using responsive web design to create fluid content
Responsive web design means creating layouts and content that adjust based on the user’s device. These sites automatically determine the system that is being used, and chooses the proper formatting for the device and its screen size. In general, responsive web designs use a particular feature of CSS called media queries to recognize the user’s device and adjust the site to fit it. This strategy uses only one code base and one set of content. A visitor to a site with responsive design sees a layout that is most appropriate for the device their using.
This is in contrast to the more traditional method of providing mobile web content with a dedicated mobile website. In the older method, when a user accesses a site, it automatically recognizes that a mobile device is being used. It then redirects the visitor to a different version of the site designed for mobile access, usually formatted “m.website-name.”
Many tools and services have emerged to help people who are not front-end development experts. The Responsive Grid System is one such service. This is a free tool that provides the code to let a developer easily create a fluid layout grid. It uses columns and margins that scale to different-sized screens based on percentages, allowing developers to upload content without worrying about scaling it for different devices.
Examples of great responsive website design
The digital agency Social Driver recently posted its list of the 50 Best Responsive Website Design Examples of 2013. For best results, view with both a desktop/laptop and a mobile device. A couple of the best include:
- The National Society of Collegiate Scholars: This beautiful site is mobile-ready with plenty of pictures and navigation options. It will fluidly resize based on the device being used, maintaining a strong focus on the website’s purpose of informing about the organization.
- Dadaab Stories: This is a very attractive site, again making heavy use of big, colorful pictures that will resize themselves. Video is included in the background of the navigation screens, creating an immersive experience on any device. The navigation bars are simple and easy to use.
Web developers have no choice but to adapt to the wide variety of devices being used. The solution to optimizing sites and apps across multiple devices lies in responsive web design.