The Challenge
Due to the rapid growth in popularity of social media, media streaming services (whether video or audio) and email services, smart phones have become almost indispensable in the modern world. At the time of writing, in October 2019, 48.91% of global website traffic is generated by mobile devices (excluding tablets); having hovered around the 50% mark since the beginning of 2017.
Granted, most websites do not provide any of these services specifically. However, due to the widespread popularity of these virtual giants, certain expectations have been set regarding visual presentation and ease of usability. It is imperative that all new websites, whatever their purpose, be designed and developed in a way that is appealing and makes sense to all users, no matter what device they may be using.
Clearly, this presents a significant challenge when the inevitable constraints on time and budget come into play. Is it possible to efficiently create websites from scratch that dynamically adjust themselves for any device size or screen density, presenting the same high level of quality across all devices? YES.
It all starts with design
Current design practices require LOTS of white space. This presents challenges when it comes to creating beautiful, efficient designs. After all, the design needs to integrate as easily as possible with the coding process in order to avoid burning through the project budget and timeline. For this reason, most if not all modern website development companies base their designs around front-end frameworks (Bootstrap, Foundation, Materialize, etc.). While these contain many neat development features, the main upside to using a front-end framework is the responsive grid system. Pre-assigned breakpoints provide the ability for a developer to easily reorganise content as the screen size becomes smaller.
This method is grid-based, so in terms of design, flush alignment is preserved throughout the site. Content is organised in the following layout: Container à Row à Column (Fractional width of Row). The Container element has a maximum width set, in effect creating an invisible box for the content to sit in. As mentioned above, the column widths are fractions of their parent rows. This creates a straightforward website foundation for the designer to easily adhere to. Despite what some may think, this does not pose any constraints to design potential or creativity. For example, padding and margins are easily altered without breaking the layout, so when certain elements require more or less horizontal or vertical space, such adjustments are easily made.
Please note that a front-end framework does not limit the designer to one certain look or feel for the site. It simply provides a stripped-back foundation for the developer to build on. In some ways, this makes it easier for the designer to let his/her imagination run wild, as the developer will have more time to focus on such custom elements instead of studying the design in perfect detail and creating his/her own website framework from scratch.
Enjoy what you read? Please stay tuned for the next article in this series, ‘Developing Dynamic, Fully-Responsive Websites’.