The quarterly publication of the International Legal Technology Association
Issue link: https://epubs.iltanet.org/i/230349
BREAKPOINTS AND DESIGN POINTS Rich Schmick, Andy Young and Bill Krejci of the digital marketing agency VML explain that because the concept of responsive design is fairly new, there is no universal set of breakpoints or best practices. At its core, responsive design involves the creation of fluid design that scales within a set media query range. These ranges will equate to different device classes, such as smartphone, tablet, laptop or desktop. Once a breakpoint threshold is crossed, a different set of CSS code will be activated that will build the Web page using the appropriate fluid layout, navigation design, images and text formatting targeted for a device. The most successful responsive websites are those that incorporate support for devices as small as 120px across (the first generation of smartphones) to as large as over 2,400px across (retina display Mac monitors), but also have been designed with strong consideration for what devices their users are most likely to use when visiting the site. These breakpoints mean content is displayed in an optimal layout for each device, improving overall user experience on a website. THE PARALLAX AND YOU A parallax has to do with changing visual perception, based on your position and motion. In essence, things look different depending on where you are. For example, backseat drivers often tell you to slow down, because to them the speedometer looks like you're doing 70 mph, when you are only cruising along at 65. According to the Web design experts at ATAK Interactive (atakinteractive.com/blog), in a responsive site, parallax effects are "scrolling features that allow multiple sections of diverse content to reside on a single Web page, as opposed to a site containing links to many separate pages. As you scroll down a page, multiple background and foreground layers appear, signaling new content areas. On some complex sites, each layer is seen to move at its own speed or 'float' over a repeating background, which gives depth to everyday browsing. These effects are powered by various combinations of HTML5, CSS3, JavaScript, jQuery and other programming languages." Designers who take advantage of parallax in their Web design reap the benefit of a contemporary look and feel on all devices. Parallax scrolling is less successful for smaller devices, like phones, but the page load tends to be too great for anything except laptops/ desktops to support. Single-page, parallax websites are ideal for showcasing rich media in vibrant and exciting ways. They are largely developed for tablet-sized and larger resolution devices, but can be adapted easily for mobile views by limiting the amount of movement that occurs during page scroll. The dynamic adjustment of elements is especially rewarding for users who browse the Web on tablets, providing the same experience of using a native app (an app developed for a particular platform or device) without the necessity of downloading and storing content directly onto their device. CONTENT IS STILL KING With all these changes, there are some basic website truths that have stayed the same. Content is what builds your brand, draws site traffic and enhances your reputation. A responsive design can help ensure visitors view your content in a consistent way across devices, while saving your firm time and money. THREE THINGS TO REMEMBER Mobile First When designing and developing a responsivevwebsite, building from the smallest device to the largest will help decrease bloated code and make sure the design is simple, intuitive and focused on user experience. Optimize Loading Time If you can remove JavaScript or lengthy CSS without degrading the experience, eliminate it for the benefit of the page load. Strongly consider whether adding a dynamic function is worth the risk of losing a client because of its effect on your page's overall load time. Determine a Responsive Images Strategy Images can impact load time on a website significantly, and it is needless to use a larger image when a smaller one will suffice. Consider creating images at optimal resolutions to support both retina and standard displays, as well as images optimized for both the smallest and largest screens. Keep steps one and two in mind when developing a solution for handling images. Peer to Peer 75