List of free website provider

There are many free website providers on the internet these days. We provide a list of most used free website provide. Also, we discussed the advantages and disadvantages of these free website providers.

One thing we discussed about the free website provider not free blog provider. So we start the discussion.

http://blog.readwithfun.com

WIX.com: Free Website Builder | Create a Free Website

www.wix.com

Wix.com is a platform for the improvement of the existing network on the cloud, which allows users to create Web sites and HTML5 mobile sites, through the use of drag-and-drop tools online. Users can add functions such as social plug-ins, e-commerce, contact forms, email marketing, and community forums for their websites using a variety of applications WIX growth and a third party.

WIX built on the freemium business model, and earn revenue through premium upgrades. Users must buy premium packages to link their sites to their own domains, and remove the ads WIX, add e-commerce capabilities, and the purchase of additional data storage and bandwidth and more.

Advantages	Disadvantages
Inspiring looking designs	At one time you have chosen a template it can’t be changed easily
Capability to add animations	Visible advertisements on the free platform
Lot of apps in the App-Market	Not designed to manage complex e-commerce needs
Intuitive Drag & Drop interface
Support and help available everywhere

Weebly Website Builder: Create a Free Website, Store or Blog

www.weebly.com

Weebly is a web hosting service and includes a drag-and-drop construction site. In August 2012 and is now making the guests more than 20 million site with a monthly average of more than one million unique visitors a kind. The company headquarters in San Francisco. The company was originally founded by Chief Executive Officer (CEO) David Rusenko, Chief Technology Officer (CTO) Chris Fanini, CEO and Chief Operating Officer (COO) Dan Veltri. Start compete with Wix.com, websites, WordPress.com, Squarespace.com, Jimdo, Yola, SnapPages, and other sites on the web hosting and creation.

Advantages	Disadvantages
User friendly interface	Cannot have various levels of your pages (for instance, I could not indent these bullets)
Drag and drop user interface	No spam control
Automatically saves everything you do	No control on who can comment
Excellent tutorials to get word about the various characteristics	Can just get two free web sites
It’s free to create an account	Hard to use multi-language
Can add as many pages as required
There are many templates to choose from

Google Sites – Intranet, Site Building & Project Management

www.google.com/work/apps/business/products/sites/

Google is a wiki- sites and web page creation, structured tool offered by Google as part of the Google Apps suite of labor productivity. The aim of Google is one of sites to be able to produce a website concentrated on the team where several people can get together and exchange files.

Advantages	Disadvantages
Free for everyone	Limited functionality compared to other website builders
Fast and easy to edit	Not really good website for business – not enough customization
No programming or database skills are required	Apps only limited to Google apps only. Apps outside Google apps may be unsuitable
Ideal for newbie who wants to build a website for the first time	The website URL must begin with “sites.google.com/site/” which is too long for a website
No software installation is required
Integrated with Google apps
The creator can access tools anywhere
The creator has full control of page access and permission
Function as a basic project manager

http://blog.readwithfun.com

How to change a html website to responsive website

Today, a website must not just look good on a desktop screen, but also on tablets and smartphones. A website is responsive if it is capable to adjust to the displayed of the client. In this article, I’ll show you how to easily create a website responsive in cool steps.

http://blog.readwithfun.com

Responsive-website-example

Responsive website steps:

There are basic three steps to change normal html website into a responsive website. The detail of these magic steps as following.

Layout

When you want to build or change existing non-responsive website to responsive website. The first thing you should see is that the layout of the website. Building of responsive website you should start a non-responsive layout and change into a responsive website later.

For example learnhd.com has non-responsive layout and no change the layout with the device screen size. I will change into a responsive website later. This practice will be helping me to focus on one task at one time.

When you’re done with your non-responsive website. The first thing you want to do is the following lines paste inside the<head> and </head> tag on your html page. This action will be set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers. Which renders website at full-view and allow users to zoom into the layout by pinching.

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”HandheldFriendly” content=”true”>

It’s now time to add several media queries. According to the W3C site, a media query contains of a media type and zero or more expressions, that checked for the conditions of certain media features. By using media queries, appearances can be adapted to a specific range of output devices without changing the content of it. In other words, media queries allow your website to look good on all kinds of screens, from smartphones to big screens.

Media queries depends of your website layout, so it’s hard for me to provide you a ready to use code snippets. However, the code given below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.

Come up with the code, you can look that I defined two sizes. The first have a full width of 1060px and is adjusted for tablet landscape display. #primary occupies 67% of its parent container, and #secondary30%, plus a 3% left margin.

The next size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphone screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below#primary.

I previously said, you’ll be possibly have to adjust this code a bit to suite the specific needs of your website. Paste it on your site .css file.

/* Tablet Landscape */
@media screen and (max-width: 1060px)

{
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}

/* Tabled Portrait */
@media screen and (max-width: 768px)

{
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}

After completion this step to check how responsive your layout is you should use responsive tool.

Medias

A responsive layout is the first point to a make a fully responsive website. Then we should concentrate on a most significant function of a modern website, this is media, such as videos or images.

The CSS code given below will ensure that your images will never be larger than their parent container. It’s too easy and working fine with most websites. Note: the max-width directive is not picked out by older browsers such as IE6. To carry on this training you should append this code snippet into your CSS stylesheet.

img { max-width: 100%; }

This technique mention above is really efficient. Sometimes you should to have more control over images. Should be display a different image rendered to the client display size. So should be start with the html:

<img src=”image.jpg”
data-src-600px=”image-600px.jpg”
data-src-800px=”image-800px.jpg”
alt=””>

As you can see, we used the data-* attribute to store replacement images urls. We should utilize the entire power of CSS3 to replace the default image by one of the specified replacement images. If the min-device-width condition is true:

@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}

@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}

Amazing! We should look for another very important media in today’s websites, that is videos.

As most websites are using videos from third party sites such as YouTube, Dailymotion, etc. I decided to focus on the elastic video technique. This method allows you to make embedded videos responsive.

The html:

<div class=”video-container”>

</div>

And now, the CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Once you have applied this code to your website, embedded videos are now responsive.

Typography

The last step of this tutorial is definitely essential, this is Typography.

Until today, most developers (me as well) used pixels to set font sizes. While pixels are ok when your website have a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, hence it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset the html font size:

html { font-size:100%; }

After the adding responsive font you should define font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

Please note that the rem unit is not recognized by older browsers, so don’t forget to implement a fallback.
That’s all – I trust you enjoyed this tutorial!

http://blog.readwithfun.com