* How to create a responsive website guide from our customer *
I remember back in the day when web sites were for the big corporations and having access to the internet 24/7 was considered a lux. These days are gone. Now having an appealing and informative quality web site becomes a necessity. Everybody needs one, but unfortunately not everybody can hire a professional to set it up or take care of this task alone. Well the second part is not entirely true…
Related Topics
- Video doesn't auto-playing anymore in responsive website maker software
- Unable to get the website builder responsive form to work
- Responsive website maker always takes you back
- The way data is submitted in responsive website generator
- Non-profits and responsive website creator extensions
In this article I’m intending to walk you through each and every step required for the creation of a smashing and modern website for yourself or your business and the best part is you won’t need any special technical skills different from using your mouse and typing a text – if you can send an email with an attached image, with the help of this tutorial you will be able to give life to your first site in less than a day. Don’t believe me – read further to find what that is all about.
First Steps - Content, Domain Name and Hosting
The first, and most important thing you need in order to create a valuable web site is to have something to say, something to show to the world. No one will read “Lorem ipsum..” till the end even if it’s written in golden or flashes in all the colors of the rainbow. But since you’re reading this, I presume you’ve already have some topic in mind. Having the possible content in mind, let’s take a look at the means to show it to the world.
Next you need a domain name and hosting. Let’s take a look what stands behind these strange terms. The domain is the name of your site. It’s unique and should generally carry some meaningful information about you or your company. A good idea is to think of something cute and appealing. For example if the site will be for a tree cutting company maybe www.cutitdown.com would be a good idea. And of course you can put your company name – like www.mycompany.com.
Since this name is supposed to be unique it is probable that your first pick has already been taken – don’t get upset, just play around with come dashes, the order of the words or the domain extension – that’s the three letter part after the dot. The good news is when registering your domain name you got proposed the available options, don’t have to shoot in the dark. Where exactly this registration takes place you’ll get to know in a minute.
The hosting is the place your new site will get to actually “live” Imagine it as a computer turned on and connected to the internet with somebody around to take care everything is running smoothly 24/7. So most basically the hosting is the home of the site and the domain is the address on which people come to see it. These two things are gonna cost you, but luckily not much at all. Domain registration is about $30/year and the hosting is about $5/month. You get a bonus though
- most of the hosting packages include up to 50 email addresses with you domain name behind it
- like if the domain is mycompany.com you can define office@mycompany.com, sales@mycompany.com, george@mycompany.com etc.
- you chose what to put in front of the @.
Where to purchase your domain and hosting? Which is the best provider?
Personally I’m using a local provider, situated in the city I live in down here at the bottom of Europe, but unless you can read Bulgarian it won’t be much of a use to you. So after some googling around I picked up iPage to recommend – looks friendly, claims to be 100% green and the price is one of the lowest available – it wasn’t long ago when I started my business and I remember how every dollar mattered.
http://www.ipage.com/ - Take a good look at this site – at the end of this tutorial you’ll be able creating something like this and much more – no kidding.
Select “Sign Up Now” – it will lead you to the domain registration page. Type in your first pick of a desired domain. For the example I intentionally typed in existing domain – that’s my site’s name to lead you through the more probable scenario.
It checks if this name is already taken and if so gives you alternatives. Either pick one or tweak the name itself as we talked about earlier and check the availability again. When ready click Continue.
Carefully double, even triple check everything stated on the page – they often include some options which charge you extra and you would have wished you’ve unchecked them when the bill arrives, so read carefully and decide wisely. Proceed to checkout when ready. Login to your new account and head to your admin panel – that’s the back office where you get to manage your account.
Take your time to look around and find the FTP section – that’s all you’ll be needing for now and of course the e-mails section – you’ve got emails bind to your newly registered domain. When you find the FTP info about your ftp host, your login and password, just leave it open – you’ll need this in a little while.
How to build a responsive website?
Now comes the time for the essential part – building your site. As I promised you it won’t require much of a technical skills than you probably already possess. It will require a piece of software though so let’s take care of that first. For the creation of your smashingly good looking first site we’ll be using the Mobirise Responsive Website Builder – it’s free, easy and creates web sites which are natively mobile and responsive – they adapt to the width of the space they have to take place in. So if you are viewing the site on a tablet or a mobile phone instead of your laptop it automatically resize for best appearance and easy navigation.
The build process is amazingly easy – you just drag the modules you need where you think they should take place and that customize them with your own content – images, text, colors etc. The customizing options are much self-explanatory so you’ll be playing around with a bootstrap slider, articles and buttons in no time. But first you need to download and install it on your computer. To do so just head to
and select either the Windows or Mac version to download. Nevertheless the download buttons appear right on the top of the page it might be a good idea to scroll down the entire page – it will give you a good impression about the power you are about to possess and got some cool tutorial clips to get you inspired.
After you’ve taken your time exploring the page proceed to downloading the program if you haven’t already done so. You can always come back later or ask the support team if you’re having some issues (not likely to have any though).
Once you’ve downloaded the package, extract it in a folder of your choice and run the Mobirise-installer. The installation process is no different than any other. As my wife use to say “You click on Next until it says Finish” ;) No hidden annoying additional installs checked by default.
Once the installation is finished the program will load showing you a sample website project and a cool message “Click here to start” Do so and scroll down the just appeared side panel to look at all the blocks you can use on creating your site. Note the way they are ordered into some categories. The order of the categories gives you a hint about how most of the web sites are being organized – they all have navigation responsive menu , header section, body, consisting of sliders, media, articles, info and content sections, social networks links, maps etc. and end with a footer.
The blocks in the side menu are ordered the same way. Though it’s a good idea to have in mind this order you shouldn’t be narrowed by it – the order and presence of the blocks on your site can be whatever you want it to be. Also you can use most of the blocks as many times you need – just drag and drop them where you think they should take place.
Note the three squares appearing in the upper right corner of each block when you hover your mouse over it. These mean Drag Block to move it up/down the page, Edit Block Parameters – Background, Video Background, alignment of the elements, which elements should appear on it etc. and the red trash bin is I think self-explanatory. Note that if you try erasing a block the program asks you are you sure and once you say Yes it’s irreversible.
In the upper-right angle of the Mobirise Responsive Builder’s window you’ve got three small horizontal lines – hovering your mouse over them brings up the left sidebar which has kind of a main menu functions – you can add, edit properties and delete either pages in the current web site or entire projects – a bit early for that though.
There is an option signing up with Mobirise – you should do that – you’ll get to receive important news about updates and extensions. The extensions to the program are extremely useful and make the web site creation even more easy and effective. Some of them are free, some – almost (at the symbolic cost of $5) and some cost a bit more. For now just add all the free stuff, you’ll purchase the $5 ones soon afterwards - when you get more familiar with the whole thing and see the good of it.
As you may recall we talked about something called responsive mobile friendly website – the kind that adapts to the width it has to display. In the middle on the top you’ll see three icons – click on each one to see how your site will look on different screens.
Next to them to the right you’ve got an eye letting you preview what you’ve done so far in your web browser and the Publish button. You get to choose between local folder, ftp folder of the hosting you’ve just purchased and Google Drive. Nevertheless you’ve got nothing complete yet, go click on Publish, select FTP and click on EDIT. In the popup window copy/paste the FTP details I told you to get from the hosting’s admin panel. Now you’re all set for the time when you’re fully satisfied with your site and decide to show it to the world.
Just a few words about structuring. There is such thing called “the root folder” – it’s the most top level you can put your pages in – like C:\ or D:\ on your hard drive. When you type in the browser’s address bar your newly purchased domain name – that’s the place it will go looking for your website. And if we can take the example from a while ago, if the hosting is the home, the postman goes to the address – the domain, rings and asks for somebody called index.html. That’s the way your Starting page should be called for the browser to open it when you type only the address. And it should be in your root folder on the server.
Ok, now that you got initial look around it’s time to get the things going. You need at least a blurry concept about what you want to achieve. Don’t worry if it isn’t clear yet – it will easily crystallize.
My advice is – start a new Mobirise project and drag out every block you see in the sidebar. Take a few minutes playing around with the options, do some previews in your browser – this way you’ll feel more confident and comfortable with the new powers you poses.
You’ll see how some parts of your concept will start fitting in block or another. Take your time and most importantly - have fun – that’s the little secret of creating something valuable. Don’t worry if your first variants don’t look as good as you would like them to be – they never do from the first time, believe me. And in case you haven’t noticed – Hey! You’re creating a website! Keep on – you’re doing great!
A few hints
There is something trendy and cool called one page web site – everything goes on one single page and the navigation bootstrap menu on top just scrolls the page to the corresponding place. To do this, click on one of the header menu records, select the link and in the pop-up window choose one of the anchors – these are the blocks you’ve dragged on the page in the order they appear on it. More about the menus and anchors you can read in one of my other articles here.
Everybody learned and took inspiration from somebody – you should too. If you can’t figure out how to put together something – take a look how it’s done on other sites and do something similar, not the same – make it your own.
A good thing to have, but not in first necessity for a startup business is a logo. If still don’t have one, just disable it from the header options, or play a bit with these free online tools to create one for yourself supalogo.com , www.picturetopeople.org, cooltext.com
Remember – you need a .png image – that’s the one with the transparent background – otherwise whatever you do you’ll end up with a square ;) Another good way to get a good logo is hire a professional designer – for example me! :P
Take the full advantage of the contact forms – just enter your valid email in the settings of the block section and then verify it through the letter you’ll receive shortly. You will get to receive the messages from the contact boxes on the email you’ve provided. If you plan on creating a subscribers mail list – you’ve got a block for this too.
Never be afraid to ask – the support team is there for you. I got swift, polite and useful answer on any question I’ve ever asked them.
Sometimes in order to figure out something you should leave it away for a while – the decision will come to by itself in a while. If you are struggling and feel stuck – do that. This works in many areas, not just the web design ;)
Conclusion
The times demand that like the phone number or the email having a website for you or your business is a necessity. Though not everybody can afford to hire a professional designer, or spend endless hours in learning code since we are already doing a few things at one time. The good news are there is a solution for that problem. With the help of this step by step tutorial and the magnificent free Mobirise Responsive Website Builder almost anyone with initial knowledge in handling a laptop and a few bucks for hosting and the paid extensions can create, poses and rejoice a smashingly looking responsive website at no time. Just follow the steps – since I was able writing it, you are able doing it. Good luck and happy creating!