By Jason P. Lisi, Esq., founder and president of LISI
Since 2011, sales of smartphone-like mobile devices (such as the iPhone and iPad) have exceeded those of traditional desktop and notebook computers. With the popularity of these devices, it is now essential that your law firm website looks attractive and functions well on smartphones. This is accomplished by “responsive website design.”
Responsive design is a way of encoding a website so it looks great on all screen sizes, from the large screen of a desktop computer to the many sizes of today’s smartphones. The result is one website that works well and is easily viewed on every device.
Why is the look and use of your law firm’s website on smartphones and tablets important? Because your firm’s clients and potential clients are using these devices as an extension of—and even replacement for—desktop or laptop computers. Website traffic reports (analytics) are showing an ever-increasing share of overall visits from small-screen devices. No doubt you know people who are rarely far from their phones or tablets so they can be always connected by texting, tweeting, or emailing. As these devices become lighter, more capable, and more powerful, this trend toward always-present computers is only going to grow stronger. Therefore, planning for how your law firm’s website looks on small screens has to be a consideration.
One problem facing law firms trying to adapt websites to mobile devices: the nearly endless variety of screen sizes. A mobile website that was scaled to look good on the original iPhone’s 3.5" screen might look pretty bad on the iPad’s 9.56" tall (7.47" wide) screen. Plus, there are screen sizes from other mobile-device makers that are everywhere in between.
These are the challenges that responsive website design solves. A responsively designed website is a single site that adapts (using various codes within the site’s stylesheets) to the screen on which the site appears. The site knows, for example, that the site is loaded on the iPhone 5’s 1136 x 640 pixel screen and aligns the design elements (photos, graphics, and text) to be legible and attractive. When the same site appears on a desktop or laptop screen—one that could be much wider and taller—the site appears properly there as well. Photos scale down or up based on screen real-estate, but text remains legible regardless of the user’s device.
How does a firm get this technology? Depending on the encoding method that the original website developer used, making an existing website responsive may be a simple or quite complex task (especially if the site was created in the obsolete method called ‘tables’).
Nonetheless, the best way to have a responsively designed website is to plan for it in the design of the site. During the design phase of a new website, a developer skilled in this technology should show not only a desktop version of the website, but also how the site will potentially look on various mobile devices. When a law firm can see the designs before the site is built, it makes it easier to achieve excellent results on all screen sizes.
Once the mobile look is set, it is important that the website developer knows the latest coding techniques to make the website respond to the size of the screen on which it appears. During the development process, it is just as important to test the website’s appearance and function on small screens, as it would be for the desktop version.
Without a responsive-designed website, potential clients who view your site on a smartphone or tablet could end up being frustrated by impossible-to-click links, graphics that don’t download, or navigations that do not work. This could result in losing a visitor to a competitor’s site.
Jason P. Lisi, Esq., is founder and president of Legal Internet Solutions Incorporated, a Philadelphia-based website development and Internet marketing company for the legal profession. He can be reached at 215-523-8580, ext. 111, or Jason@LegaLisi.com.
To comment on this article: Login, retrieve your login, or create a guest login. When you are logged in, an "Add Comment" button will appear below.