Digital terms decoded: What is a mobile responsive website?

Web development has come a long way since the dawn of the iPhone.

Visiting websites on a mobile was once an absolute chore; on most of the sites you'd visit, the aspect ratio, which is the comparison of width to height on a display, would be all wrong. This meant that icons might show up on the opposite side of the screen, and title text could fill up half the page.

Since then, we've seen a renaissance in web design, and now designing for mobile is the standard. Just ask anyone who works on WordPress web design in Melbourne and they'll tell you, any site they build needs to be "mobile first".

Thanks to responsive web design, this is easier and more effective than ever. Two languages of note when creating mobile responsive sites are Cascading Style Sheets and JavaScript.

Unfortunately, there isn't just some button you can push to make a website mobile responsive. It takes real skill and work from a developer and a good designer to ensure that a website not only responds to different screen sizes but looks good while doing it.

Good Cascading Style Sheets (CSS), which is the language for describing the presentation of web pages, is key to this. CSS is lightweight front-end code that executes on the client device (the mobile or computer that's being used to actually view the website).

While CSS is a type of code, and it shares some superficial characteristics with programming languages, it is not itself technically a programming language due to its lack of explicit logic and control structures (functions, data structures, loops, and other conditional statements).

It is rather a style sheet language, exclusively controlling the relative visual characteristics of a program's outputs, rather than the content of the website or the way the programs that create the website actually executes.

CSS is downloaded from the server by the client device, and then runs locally to help the browser apply the style and layout elements of the site.

By executing client-side (as opposed to running on the remote server that is running and "serving" content to the client device), CSS scripts are able to detect the aspect ratio, resolution, and other characteristics of the device, and use that information to help different parts of the site adjust to the correct size to make the site more readable and user friendly.

A fluid grid layout, flexible media, and adjustable text take those measurements and scale the site's content appropriately, ensuring that empty space and content adjust to either display appropriately on mobile, or fill out the page comfortably on desktop.

A fluid grid layout is a technique that allocates space on the screen to different elements of the website according to percentages instead of pixels. This allows the size of different elements to adjust depending on the size of the screen.

Flexible media, created using CSS media queries, allows different media to be assigned different properties depending on the type of device or screen size. They can also be used to display or hide certain types of media depending on the size of screen or type of device rendering the site.

Another crucial aspect of user experience on mobile devices is how well a site is optimised for use with a touch screen. Responsive websites need to be touchscreen friendly to ensure that the website is not only legible, but also accessible on smartphones.

Different aspects of CSS are used to ensure that the various elements of the website are arranged to ensure navigability. For example, a developer needs to ensure that buttons or pop-ups aren't going to take up the whole screen, making scrolling difficult or impossible.

One common example is menus; while websites may want to display whole menus on desktops, showcasing each individual page on the site with its own individual link that is readily accessible at the top or side of the site, most mobile devices simply won't have enough space to display more than one or two buttons.

Even if they do, it simply wouldn't be practical for a touchscreen device - menu items would likely be too small to click comfortably.

Now onto Javascript, the front-end programming language most commonly associated with web development, and, in particular, responsive design.

If CSS is the polite, tactful host who is always well dressed, and interacts with partygoers (users) in a tactful, adaptable manner, but doesn't really have anything interesting to say of their own.

JavaScript is the friend they invite to every party who may or may not come dressed properly for the event, but can duck out back to change once they know what's kind of party they're at - once she's got her socks on, Javascript is the life of the party.

JavaScript is the most widely known and used programming language, especially in the realm of web development. With a total of 83 different development frameworks, it is a user-friendly language that allows developers even more finely tuned control over how web elements are displayed.

Front end JavaScript can run both on the client device or on the server itself, in order to take advantage of the superior processing resources of a server to load large high-resolution images, animations, and complex interactive components.

JavaScript can do all kinds of party tricks; it makes use of complex, multi-step logic to execute algorithms and conditional statements. This allows JavaScript code to encode and help render the actual visual elements of the website, as opposed to simply dictating how and where they appear.

Since JavaScript is used to create the various elements that CSS manipulates to make a website more responsive, it must be used to account and provide for the different conditions that CSS detects and prepares these assets for.

For example, while CSS might decide whether to display a full menu across the top of a website header or stack them in a hamburger menu, JavaScript is used to build and render the menu links and the static elements of their appearance. It's also used to process the event handling including server calls, as when users click on a link, watch animations or videos, and engage with interactive elements.

Virtually any device that can connect to the internet will support and be able to run JavaScript code, which is not necessarily the case for CSS. This means that if an older device attempts to connect to a website, in the absence of CSS code, JavaScript can be used to create some responsive elements to ensure usability of the site.

It can also use conditional logic to selectively load elements like animations or interactive components depending on whether or not the device can support them. It also enables lazy loading, a process that holds offloading certain elements until they are needed, helping improve performance on older devices, rather than allowing them to struggle to load everything at once.

CSS and JavaScript work hand in hand - without either one, the party might get a bit awkward, or even boring. When they work together, they can create beautiful, responsive websites with rich content and consistent, readable, user-friendly designs.

While programming can feel like an impossible task, it doesn't have to be. Having the right tools and the right team helping you can make all the difference in creating a well-functioning, visually appealing site that visitors will love.