Create your first responsive website

For most people, creating their first responsive website can be a daunting task.  Where should I start?  How does this new software works?  What structure should I use? Etc.

The best way to get started is by converting an existing website into Ekomobi.  In this video, we'll show you how we took an out-dated non-responsive website and converted it into a modern responsive website in less than 20 minutes.

Video Transcription

Hi everybody. Today, what I’m going to show you is how to create your first Ekomobi website. I think that one of the best ways to get you started with Ekomobi is to take an existing website and re-create it inside Ekomobi.

In this case, what I’m going to show you is a local charity, Okay, and it’s, a, basically, a golf tournament for raising money for Multiple Sclerosis. And, what I’m going to do, I’m going to re-recreate it inside Ekomobi.

So, first thing I want to do, I’m going to extract the images that are in this, on this web page. So, I’ve copied the logo, the small golfer and the bottom banner into a directory. Okay, so, I’m going to re-use that inside my Ekomobi website. Now, I want to go in Ekomobi and create the website.

And then, the first thing I want to do, I want to make sure I’m using the right language. So, since this side’s going to be in French, I want to make sure I’m creating this website in French. And then, I’m going to head over to navigation and I’m going to create a couple of pages. By creating the pages before creating the actual page, when I’ m adding Call to Action, inside the page, I’ll be able to link that directly and I won’t have to, to come back later to, to set the “Call to Action”. So, I’m going to set the Registration Page for the third of it and I’m going to create a Partner Page for people that want to donate money for the tournament. So, I’m just going to create two empty pages and then I’m going to be able to add Call to Actions within the site.

Next, what I’m going to do, I’m going to start modifying the theme of the site. So, what I’m going to, I think for this site, I’m going to use a smaller width.  Because it doesn’t have many images. So, I’ll use a 940 pixels side width. I’m going to hide the footer, because I don’t really need it. There won’t be that many information. I’m going to enable the, the submenu, because I’m going to be using that later. And, that’s all I’m going to do for now, I think, in terms of modifying the theme.

And then, I’m going to change a colour of the website. I’m going to match the colours I have already. In order to do that, I will use a colour picker. In my case, I use a colour picker. It’s a add on to have in my Chrome. It’s called Awesome Colour Picker. And it has a little button that allows me to pick any colour inside a webpage. So, when I click on the widget, I just choose the colour and it copies the web value of it I can use in Ekomobi.

So, I’m going to back into Ekomobi. I’m going to start modifying the colour of my website. So, I’m going to put a background the same colour as the outside. I’m going to past the value here. Hit Enter. And, I’m going to do the same for the Menu Bar, which is going to be under the menu. And same thing for the other background, behind the header. And, and the low line between the header and the actual Call to Action button, I’m going to put them in that, that orange I have on the existing site. So, I’m going to use the colour picker to find that colour again, and set it in the theme. Same here for the menu button. And then for the other bottom border. Okay, so, I’m now starting to see the look. And for the breadcrumb background and the footer, I’m going to use that lighter grey that’s, that’s also on the existing site. So, using Colour Picker again, I’m going to choose that colour. And, then configure Ekomobi appropriately.

So, now the site is starting to look like what I’m, well, what I do. Since the site’s going to use a dark, uh, dark background, I’m going to use a front colour that is white. I’m going to use a pure white, in this case. So, I’m going to set the value for pure white. I’m going to do the same for the titles. So, this side is readable. And then, I’m going to choose a font style, in this case, I’m going to use the Railway, which, which is what they’re using the other, their other material. Then, I click save. And then, I have a pretty good idea of what the site’s going to look like. And so, I’m just going to delete that picture because I don’t need it now.

Okay, so have a look the site. Looks the colour that I had before. So, what I’m going to do now is have the logo, which I extracted from the previous site. So, I’m going to go into my folder, choose the logo and upload it, and Ekomobi’s going to optimize it for the Web. I’m going to set a telephone number. And, add an icon to it, a white icon. I’m going to type in the phone number. It’s always a good idea to put the one before the phone number, so that, if someone clicks on it on a mobile phone, they will dial directly, so it won’t ask to do a long distance. So, always a good idea to put all the numbers required to, to use the phone number. So, I’m going to reload the page. Okay, so I see the logo is there, the phone number is there. Okay, awesome. The site looks pretty good.

So, the next thing I’m going to do, I’m going to start creating the banner for my website. So, one, I’m going to show you a trick here. I’m going to use a two column banner, and I’m just going to erase the other block. I’m going to use a two column banner. I’m going to put an image in the background. So, I’m going to delete the left column here, because, that’s where the background image is going to go. And here, I’m just going to put some, some title and a “Call to Action”. So, I’m going to reuse a title that they had before, their slogan, and I’m going to copy it.

Again, I’m using a plug-in here that allows me to copy it without the HTML format, and that plug-in is directly integrated to my Chrome, so it will strip all the formatting of what I’m copying, so it’ll be easier afterwards to create it using Ekomobi. So, the plug-in name is Copy Plain Text. It’s available on Google Web Store. So, I copied the page without any formatting. I paste it into my block. I’m going to centre it and apply H1 to it. Also, it looks pretty good. And then, below it, I’m going to have a button, to, that will send people to my Registration Page, to my Partner Page. So, what I do, I put the text of the “Call to Action”, so, become a Partner. And then, I’m going to add a link to it using the, the Wysiwig Editor. I’m going to come back later to URL. And then, I’m going to apply a class to this link so that it looks like a button. So, I’m going to use the, the button enlarge class to it. And then, I need to set the URL. So, to do that, what I need to do is just preview the website that I’ve created. So, I’m just going to reload, because I made changes to it, and I’m going to go to the Partner Page, and copy the URL, the Partner Page and paste into the URL.

So, now I have my, my “Call to Action” here. So, what I want to do now is upload the picture to the background of this section. So, I’m going to first remove the margin that’s below the block, and then I’m going to click the background section and I’m going to choose a file for the background. I’m going to use the tub banner that I extracted from the other site. And I’m going to position it top left. So, I’m going to use that option. Awesome, and then I’m going to save the block. So, I set the images there. It’s pretty good. But, what I’m going to do, I’m going to add padding at the top and bottom so that we see the image completely and there’s more space with the text. So, I’m going to do the padding option, I’m going to use 30 pixels. Actually, let me use 45 pixels here. See how it looks. Okay, that’s not bad. I think I may need a little bit more. So, I’ll put 60, 60 pixels on top, 60 pixels at the bottom. Okay, and I think the spacing is pretty good. But, I’m going to change the background colour of this section. I’m going to use the same background as the image, which is black. So, we’re just going to enter it here. Choose a black colour. And then I’m going to make sure the black is applied all the way across the entire screen. So, we see now there is no transition between the picture in the background. So, if I go and look and I preview the site. Okay, so, that’s what my header is going to look like. That’s pretty good. I’m happy with the result.

So, what I’m going to do, I’m going to attack the next section. So, basically what you want to do in the next session, basically tell people why they should be coming to this tournament. So, I’m going to use a title again. So, I’m going to go into the existing site and maybe try to find some text I can re-use. So, I’m going to take this invitation text here and copy it, and, I’m going to paste it into the text. I’m going to make, I’m going to centre it and make it an H1. Okay, so, add the text here. What I want to do now, is add again some padding above and below the text.

In general, for this site, I’m going to try to use 30 pixels at the top and 30 pixels at the bottom of each block, which should give me consistent padding. I don’t like the look of this. I’m going to break it into two sentences and make the second sentence an H2. So, Okay, I think that look, that looks pretty good.

So now, I’m going to go and add us another section that’s going to explain what’s going to happen with that tournament. So, so now that I’m dividing people, I’m going to have the second section, and one thing I’m going to do, I’m going to separate that section from the section above by using a different colour. This is a trick that is being used by a lot of websites nowadays. I’m going to use that lighter grey here to distinguish that section. And, so, I’m going to go in the background, and set that colour here in the Colour Picker, and again, I’m going to extend it to the entire block. So, you’re going to see a natural separation between the colours. So, that’s a trick that is used a lot in design nowadays. I’m going to remove the margin in the bottom and again, I’m going to add padding on the top and the bottom of the block. Awesome, so, that’s what I look.

And, in this section, what I’m going to do, I’m going to put the information about the day. And here, what we have on the current site, you see that you have the information about the term on the left and then you have the schedule on the right, which means, that, on the mobile side, the schedule should come at the bottom of the tournament information, which, I don’t think is right. Probably, someone that comes to the website wants to see the schedule before.

So, what I’m going to do, I’m going to inverse the columns, so that when the website is created in mobile, seen in mobile, that the actual day schedule is first. So, I’m going to put the title here, Okay, basically schedule the day. Again, centre it and put a, a Heading 1 on it. And then, I’m going to put a two column block below the title that I’ve just created. So, I’m going to put a two column block, same colour as the previous one. So, again, I go into the background section. I fill in the colour and I make sure that it applies to the entire width of the block. And then I’m going to go back to the Webpage and copy the text that I want for this block. I’m going to copy the right column first and insert it into the left column of my new website. So, I’m going to paste it here and then I’m going to re-format it.

In general, I want to make sure that I use bright lines as much as possible. It’s easier for people to read. And then, and then I’m going to use the H3 here for the hour, to make it stand out. It’s always better to use the built in style than to use the, for example, the bold or the Italic, because it will make your content information more clear to read. So, I’m going to apply the H3 to all of the tiles, to all of the hours. I’m going to remove that white space here, so that it, it’s similar across everything. Now, I’m going to do the same with the right column. I’m going to copy the information that’s here. Again, I’m using that Plug in so that I don’t copy old HTML formatting and that’s coming from the previous website. So, I’m going to re-enter the break lines.

One of the trick I could have used, I could have copied the text and then paste it and then remove the HTML formatting manually, it’s the same process. Sometime it’s a bit harder to do, but I could have done that by using the T with the little X next to it. So, like the left column, I’m going to apply H1, I’m going to apply H1 to the titles, and then, I’m going to look at the result. Okay, the both columns are pretty balanced. It looks pretty good. I’m happy with the results. So, what I’m going to do now, I’m just going to add a “Call to Action” below the day schedule to invite people to register for the website. So, I’m going to have the “Call to Action”. First, I need to remove the margin on the above block, so I don’t see the little black background below it. I’m not going to put padding at the bottom. I’m going to just put the padding around the “Call to Action”. I’m going to use the same colour as the previous section. I can make it full width, like everything.

So, I have my “Call to Action”. Now, I’m going to configure it. What I want to do is, again, I’m going to remove the margin and add padding around the “Call to Action". Since it’s a “Call to Action”, I’m going to add a little bit more padding so that it stands out more. So, I’m happy with the padding. Now, I’m just going to select the action. So, when someone call on the click, click on the link, so it’s going to be register for the tournament, so they both going to be register for the tournament. What I’m going to do, I’m going to redirect them to another page to the registration page, and I’m just going to hide the text here and centre everything. So, now I have the “Call to Action”, when people click on that link, they’re going to send them to the Registration Page.

So, now what I’m going to do, is, is add one more section that’s going to explain the Partnership Program. So, now we have actual golf work and register for the website. Now, we’re going to have the section that’s going to explain people that are the sponsors, if they want to donate money, how they can do it. So, we’re going to copy that title here that’s coming from the old text. So, I’m going to add the title here. Same principle as before. I’m going to centre it and use a H1 to make it stand out. And for this section, I’m just going to use the default background which is black. So again, it’s going to separate the two sections. I’m going to use the 30 pixels padding at the top and the bottom of this block. So it gives me a nice clean title. And then, I’m just going to put a “Call to Action” here, that invites people to become a Partner for this Golf Tournament.

Again, I’m going to go on the old site and pick a line, a slogan I can use. Okay, here, that’s perfect. As you can see, once, if you already have a website that’s up, up and operational, it’s a lot faster to create your website, because you already have the text, you already have the colours. So, it’s a lot faster in this process. So, for this “Call to Action”, I’m just going to put a label that says, “Become a Partner.” And, and here, I’m going to send them to the Partner Page when they click on it. And then, I’m going to adjust the margins and the padding. Like the previous “Call to Action”, I’m going to add a little bit more padding than I have for the other blocks. Now, I look at the result. I think there’s probably a little bit too much padding in between the title and the “Call to Action”. I’ll remove a little bit. I’ve got to back into this block here and remove the padding that I’ve set at the bottom. I’m going to save. Okay, that’ looks pretty good. I’m happy with the result.

So, now my page looks pretty good. The other, on the other requirement of this website, I need to put the, the Partners at the bottom. And one of the problems we have, usually with Partners like that, is that people provide you with logos that are all different type of format. So, what I’ve done, I’ve actually created an image that I can Photoshop that contain all the logos with the white background. Okay, that’s the best I could do, because of the way the logos were provided to me. So, I’m going to have this image, here, at the bottom. But, since it stands out too much compared to the rest of the slide, I’m going to make a white section at the bottom of the site. So, what I can do now, I’m going to change the colour of the background of the section. But, first, I’m going to put a title at the top. So, my Partner title.

So, again, like I’ve done for the other text, I’m just going to centre it and put a Heading 1 on it. The different thing I’m going to do here, is that I’m going to, since I’m going to be changing the colour of the site, I need to make sure that the text will still stand out. So, I’m going to select the text and change the colour to a black. Okay, so I’m going to change the colour to a black. Then, I’m going to change the section colour to a white to accommodate for the image I’ve put at the bottom. So, I’m going to type in the code for white, which is “FFFFF”. Okay, so I’m going to type it in directly into the, the Colour Picker so I can see a preview. Perfect. I’m going to make this a full width. Again, I forgot to remove the margin. So, I see the background below my block. I’m going to change that. And then, I’m going to go and apply the white background to the image at the bottom as well. Okay, so I’m going to go and enter it here. I’m going to make it full width. So, now, my bottom section is here. Okay, you see there was a little bit of black at the bottom. So, I’m going to remove it using the… that’s the margin in my last section. I’m going to go ahead and remove. Perfect. I’m going to look at the final result.

So, that’s my Webpage. Okay. Looks pretty good. I think that’s a good start. Okay, now, what I’m going to do, I’m going to create the other pages. I’m not going to go through that process here, but, you see the idea. And, one thing that is really nice about Ekomobi is that now I can preview it in mobile, and then, it’s going to be, should be perfect in mobile. So, I’m looking at it here. And, yes, it looks pretty good in mobile. So, I won’t have to do any changes concerning that.

So, that concludes this tutorial on how to create your first Ekomobi website. If you have any question concerning it, you can send me an e-mail at support@ekomobi.com.

Thank you very much. Have a good day.