Free Responsive Web Design Templates by CreateaFreeWebsite
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.
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.
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.
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.
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.
Why Go Liquid or 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 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 Responsive Web Design and want more sophisticated features.
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.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.