Responsive web page layout by display size
Between Small and Large
A desktop browser accessing the website displays both the navigation bar and the block with the text on top of each other, as shown in Figure 6. However, if the user scales the browser window down to a width of less than 640 pixels, the browser switches to mobile mode because of the adaptive CSS layout, drops the navigation element and only displays the text block (Figure 7).
![](/var/linux_magazin/storage/images/issues/2014/166/perl-responsive-web-design/figure-7/621900-1-eng-US/Figure-7_large.png)
The 640 pixel-wide screen of, for example, an iPhone 5 also shows the mobile version without navigation aids because of the media query (Figure 8).
The second media query in Listing 2, line 25, queries yet another display attribute. Using (orientation:landscape)
, it determines whether the display is in landscape mode.
If this is the case, the code from the sidebyside.css.tt
file in Listing 4 is used; this shows the navigation and text elements next to one another, assigning 70 percent of space to the content and only 30 percent to navigation.
Listing 4
sidebyside.css.tt
The value for the display
variable of the navigation element is set to block
in Listing 5. This overwrites the value of none
, which possibly occurred in the previous media query, and restores the block
value initially defined in the static CSS statement block.
The browser works its way through a list of media queries from the top down and overwrites the assigned values if the specified conditions are met. As a result, both blocks appear side by side, as shown in Figure 9.
Although the first media query only allows the text block without the navigation block, the landscape query overwrites all previous settings and lines up the blocks side by side at a 70:30 ratio.
Modular System
The tpage script, courtesy of the CPAN module Template::Toolkit, builds the page from the template items,
tpage --include_path templates templates/\ test.html.tt >test.html
thus allowing a developer-friendly modular layout with full performance on the client and server sides; no assembly of page parts at run time is required because it already happens at page creation time.
Alternatively, you could instruct the browser to load only certain external CSS pages when a given media query returns a true value. However, each loading action costs precious time – the precompiled website is more efficient at run time.
If you want to test this quickly with a web server running locally, you can do it with a short script that uses the CPAN Mojolicious::Lite module, as shown in Listing 5. The script launches a fully functional web server on port 4080 of your localhost. Browsers accessing this will display the page differently depending on whether the browser window is wide, narrow, or in landscape format. To communicate with the Template Toolkit, the script requires the Mojolicious::Plugin::TtRenderer CPAN module.
Listing 5
mojo
If you want to delve deeper into this subject, I recommend the book Responsive Web Design with HTML 5 and CSS 3 [6]. It presents a number of practical application examples and explains techniques for dynamic page layout and adjusting image sizes for various mobile and desktop devices.
Mike Schilli
Mike Schilli works as a software engineer with Yahoo! in Sunnyvale, California. He can be contacted at mailto:mschilli@perlmeister.com. Mike's homepage can be found at http://perlmeister.com.
Infos
- GitHub repository with the contents of USArundbrief.com: https://github.com/mschilli/usarundbrief
- Apple Thunderbolt display: http://www.apple.com/thunderbolt/
- "Responsive Web Design" by Ethan Marcotte, 2010: http://alistapart.com/article/responsive-web-design/
- Listings for this article: ftp://ftp.linux-magazin.com/pub/listings/magazine/166
- Device pixel density tests: http://bjango.com/articles/min-device-pixel-ratio/
- Frain, Ben. Responsive Web Design with HTML 5 and CSS 3. Packt Publishing, 2012
« Previous 1 2
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
![Learn More](https://www.linux-magazine.com/var/linux_magazin/storage/images/media/linux-magazine-eng-us/images/misc/learn-more/834592-1-eng-US/Learn-More_medium.png)
News
-
NVIDIA Released Driver for Upcoming NVIDIA 560 GPU for Linux
Not only has NVIDIA released the driver for its upcoming CPU series, it's the first release that defaults to using open-source GPU kernel modules.
-
OpenMandriva Lx 24.07 Released
If you’re into rolling release Linux distributions, OpenMandriva ROME has a new snapshot with a new kernel.
-
Kernel 6.10 Available for General Usage
Linus Torvalds has released the 6.10 kernel and it includes significant performance increases for Intel Core hybrid systems and more.
-
TUXEDO Computers Releases InfinityBook Pro 14 Gen9 Laptop
Sporting either AMD or Intel CPUs, the TUXEDO InfinityBook Pro 14 is an extremely compact, lightweight, sturdy powerhouse.
-
Google Extends Support for Linux Kernels Used for Android
Because the LTS Linux kernel releases are so important to Android, Google has decided to extend the support period beyond that offered by the kernel development team.
-
Linux Mint 22 Stable Delayed
If you're anxious about getting your hands on the stable release of Linux Mint 22, it looks as if you're going to have to wait a bit longer.
-
Nitrux 3.5.1 Available for Install
The latest version of the immutable, systemd-free distribution includes an updated kernel and NVIDIA driver.
-
Debian 12.6 Released with Plenty of Bug Fixes and Updates
The sixth update to Debian "Bookworm" is all about security mitigations and making adjustments for some "serious problems."
-
Canonical Offers 12-Year LTS for Open Source Docker Images
Canonical is expanding its LTS offering to reach beyond the DEB packages with a new distro-less Docker image.
-
Plasma Desktop 6.1 Released with Several Enhancements
If you're a fan of Plasma Desktop, you should be excited about this new point release.