Responsive design IS the web today. For nonprofits, using responsive design for your website is essential because you want to draw people in and engage with them, not make it so difficult to view your site that they never return. But there are several other important factors regarding why you should care about responsive design:
- You can raise more money. In 2015 nearly 14 percent of all online donations were made via a mobile device, according to the Blackbaud Charitable Giving Report.
- Because Google says so. A site with an effective mobile experience will show up on search results above one without.
- Content that lives on one website and one URL is easier for users to interact with and share.
How you build responsively is as important a consideration as whether you should build responsively. Load times and page size can affect your rank in search results. Your website screen resolution can make images appear fuzzy on mobile devices, and different crops of images look better at different screen sizes. Taking a fresh approach to responsive images and graphics can help solves those issues.
Responsive Images
The old way of coding responsive images was to make them fit 100 percent of the screen. The image then scaled down according to screen size. There are a few “pros” to coding images this way: It’s simple to apply to all existing images. One image can be used for all screen sizes. And, it’s better than nothing. However, large images will download even if they are hidden on smaller screens, devices with low bandwidth experience slower page load times, and your design team has no control over art direction for your site.
A better approach to responsive images is the use of <picture> and <source> tags to define the best image to display based on screen size, device resolution, and art direction. For the latter, that could mean cropping an image to adjust for a smaller screen size to maintain the impact and primary subject of the image.
This way, your designer has granular control over which image displays in various circumstances, and the browser only loads an image relevant to your device thus creating quicker page loads even for low-bandwidth devices. While this means some extra work for designers, the end result is worth it in happy customers and supporters.
Responsive Graphics
By a similar token, the new and improved way to render graphics is through scalable vector graphics (SVGs). The image is defined by mathematical formulas allowing the images to be scaled up and down as needed without the pixilation concerns that can affect raster graphics (e.g., JPG, PNG, or GIF images) when enlarged too much.
In addition to scalability, SVGs look sharp on high-resolution screens, which can double the size of an image, and allow for greater design control, such as interactivity and image filters. There are multiple ways to use SVGs on your website:
- As an image tag
- As part of a cascading style sheet
- And easiest of all, as an SVG tag
The latter allows the designer to define the parameters of the SVG image from dimensions to filters and styles, and designing an SVG image is easier than it sounds. Your designer creates the image as usual in Adobe Illustrator or another vector-based application, and then exports the file as SVG. The file can be imported into any code editor and you can work with your web developer to find the best fit and use for the image.
By implementing thoughtful responsive design on your website, you’ll make it that much easier for your constituents to connect with you where they are and that much easier to click that donate button.