Go ahead. Open earthli.com on a small-screen device. Get out your phone. I'll wait. Pretty cool, right? I mean, it's not rocket science, but it involves no small amount of work to come up with a design that works at both very wide and very narrow screens. Sure, I could have used Bootstrap, but then <a href="http://adventurega.me/bootstrap/">my site would look exactly like everyone else's.</a> Also, earthli's stylesheets and components are <i>much</i> simpler and easy to use than Bootstrap. Not only that, but with the redesign and the continued focus on simplicity in page design, semantic structure, etc., it turns out that earthli also does quite well for accessibility. <h>Home page</h> The <a href="{root}">home page</a> demonstrates the new responsive grids and columns. <img attachment="earthli_regular.png" align="left" caption="Home page at standard width"><img attachment="earthli_skinny.png" align="left" caption="Home page - small-screen"><img attachment="earthli_wide.png" align="left" caption="Home page - wide-screen"> <clear>For this page, I've included samples taken from the Opera device emulator to show that the responsiveness actually works for mobile devices now---no more scaling and zooming on your phone. <img attachment="earthli_ipad.png" align="left" caption="Home page on the iPad"><img attachment="earthli_iphone5.png" align="left" caption="Home page on the iPhone 5"><img attachment="earthli_iphone6.png" align="left" caption="Home page on the iPhone 6"> <clear><h>News Index</h> The <a href="{app}">News home page</a> demonstrates how I converted the top-level navigation area to use responsive columns and how the articles are now shown truncated to a limited length and in grids, instead of full-length and in a single 900-pixel--wide column. At a standard resolution, the tile still stretches across the whole page, but beyond that size, it switches to multiple columns, to improve readability and use space more efficiently. <img attachment="news_regular.png" align="left" caption="News index - standard size"><img attachment="news_skinny.png" align="left" caption="News index - small-screen"><img attachment="news_wide.png" align="left" caption="News index - wide-screen"> <clear><h>Webcore Index</h> The <a href="{root}/software/webcore">WebCore index</a> is a custom section of earthli, with a column to each side, and a responsive grid in the middle section. With just a handful of simple directives, the browser makes the best use of the available space. <img attachment="webcore_regular.png" align="left" caption="Webcore index - standard size"><img attachment="webcore_skinny.png" align="left" caption="Webcore index - small-screen"><img attachment="webcore_wide.png" align="left" caption="Webcore index - wide-screen"> <clear><h>Theme Settings</h> The <a href="{root}/shared/settings.php">theme settings page</a> also combines a lot of different elements: a responsive grid of content-sized tiles for the theme thumbnails, a form with top-aligned labels and responsive width, another form---the test form below the fold, not shown in the screenshots---which shows how the left-hand labels are moved to the top at smaller screen widths. This page also uses a smaller column on the left with a content area on the right. These columns share the space in a given ratio at wider resolutions, but are stacked at smaller screen widths. <img attachment="settings_regular.png" align="left" caption="Theme settings - standard size"><img attachment="settings_slim.png" align="left" caption="Theme settings - small-screen"><img attachment="settings_single_column.png" align="left" caption="Theme settings - single column"><img attachment="settings_wide.png" align="left" caption="Theme settings - wide-screen"> <clear><h>Read Article</h> When you <a href="{app}view_article.php?id=3240">read an article</a>, it now makes much better use of the space. In a standard size, the page looks about the same it did without responsive design (where the page width was fixed at 900 pixels). However, at smaller widths, the page collapses as expected. The neat trick on this page is that at larger widths, the layout starts splitting content into columns so that you never have to read really long lines. The drawback to this approach is that, for longer articles, you have to manually scroll back up to the top of the next column. However, I think that's more acceptable than displaying text in 2000-pixel--wide paragraphs. <img attachment="article_regular.png" align="left" caption="Article page - standard size"><img attachment="article_skinny.png" align="left" caption="Article page - small-screen"><img attachment="article_two_column.png" align="left" caption="Article page - two columns"><img attachment="article_wide.png" align="left" caption="Article page - wide-screen"> <clear><h>Edit Article Form</h> As mentioned above, the forms are also responsive: at smaller viewport widths, the labels move from left-aligned to top-aligned automatically. Any form can now be used on a small mobile device, limited only by the limitations of the device rather than any forced layout in the form itself. In this way, the form makes the best use of horizontal space, keeping the form as vertically short as possible if there is screen space. If there is not, the form uses more vertical space, but avoids horizontal scrolling. I think this is a good trade-off. Additionally, If you work on larger texts, there is a new full-screen editing mode, that maximizes the preview area and editing areas to share the screen equally. <img attachment="form_standard.png" align="left" caption="Edit Article - standard size"><img attachment="form_skinny.png" align="left" caption="Edit Article - small-screen"><img attachment="form_full_screen_edit.png" align="left" caption="Edit Article - full-screen"> <clear><h>Albums Index</h> And, finally, I've included a screenshot of the <a href="{root}/albums">Albums home page</a>, to show off how it also makes maximal use of the screen width, creating new columns as space allows rather than being hard-coded to three columns, as it used to be. <img attachment="albums_wide.png" align="none" caption="Albums wide-screen"> <clear><h>Conclusion</h> I'm pretty happy to have gotten to this point with earthli, which turns ... 17 years old this year. Even after all that time, I've managed to keep it looking relatively modern and based on modern technologies. <ul> Everything is now HTTPS. LESS-based single stylesheet with a consistent UX and VSG for the entire site Simple, responsive design for all pages Very good scores on mobile-friendliness from Google Very good scores on accessibility from other sources </ul>