So how do we do it?
Ten years ago, before the rise of the smartphone, web users viewed the internet on two devices: desktop and laptop computers. The screen sizes and resolutions were predictable, and websites were designed around this. With the rise of smartphones and tablets, designers can’t plan around a specific device anymore. Instead, websites need to be built around the idea that webmasters can’t control how users access their sites and must ensure an optimal user experience across all devices.
Dedicated mobile vs. responsive
There are really two ways to accomplish this: dedicated mobile websites and some form of responsive design. Dedicated mobile sites exist on a separate subdomain, usual m., and are optimized for viewing on mobile devices. The issue is m-dot sites are entirely separate from the primary desktop site. They have separate markup, separate presentation, and separate content. Often, content found on a desktop site isn’t even available on a dedicated mobile site.
Responsive web design (RWD)
Responsive design builds on fluid grids but also uses media queries to change how the site is displayed at pre-determined points, while adapting flexibly between those points as well. This method is ideal, because it responds appropriately to unusual or yet-to-be-release screen sizes and resolutions. The focus is on user experience across any device. There is only one set of content and the site uses the same markup on any screen and at any resolution. The only difference between sizes is how its styled. This makes it easier for webmasters to quickly update or add content, without having to build it into two separate sites, ensuring all of the most important content is readily available for any user.
Responsive is generally preferred over dedicated mobile sites, because it offers a continuous user experience. There is only one site and content is (generally) the same. While webmasters may choose to hide less important content at smaller sizes, there is no requirement to update two or more sets of content each time a change is made to the site. For this reason, Google prefers responsive design because it is easier to crawl.
For attorneys, and other small business owners, responsive web design allows you to build your website around the mobile experience. Buttons can change size to accommodate for visitors using touchscreens and fonts can resize automatically to be easier to read on smaller screens. This removes the need for users to zoom in and out to find and read content. Additionally, menus can be created exclusively for use on smaller screens, making it easier for visitors to find information and contact you.
RWD in action
Now that you know the difference, grab the corner of your browser with your mouse and drag the edge horizontally to make the window narrower. Notice how this article resizes when the browser window hits the content? See how the layout changes to handle smaller sizes, such as for tablets and smartphones? That’s because of responsive web design. Those “media queries” we mentioned before are telling the browser to use different styling when it goes below a prescribed width. All LawLytics attorney websites are built using responsive web design, so your clients will see the same content regardless of device, screen size, or resolution.