Micro-Responsive Web Design
A FileMaker App is leading the way in creating the world’s fastest web sites using Micro-Responsive Web Design, and, it is doing this much faster than other methods. Nick Lightbody explains how and why.
FileMaker, the flexible suite of Apps and deployment options including FileMaker Server, FileMaker Pro & Advanced, FileMaker Go and FileMaker WebDirect, is a popular means of creating data driven solutions to challenges in business, the public sector, education and not for profit.
Flexibility and speed of development are the most often quoted reasons for using FileMaker.
A less frequent quoted reason is its speed, but my development work over the past year provides a great example of a use where a FileMaker App beats all comers for pure speed. Surprising, but true.
DeskspaceCMS (dCMS) is a “Content Management System” (if you are a web designer, otherwise you would call it a “Web Builder”) which creates responsive web sites. It has been developed over about 12 months using FileMaker 14/15 and the new version dCMS v3 will soon be available for download from deskspace.com.
As you know, creating sites which work perfectly and look great on any device nowadays is the key priority because the majority of folk use mobile devices, often with quite small screens. A responsive site is one that works perfectly on any device using the same HTML page code but leveraging CSS media queries to vary the appearance of the page depending on what size screen it is viewed on.
Fast and responsive sites now rank very well on search engines hence this is not just a crowd pleaser.
With a need to create responsive sites I experimented with the approach the Stephen Hay describes in “Responsive Design Workflow”. So I used BBEdit, Pandocs and Dexy as a method of first drafting content, in John Guber’s Markdown language, and then creating the HTML pages. I had looked hard at Stephen’s work because I heard he had been used by the world’s leading digital agency, R/GA, to teach them how to build fast responsive web sites. I loved his approach, pure simplicity, and have built my own approach to responsive page design firmly on Stephen’s suggestions. However, I was unimpressed by the actual speed in practical use of the command line Apps, Pandocs & Dexy.
The obvious thought was “Why not do this in FileMaker?”.
After an intensive night’s work, I had created the first version of the new App. The core idea was to use FileMaker’s Substitute() function on an industrial scale to set CSS values set by the user into an html page template, hence to automatically rebuild and preview the page everytime the user made a change, and it worked.
It worked because although a FileMaker App is technically an interpreted App, not a compiled App, and hence should not in theory be as fast as a compiled App, its Substitute() function is a very wonderful thing, which works very fast, as the statistics above show.
On every page, dCMS is assessing about 250 conditional styling values and then substituting those values into the in-line CSS within the style section of the page. It is also assembling formatted paragraphs, image tags, hypertext links, YouTube videos players, mailto tags, Google Map viewers, Form fields and PayPal buttons and the site navigation system before minifying the page and automatically uploading it to the web server. All done with vanilla FileMaker, without plugins. It really is just text manipulation on a fairly large scale.
You get this performance by playing to FileMaker’s strengths and simplifying everything that creates a performance load.
Accordingly, this App differs from most other FileMaker Apps in that it uses a very simple relationship model and a limited number of fields, which are two big performance boosters, whilst using large numbers of repeats in a small number of repeating fields and many scripts, both of which create a very low performance load.
Here, for example, is the relationship graph, which you can see is extremely simple…
Thinking back to Sir Tim Berners-Lee’s invention of Hyper Text Markup Language (HTML), the foundation of the World Wide Web, he focused on enabling people to work faster, in order to make their lives easier.
That is what the Responsive Web is all about. Ensuring that web sites work fast and are simple to use. Yet, the majority of sites are quite the opposite, often unresponsive on mobile devices and more often slow over a cellular network. Slow and unresponsive sites make peoples’ lives harder, not easier.
The first and biggest step towards working out how to get great responsive performance is to look at the entire code used by the device’s browser in order to display the page to the user, and to assess its function. In practice, many sites use over a 100k characters of code merely to display a few score characters of readable content.
Why? Because they use one or more complex, long, feature rich CSS Librarys to control their page appearance.
In every case, much of this code is redundant, unused by the page in question. In fact completely unnecessary. Yet, despite using only a small number of features from each library on a particular page, nonetheless, the user’s low powered mobile device is still required to download every CSS library to which the page refers, in its entirety.
Then it has to interpret several librarys’ competing instructions in order to work out how to display perhaps only a few lines of text and a few of images.
This is incredibly inefficient!
It is inevitably slow.
Surely there must be a better way you are thinking?
Indeed there is.
When we write software Apps we are building amazing machines with a zero cost of reproduction, a miracle of technology. Such a machine can be designed to write the html and CSS required to construct a web page. deskspaceCMS is such a machine.
When you write web pages with a machine, you have no need for external CSS style libraries, because you can dynamically write in-line CCS code to control each page as part of the page in question whenever the page is amended. This enables the App to avoid using and including any CSS code which is not required on a page by page basis.
You cannot do this with an external library.
The result is that the user’s device has much less code to interpret for each page and hence the pages render very much faster then they would with external CSS Libraries.
We have christened this approach Micro-Responsive Web Design.
To experience this for yourself just download the demo version of dCMSv3 from deskspace.com. If it isn’t yet available drop me a line and we will send you a copy on release. Then use dCMS to reproduce a page from your existing site. Measure the original and new pages with Google’s Page Speed Insight tool. You will find that the new page is much faster then the original. Compare the code for both pages, including all external resources referred to. The new code is much shorter.
This is not rocket science, merely simple logic. The starting point for speed is to reduce what you ask the device to deal with.
We have yet to find any responsive sites anywhere on the web which are faster than equivalent sites created with dCMS, measuring with Google Page Speed Insight, and hence we are proud to be able to say…
Cheers, Nick
September 14th, 2016
Sussex, UK
