CreateaFreeWebsite

with Responsive Web Templates

Free Responsive Web Design Templates

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.

Most of the templates are pure HTML5 and CSS3.

Some of the Newer ones use a very small amount of javascript for the Toggle Version of the lmenu system. If you wish to add features like off-canvas-menus that require Js, the layouts are simple enough for you to make the change.

If you'd like to see the difference between Liquid, Responsive and Static web pages, here's a little demo we put together.

What is Responsive Web Design?

In a nutshell, Responsive Web Design 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 1024 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 402 demonstrates:

1) Using media query to change margins and padding
2) Using media query to swap images for various screen sizes.
3) Using media queries to change size of text at various break points

Download or Preview

Preview Template 402
Download 402.zip

Squash it all the way to the left and see what happens. Better yet visit our site and test it with your cell phone.

Recommmended Test Sites

Copy the url: https://www.createafreewebsite.net/responsive-templates/402/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 Responsive Web Design 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.

1024 Wide Desktop or Laptop

1024 view

768 wide Tablet

768 view

360 Wide Cell

cell view

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

More About 402

This template does include a drop down menu, Mobile Ready menu when viewed in smaller devices and a usable contact form. Does it all with HTML5 and CSS3. No JS.

We Are HTML5 (W3C) 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.

Why Go to Responsive Web Design?

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's called Adaptive Design and is much more involved.

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. Download it and dissect it. Or use it to build your own Mobile Ready Responsive website.

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