Time once was when designing a new website, whether a static HTML site or a more complex beast using a CMS like Joomla or WordPress, was relatively straightforward. Sure, as a developer you had to contend with building content that displayed correctly with multiple browsers such as Chrome, Firefox and (*shudder*) Internet Explorer, but once you had the design down you were already halfway there, as you knew that everybody who accessed your site would be using similar devices; a desktop running Linux, Windows or OSX, with a screen somewhere around the 17-24 inch range. Things are not so simple now; the rise to dominance of mobiles and tablets means that, unless your website is specifically focused at desktop users, a lot of the people who come to your site are going to be doing so on a small screen. In response to this, a number of options have arisen to give mobile users a solid site experience, with the two most popular being to build a website using responsive web design, or to create a mobile template for your site that is specific to a group of devices.
Getting to know Responsive Web Design
What is a “responsive” website? Despite the name we’re not making sure a site has a pulse! Instead, the concept of responsive web design is a layout that adjusts, or responds, to the size of the viewport (browser window). Essentially, it allows for mobile and tablet users, who generally have smaller screens than desktops, to get almost exactly the same content as the standard full-size site. I say ‘almost’, as screen-size is not the only limitation with mobile devices; they’re often dealing with less raw power than desktops and they may be connected to the internet via slower connections than home broadband such as 3G, requiring that page content be streamlined wherever possible. The core component of creating a responsive layout is using a single HTML5 document as the base that is provided to any device that connects, but applying different CSS stylesheets that are custom-built for each screen size (since the screen size is a good indicator of the type of device being used).
CSS3 Media Queries: The key to responsive layouts
The main tool for creating separate rules for varied screen sizes is referred to as a media query, and was introduced as a W3C-recommended module of CSS3 in June of 2012. It existed before then of course; the concept were in fact included in some fashion in the original CSS proposals in 1994, with the first working instance appearing in 2001. However, it wasn’t until 2012 that popular browsers began adding built-in support for this module and it began to be more widely adopted. It consists of a media type and at least one expression that limits a stylesheet’s scope using media features; in simple terms, it is a CSS rule that decides which other CSS rules to apply to a webpage based on an attribute of the device accessing the page, such as its width, height, or color. A simple example of a media query might look like this:
@media screen and (max-width: 768px) { ….. your css code ….. }
In this rule, the size of the screen is checked, and if it is discovered to be 768 pixels in width or lower, then the additional CSS rules included after this rule will be applied to the HTML5 document. By using the max-width and its counterpart min-width rule, we can create separate CSS code for each screen size; the above code defines the CSS style for a small screen, so by adding an additional min-width rule we can define styles for large and small screens:
@media screen and (max-width: 768px) { ….. your css code ….. }
@media screen and (min-width: 769px) { ….. your css code ….. }
In this example, the screen size of the device being used to access the website is checked; if the screen is 768px or lower then the first set of CSS rules will be applied, whereas if its width is higher than 768px (with no upper limit), then the second set of CSS rules will be applied instead. This is extremely simplified from the kind of code you’ll see in real world templates, but the core will still be the same; defining a width range in pixels, and serving different CSS code depending on the result.
To give you an idea of just how many different media queries a modern website may need, the below diagram highlights the common breakpoints (that is, optimal points for media queries to separate which CSS stylesheet is selected) for common devices.
Integrating Separate Stylesheets
The earlier code examples we looked at separating the CSS rules within a single CSS stylesheet; however, in a normal website most developers will want a more comprehensive set of rules for each screen size or device as mobile users with a slower device or on a low-bandwidth internet service might experience longer load times which can be mitigated by serving them, for example, lower-resolution images. In such cases it’s more convenient to separate each media query/screen size into its own CSS stylesheet. To do this, we can use this kind of code:
<!-- For progressively larger displays --> <link rel="stylesheet" media="only screen and (min-width: 480px)" href="/css/480.css"> <link rel="stylesheet" media="only screen and (min-width: 768px)" href="/css/768.css"> <link rel="stylesheet" media="only screen and (min-width: 1240px)" href="/css/1260.css"> <link rel="stylesheet" media="only screen and (min-width: 1382px)" href="/css/1382.css"> <link rel="stylesheet" media="only screen and (min-width: 1560px)" href="/css/1600.css"> <!-- For Retina displays -->
Though responsive web design provides a robust solution for managing layouts across multiple devices, it’s not necessarily the solution to all mobile web design challenges. Some websites may utilize memory-intensive elements that do not translate well into the mobile layout. For these cases it may be preferable to build an entirely separate mobile template/site with a unique URL such as m.company.com or company.com/mobile, that gets served up when the site receives a request from a mobile device. This may come in particularly handy when your site is running a large number of Joomla modules; though you can use CSS to hide them, they will still be loaded anyway, causing delays in the overall load and rendering time.
Before deciding which solution to employ on your site, consider what your customers really want; a website displaying your photography portfolio will still need to display a range of multimedia content to be effective, but for text-heavy websites where users are more interested in the content than the frame a barebones mobile version of the site might be a better solution; you’ll see this employed in places like Wikipedia, where most visitors are more interested in the text content than the frame.