The majority of good and well-designed and programmed websites have a system at their core – rarely does it stand alone as a one-off piece. Everything is connected – multiple pages work and interact with each other to present one coherent site. Even a touted single-page website is a collection of links and anchors that hold it together. A parallax website, quite the trend these days, still has a backbone – well, a sitemap – that outlines its contents. In short, when you visit a website, you are informed where to go and what to do.
For example, a company website has the arbitrary “About Us” and “Services” page, because the business wants you to get to know them. A movie website may have a page for the cast and a page for the synopsis, because it is a repository of information about what you just watched, or are interested to watch. A game website directs you to a section about rules and perhaps a forum for fellow players to chat. And so on.
As we move towards the future of web design, we can expect that the way websites behave also follow a system, which is largely influenced by the instruments with which we use to look at them with. Thus the creation of better web browsers led to the birth of HTML5. The invention of bigger and better monitors inspired web designs to be in higher resolution. Now, as our behavior changes and we look at websites in various devices – computers, laptops, phones, tablets, even smart watches – the way we design for the web is changing, too.
Building modern websites these days would mean that you must already have responsive web design (RWD) integrated into your workflow from the very beginning. This allows a website to look good regardless of the device, thereby eliminating the thin line dividing a design created for the desktop and another created for mobile. Whereas before, designers would have to make several layout versions so that it will be displayed properly in all screen size and resolution, these days RWD makes it possible to see the same design elements without losing format and styling. By using the same set of code – a system based on grids – RWD can accommodate all environments.
Scalability, meanwhile, is another story, but none less significant. Building a scalable web design (SWD) means that you are creating something that is compatible across all browsers. Too, it involves making sure that the web server used to deliver the website is reliable and can handle web traffic coming simultaneously from various devices. Hence, whether you are using Google Chrome or Safari, on Android or iOS, on a desktop or on mobile, the design must look great. It doesn’t necessarily adjust the design, i.e. move elements to fit the screen, but it should load as it should, and work as it should, regardless of browser or device.
With RWD you are working at how the design will look upon resizing and conforming to the width of the screen. SWD deals with using scalable vector graphics (SVG) to keep the sharpness of the image consistent, as well as making sure that your design gets reflected with modular coding.
Being a designer today – being a designer of the future – means that one must think beyond the rules of old and match the innovation of the instruments delivering our message, without compromising our communication line with the audience.