Why we use responsive design
The Seed Planning and Registry (SPAR) application modernization team uses a responsive design approach when creating screen layouts.
Responsive design refers to building applications that can adapt and provide a consistent user experience across various devices and screen sizes. In practice, it involves a strategic mix of flexible grids and layouts, images, and Cascading Style Sheet (CSS) media queries.
Example screenshots of SPAR in desktop and mobile views
Some of the benefits of using a responsive design approach include:
Responsive design improves user experience by ensuring an application's layout and functionality are optimized for the device being used. For example, a responsive design makes sure an application’s most relevant information and features are still prominent and accessible on smaller screen sizes.
According to a study by Google, 61% of users are unlikely to return to a mobile site they had trouble accessing, indicating the importance of a positive user experience on different devices. (read more)
Developing a single responsive application reduces development and maintenance costs compared to creating separate versions for different devices. Additionally, a responsive design helps future-proof applications so they can adapt to new and emerging devices without requiring significant redevelopment.
A study by Statista predicts that the number of connected devices per person is expected to increase, emphasizing the need for applications to be adaptable to various screen sizes and resolutions with a consistent user experience. (read more)
Responsive design improves service accessibility by ensuring applications are usable by people with disabilities on a wide range of devices. For example, when using an application with a responsive design, someone with low vision can increase the size of the elements on their screen without breaking the application’s design or functionality.
The Worldwide Web Consortium recommends screens be designed so they can be magnified up to 400% without losing key functionality, with vertical scrolling content at a width equivalent to 320 CSS pixels, and horizontal scrolling content at a height equivalent to 256 CSS pixels. This is so users don’t have to scroll both vertically and horizontally, which makes it difficult to find and navigate content. (read more)
In June 2021, the Accessible British Columbia Act became law. This legislation was passed to help remove systemic barriers people with disabilities face when accessing government services. For context, 20.5% of British Columbians between the ages of 15 and 64 live with a disability, while another 41.7% of British Columbians over the age of 65 live with a disability. Additionally, 70% of people with disabilities report having more than one disability. (read more)
Building responsive design into our applications helps us maintain our legal obligation to make our services accessible to the people who need them.
Responsive design improves search engine optimization (SEO), or online discoverability, for applications and web content. Google recommends responsive web design as an industry best practice, and their search algorithm favours mobile-friendly sites in search results. (read more)
A responsive design can lead to higher engagement rates as users are more likely to engage with a website or application that provides a seamless experience on their preferred device(s).
A study by Akamai found that 53% of mobile users abandon a site if it takes more than 3 seconds to load, highlighting the impact of performance on user engagement and access to services. (read more)
These are some of the benefits of using responsive design, and why Forestry Digital Services (FDS) development teams incorporate responsive design into our application and service delivery.
- Small: 320 px
- Medium: 672 px
- Large: 1056 px
- Extra-large: 1312 px
- Maximum: 1584 px
- Maximum Plus: 1784 px
Responsive Design: Best Practices – Interactive Design Foundation
Responsive Web Design (RWD) and User Experience – Nielsen Norman Foundation
A Guide to Responsive Design – 8 Easy Steps – UXPin
For developers, step-by-step instructions are available here:
Responsive Web Design – Introduction – W3Schools