Responsive web design (RWD) has been in vogue for a few years and almost every web design project we work on now includes the expectation of being optimized for all devices. However, with hundreds of devices and thousands of screen sizes to optimize our designs for, there are numerous RWD issues that designers and frontend developers now need to account for.
When designing a responsive layout it is important to consider each and every page’s weight because browser enabled devices will access web servers through different communication conduits. Tablets and mobile devices can oftentimes communicate with web servers through either mobile networks or broadband internet connections and, if your design is not optimized, these two conduits will yield differing user experiences. Responsive design is focused on delivering a similar user experience regardless of device and this consistency must extended beyond the design and into usability.
A major strain on bandwidth, especially while browsing the internet on mobile networks, are images. Did you know that, on average, more than 50% of a responsive page’s load time on a mobile network is because of image files? A common performance problem with images within a responsive design is that full size files are downloaded to an enduser’s device regardless of their screen size. This means that images being displayed on a mobile device, despite only being 320 pixels in width, are actually scaled down prints of heavy image files. Proper responsive design serves mobile device optimized images (image size and file weight) rather than serving desktop sized images and scaling them down afterward.
Due to the flexible and open nature of responsive designs every website element, at every breakpoint, interacts with the elements around it differently. The pliability of responsive design, while accommodating for endusers, is what makes bug remediation and change management requests tougher to complete. Every edit applied to a responsive design must be carried out and tested through mobile, tablet, and desktop styles which multiplies the amount of development time needed. Further that thought by considering the wide range of operating system and browser combinations that now need to be accounted for and it’s easy to understand why responsive designs require extended remediation periods.
RWD was born out of a desire to deliver pleasing user experiences to anyone, anywhere, and its importance will continue to increase as more devices, screen sizes, and screen resolutions enter the marketplace. Long gone are the days of solitary stylesheet edits being sufficient and, in the interest of bettering all of our user’s experiences, designers will need to work through some common RWD issues.
Return to the Unleashed Technologies Home Page