Regardless of your business or online property, one key essential is that all of your websites are mobile-friendly. More and more consumers are choosing to use their smart phone or tablet to surf the Internet in favor of a personal computer or laptop. We would never recommend launching a website without a plan to offer your content on multiple devices.
In this step by step tutorial, we’ll show you how to make your website both responsive and mobile-friendly.
1) Register Your Domain Name(s)
2) Setup Your Web Hosting
3) Install Wordpress
4) Responsive Design or Mobile Website?
5) Setting up a Responsive Design
6) Setting up a Mobile Website
Step 1: Register Your Domain Name(s)
Before you can get started with your mobile friendly website, you need to register your domain. It’s possible you already have one, but here are some suggestions to follow:
- Attempt to obtain a top-level domain name for your brand. – A top-level domain includes .com,.net, and org. These are most respected by search engines, social media, and have been around the longest. Even if your desired name is taken, spend some time to come up with other variations.
- Register additional TLDs. – After you have your “main” TLD it’s important to register additional TLDs to protect your brand. These can easily be forwarded to your main name and can be a very effective way for you to track your offline and billboard advertising. You want to start by making sure you register all other available top level domains (.com, .net, and .org) and then branch out to .mobi, .us, .biz, .co, etc. The more you register, the more your brand is protected. (We recommend at least .com, .net, .org, .mobi, .biz)
- Keep Your Name Simple – It’s very possible that your first couple attempts at a top-level domain name are going to be taken. If you have to add abbreviations such as “Inc” or “LLC” that’s fine. You’ll find more of the “additional TLDs” are available to only include your name that you can use in your advertising. As we mentioned above, you can easily forward as many names as you want to the same website.
You can begin the registration process at the following URL: https://www.namehero.com/domain_registration.php
Hero tip: Use the coupon code MOBILESITE to get a complimentary .mobi domain name for using our guide
Step 2: Setup Your Web Hosting
Once you have all of your names registered, you’ll need to setup your web hosting so you have somewhere to publish your new website. If you followed the above steps accordingly, you should have selected your “main” domain name that is going to serve your website. You can then forward your other names to this one website, which we’ll explain later.
By now your domain names should be in your cart as displayed in this screenshot:
Beside your “main” domain you want to click the red “Add Hosting” link. The next screen will navigate you to select the plan that best fits your needs:
- Blogger - This plan is for those just getting started online. Feel free to select this option if you just need the most basic hosting.
- Entrepreneur – Our most popular package, the Entrepreneur is powerful because it allows you the ability to host multiple domains with us. This is great for those than plan on future growth or need web hosting for more than one site.
- Developer – If you’re writing your own code and need more availability to the server including SSH access then you’ll want to go with this plan.
Confused on which plan is right for you? Start with the Blogger and you can upgrade your account at anytime. Our Superhero Support team will assist you every step of the way!
Once you decide on your plan and your billing cycle you can proceed back to your cart to finish up the configuration.
When you successfully complete your payment, your domains and web hosting will automatically be provisioned on our platform. Please check your email for corresponding invoices, login credentials, and other important information you should print and save for your records.
Step 3: Install Wordpress
We have step by step instructions on how to install Wordpress in our extensive Knowledgebase at this link.
Step 4: Responsive Design or Mobile Website?
Once you have Wordpress installed, you are literally minutes away from your mobile friendly website. Now, you must to decide whether you want to utilize responsive design, a mobile website, or both! In this example, we're going to show you how to do both.
Step 5: Setting up a Responsive Design
You need to find a Wordpress theme that is responsive. This can be done by going to websites such as ThemeForest.net and searching for designs that are responsive. Once you find one and download, follow the instructions to design it.
Hero Tip: Did you know you can select responsive designs in our easy Wordpress installation that we showed you at this link? You can and that's exactly what we're going to show you!
Navigate to your Wordpress Admin page, in this example, ours is located at http://www.yoursupporthero.com/wp/wp-login.php. Enter your login credentials are proceed to the Wordpress interface.
On the left side, hover over Appearance and click Themes
We have selected the SunRain theme, which is available in our Wordpress installation guide. You can find many colorful and diverse themes there but here is what the Themes page looks like in Wordpress:
On the left side, you'll see a link that says SunRain Options. Depending on your theme, this could vary. See theme instructions for details but for thise example, we are going to click this link to make our design response.
For our theme -- SunRain -- all we have to do is tick the box that says "Check the Box if you want the Responsive Layout of your Website," scroll down and click Save Options. Our design is now responsive.
Below is a screen shot of our example website -- YourSupportHero.com -- on an iPhone 6 Plus:
Step 6: Setting up a Mobile Website
Wordpress makes it easier than ever to setup a mobile-friendly website by use of a diverse and free plugin called WPtouch Mobile Plugin.
To install, we're going to head on over to the plugins page in our Wordpress install. You can do this by accessing your Wordpress admin page and clicking plugins on the left side. In our example, we're going to point our browser to http://www.yoursupporthero.com/wp/wp-admin/, login and click the left side as pictured below:
The reason I wanted to go directly to the Plugins page is to show you where they are all located. Here, you can see what we already have installed.
Now, to install the WPtouch mobile plugin, click the Add New link at the top of the page as picture below:
On the next page, type WPtouch Mobile in the search box at the top right of the page. You can see exactly what we're talking about in the image below:
After you have typed in the search box, press enter on your keyboard and this should be the first result that is returned:
Click the Install Now button in the top right corner (pictured above). A prompt window will ask if you are sure, in which you will click OK and that will bring you to the following page:
Click Activate Plugin (pictured above) and your website is now mobile-friendly.
To check our work, we'll grab our mobile device (in this case an iPhone 6 plus) and point our browser to our example website located at http://www.yoursupporthero.com/wp/. Below is a screen shot:
As you can see, our website now how has a mobile friendly design. The visitor also has the option to revert back to the Desktop version -- which is responsive -- by tapping the link pictured above. The WPtouch Mobile plugin is completely customizable within the Wordpress interface, however, as you can see, just by installing it creates an immediate response in just a few simple steps.
Now that you have completed this guide, your website should be both response and mobile-friendly. Happy developing and be sure and let us know if we can be of further assistance.