Here’s some more mobile web design. In the past I’ve done mobile web design using media queries which was… interesting, and then later I used Bootstrap which was a framework I rather liked. For this task I used Furtive which is a lightweight but ultra-modern and cutting-edge mobile-first, CSS-based (got enough hyphens in there?) framework. The Furtive framework is just 800 lines of CSS and that mainly relies on classes defined in CSS to style HTML elements such as buttons, text and divs. This is basically how Bootstrap works too, but whereas Bootstrap uses a mix of JavaScript, jQuery, CSS and HTML, Furtive tends to be used only with HTML and CSS. Furtive can manage to be so streamlined because it lacks support for a lot of older browsers which other frameworks still have support for. The reality is that many older browsers like Internet Explorer are no longer used by many people, so bother to support them? By not worrying about compatibility with older browsers, it’s possible to integrate more modern and up-and-coming features into the framework. Examples include using ‘flex’ for media objects which is a new object that has only recently come out.
Is disregarding older browsers a furtive move? No – so let’s step into the present and code with Furtive!
So the first step is to download and install Furtive is easy enough – simply visit their website and download the source files from GitHub. Everything you need is already there and installing Furtive is as simple as uploading the files to your web server.
My website
Furtive is designed with mobile devices in mind which got me thinking: now that more photos are taken on smartphones than any digital point and shoot or D-SLR camera and people are becoming interested in printing photos to put into an album again, why is there no good photo printing service which has mobile devices at the heart of its design? Services like VistaPrint, Boots and Photobox all offer printing services, but none of them have mobile friendly websites and even on desktops they are cumbersome to use and are mainly Flash-based, for example the Boots website appears to only work correctly on Internet Explorer which we have already established is an outdated browser given that the last version of it, Internet Explorer 11, was released when Windows 8.1 was released in October 2013 and it has since been replaced by Microsoft Edge with the introduction of Windows 10 in July 2015. It seems odd to me that none of these services offer a good mobile experience for buying prints directly from your smartphone (which is likely where the photos you want to print are stored anyway!) and instead you still need to transfer the photos onto a PC or a laptop and then use a poorly-designed, cumbersome service to buy prints. Or, actually take your phone or camera into a shop and get them to print them directly.
For all of those reasons listed above, I decided to design a mobile website that allows you to buy prints of photos stored on your device and use the Furtive CSS framework to create it.
See my completed website here!
The head
The head is pretty much the same as any other HTML website you’ll ever code. The good thing about Furtive when compared to other frameworks like Bootstrap, the CSS is all stored locally and it’s in a readable format, so you can easily modify it without having to download the CSS from a pre-defined source and then reformat it into a format that you can actually read.
Here is the head area of a Furtive HTML document.
<html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="utf-8"> <title>Aperture Priority</title> <meta name="author" content="Jason Brown"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Photo printing just for you."> <link rel="stylesheet" href="css/furtive.css"> </head>
Styling divs
Furtive makes it very easy to style divs because a lot of styling options are defined in its CSS as classes meaning that they can be applied to HTML elements. You can of course look at the CSS and modify these classes if you wish to include your own styling options, but many of the style classes the team at Furtive have created are useful and do what pretty much any developer could want to do on a basic level.
Below is the code for the header div:
<div class="py2 bg--green"> <div class="txt--center"> <h1 class="h2 fnt--white"> Aperture Priority<br> <small class="small fnt--white">Photo printing, just for you</small> </h1> <img src="assets/logo.png" class="txt--center"/> <div class="my2"> <a href="https://github.com/johnotander/furtive.git" class="btn" title="Get started">Get Started</a> </div> </div> </div>
So, ‘py2’ and ‘bg–green’ are classes that are defined in the CSS of Furtive, as are ‘fnt–white’ and ‘my2’ that can be applied to HTML elements, have a look at the CSS code below for py2.
.py2 {
padding-top: 2rem;
padding-bottom: 2rem; }
py2 is a class which has a padding at the top of 2 rem and also a padding at the bottom of 2 rem. Applying this class to your div will place it 2 rem below the element above it and place the element below it 2 rem beneath it.
There are other similar classes defined in the CSS which determine the alignment and spacing of divs. See the CSS code below for all of the different classes Furtive includes.
.m0 {
margin: 0; }
.mx0 {
margin-left: 0;
margin-right: 0; }
.my0 {
margin-top: 0;
margin-bottom: 0; }
.m1 {
margin: 1rem; }
.mx1 {
margin-left: 1rem;
margin-right: 1rem; }
.my1 {
margin-top: 1rem;
margin-bottom: 1rem; }
.m2 {
margin: 2rem; }
.mx2 {
margin-left: 2rem;
margin-right: 2rem; }
.my2 {
margin-top: 2rem;
margin-bottom: 2rem; }
.p0 {
padding: 0; }
.px0 {
padding-left: 0;
padding-right: 0; }
.py0 {
padding-top: 0;
padding-bottom: 0; }
.p1 {
padding: 1rem; }
.px1 {
padding-left: 1rem;
padding-right: 1rem; }
.py1 {
padding-top: 1rem;
padding-bottom: 1rem; }
.p2 {
padding: 2rem; }
.px2 {
padding-left: 2rem;
padding-right: 2rem; }
.py2 {
padding-top: 2rem;
padding-bottom: 2rem; }
Have a look at the CSS for fnt–white.
.fnt--white {
color: #fff; }
It simply sets the colour to #FFF which is white. There are other classes too such as ‘fnt–red’, ‘fnt–green’ and so on which use exactly the same code but with a different colour.
The ‘bg–green’ class shown in the HTML above is coded in CSS and uses a very similar style of code to the ‘fnt’ classes.
.bg--green {
background-color: #25ba84; }
And that’s basically it!
Yes, that really is it! Furtive is so small and lightweight there isn’t really a whole lot more to talk about it other than some elements and the technical parts of the CSS behind the responsiveness of the framework.
Buttons in Furtive
Furtive includes several button classes for regular-sized and smaller buttons. The HTML code for a button in Furtive may look like:
<input type=”submit” value=”Create Account” class=”btn–blue”>
If you apply one of Furtive’s included ‘btn’ classes to the HTML, you can create a button easily. The ‘btn–blue’ class looks like this in CSS.
.btn--blue {
border-color: #2791d9;
background-color: #3498db;
color: #fff; }
.btn--blue:hover, .btn--blue:focus, .btn--blue:active {
color: #fff;
background-color: #217dbb; }
All of this can be edited, all classes can be edited just by modifying the CSS.
Lists in Furtive
Like in ordinary HTML, Furtive supports lists – ordered, unordered and unstyled. An ordered list puts a numeric value next to each item in the list – typically starting at 1, this is obviously the style you need to use if you want to list items in order. An unordered list puts bullet points in front of every item in the list. Items in a bullet point list can still be in order, but unlike an ordered list the items are not numbered. An unstyled list is literally just a list of items with no bullet points or numbers on the list.
Here is the code for an unordered list in Furtive. It’s very similar to regular HTML.
<ul class="fnt--white"> <li>Photo album prints</li> <li>Wallet prints</li> <li>Large prints</li> <li>Wall posters</li> </ul>
To use an ordered list, change the <ul> and </ul> tags to <ol> and </ol> tags and to use an unstyled list use the ‘list–unstyled’ class.
Tables in Furtive
Furtive supports responsive tables. Tables are a good way to show grouped data, I used a table to show pricing options. Tables are also done in HTML, see the code below.
<table> <thead> <tr> <th>Size</th> <th>Paper</th> <th>Delivery</th> <th>Price Per Unit</th> </tr> </thead> <tbody> <tr> <td>Wallet</td> <td>Matte</td> <td>Standard</td> <td>£0.03</td> </tr> <tr> <td>Wallet</td> <td>Matte</td> <td>Standard</td> <td>£0.03</td> </tr> </tbody> </table> </div>
This code produces a table with ‘Size’, ‘Paper’. ‘Delivery’ and ‘Price Per Unit’ as the column headings which are all wrapped in the <th> tags. The text inside the <td> tags are the items to actually store in the table.
Forms in Furtive
Like Bootstrap, Furtive supports forms. Below is the HTML code for a basic form that has a field for a name, a field for an email address and a button underneath these fields to subscribe to an e-Newsletter.
<form action="#" role="form" class="my2"> <label for="name">Name</label> <input type="text" name="name" id="name" placeholder="Enter your name..."> <label for="email">Email</label> <input type="email" name"email" id="email" placeholder="user@example.com"> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="8 characters or more..."> <label for="bio">Bio</label> <textarea name="bio" id="bio" rows="3" placeholder="Tell us about yourself..."></textarea> <input type="checkbox" name="newsletter" id="newsletter"> <label for="newsletter">Subscribe to our newsletter</label> <input type="submit" value="Create Account" class="btn--blue"> </form>
Responsiveness
The page I made scales well to all three of my test devices, though with the framework being made with a ‘mobile first’ mentality this is hardly surprising. I tried the page on a 5.7″ 1440×2560 Microsoft Lumia 950 XL, a 5″ 1080×1920 Nokia Lumia 930 and a 4.5″ 720×1280 Nokia Lumia 925 and the site looked fine on all, though on the smaller 925 the site wasn’t as enjoyable to use as it was on the larger 930 and 950 XL – this is mainly because a lot more scrolling was required on the 925 to get to the bottom of the page than was required on the larger handsets.
Sites designed using the Furtive framework are much more enjoyable to use on mobile devices than desktop devices. Content tends to be centered and single-column hence why it is a suitable platform to use for mobile device.
Compatibility
Furtive lacks support for older browsers as explained at the beginning of this post, but it actually worked fine in Internet Explorer 11 and Internet Explorer Mobile 11. It probably doesn’t work on anything older than Internet Explorer 11 however with usage of Internet Explorer dropping quickly and support for more modern browsers such as Google Chrome increasing, this isn’t a big problem. You can see my testing results here (note: the version of Edge used on the Lumia 930 was Edge 38.14393.1770.0 which at the time of writing is the latest version of Edge that’s available for Windows 10 Anniversary Edition – a version of Windows 10 that’s two releases old now!)
Furtive vs Bootstrap – which is the better framework?
Each has its advantages, outlined below.
Bootstrap is better than Furtive because:
- It supports fancy elements like carousels menu bars straight out of the box thanks to its JavaScript and jQuery.
- It works well on both desktop and mobile devices whereas Furtive websites don’t look as nice on desktop screens as they do mobile ones.
- It’s ‘less messy’ out of the box – when you use Furtive for the first time you need to delete a lot of the source code in the HTML file to make it your own, or start from scratch with a new HTML file and write your own code using Furtive’s built-in CSS classes to style the page.
- Out of the box Bootstrap supports a lot more styling options such as classes for circular images and responsive images.
Furtive is better than Bootstrap because:
- It’s so small and light that it loads much faster than Bootstrap since there are fewer files to load.
- Although Bootstrap can work well on mobile devices, Furtive is truly in a class of its own when it comes to designing mobile websites. Everything fits and works perfectly and it feels so fluid and responsive.
- The CSS is all local and there is also a ‘min’ version too to speed loading times. The CSS being local means that it’s easy to customise.
A crazy idea…
There is theoretically nothing stopping you from combining the best of these two frameworks to create one that’s more suited and customised to specific needs. For example, if you wanted to use Bootstrap’s JavaScript classes to have the ability to create carousels and other exciting features in a site made mainly using the Furtive framework, there’s nothing stopping you from downloading the JavaScript library that Bootstrap uses and linking it to a Furtive website. You may also need to use some CSS from Bootstrap, but it is entirely possible to combine the two frameworks to create something interesting!
On the whole which is better?
Even if you love the mobile design and slimline aspect of Furtive, I don’t think it’s possible to claim that it is better than Bootstrap for most things. Bootstrap is a lot more complex and can do a lot more things than Furtive, so if it was I designing a website, I’d probably choose Bootstrap as a framework to use.
1 Comment on “Is disregarding older browsers a furtive move? No – so let’s step into the present and code with Furtive!”