Free Liquid Templates
Or Responsive Web Design?

Free Liquid Templates Or Responsive Web Design?

About Our Templates

Our template collection is different than most you will encounter. I don't provide theme based templates for one, as it pertains to subject matter. I provide a universal layout or a painter's canvas for you to use to create your own design.

The images I provide are simple placeholders, used to demonstrate the techniques of swapping and scaling for various device sizes. The techniques may vary from template to template.

I recommend using pictures that you create. Do not use images from so-called free websites. You are only asking for trouble.

The templates are pure HTML5 and CSS3. I don't use javascript. If you wish to add features like off-canvas-menus that require Js, the layouts are simple enough for you to make the change.

 

What is Responsive Web Design?

In a nutshell, RWD is a method of designing one web page that can be viewed in any size device.

It is the future of modern web design.

You no longer need 2 or 3 different websites for desk tops, tablets and cell phones.

The three web pages pictured on the right (below on smaller screens) are generated by a single page of HTML code and one style sheet.

The first picture is viewing the web page on a desk top or a laptop with a 1280 pixel wide screen.

The second picture is the same code viewed on an Ipad at 768 pixels wide.

The third picture is what the same web page looks like when viewed on a cell phone with a 360 pixel wide screen.

Template 208 demonstrates::

1)Using media query to restructure columns for small screens
2)Using media query to restructure the menu for small screens.
3)Using media queries to change margins and size of text at various break points

Download or Preview

Preview Template 208
Download 208.zip

Squash it all the way to the left and see what happens.

Recommmended Test Sites

Copy the url: http://freeliquidtemplates.com/208/index.html

Paste it into any one or all of these testing tools.

Google Mobile Friendly

PageSpeed Insights Scores: 100/100 100/100

GTmetrix. Scores: A(99%)/A(100%)

We challenge you to find another source of RWD templates that score even close to this!!

Recommendations will vary between analyzers.

Google uses an undefineable term, above-the-fold, and considers a linked style sheet render-blocking. GTmetrix recommends the linked stylesheet because it can be cached.

Google accepts the scaling of images as long as they are optimized. GTmetrix recommends images be defined in code using absolute values and using media queries to swap sizes.

Mobi Ready considers the absence of Etags a major fail. Both Google and GTmetrix are fine with it.

More About 208

Template 208 contains no images. The icons are generated using code. Okay, that is one of the reasons it scores so high. Hint, hint. If you want performance and speed limit the number and size of pictures on a web page.

This template does include a drop down menu.

1280 Wide Desktop or Laptop

1280 view

 
Go back

768 wide Tablet

768 view

 
Go back

360 Wide Cell

cell view

 
Go back

 

Why Go Liquid or RWD?

People are viewing websites these days on devices with screens that range from 240 pixels to 1940 pixels wide; some probably even larger.

Some authorities like the W3C still recommend building different versions of your site for different devices.

That might be an option for professional designers, but the the shade tree designer, in most cases, doesn't have the time or knowledge to do that.

Our Goal

Our goal on this website is to provide the beginner designer with an entry level template that performs well across a wide range of devices.

The designs are as simple as we can make them and are easily modified by those that pursue the concept of RWD and want more sophisticated features.

We Are HTML5 Compliant

Aside from the warning you'll get for not specifying charset using meta tags on some templates, our templates are W3C compliant and are very easy to modify. You will need to define charset in your .htaccess file or add the meta for use on your server.

You should visit our Free HTML 5 Tutorial for a 7 step crash course on building web pages with the methods used in these templates.