How to Create a Mobile Friendly Website

How to Create a Mobile Friendly
Website
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

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

Website
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:

Website
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.

Website
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.

Website
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.

Website
On the left side, hover over Appearance and click Themes

Website
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:

Website
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 this example, we are going to click
this link to make our design response.

Website
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.

Website
• Below is a screen shot of our example website --
YourSupportHero.com -- on an iPhone 6 Plus:

Website
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:

Website
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:

Website
After you have typed in the search box, press
enter on your keyboard and this should be the
first result that is returned:

Website
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.

Website
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:

Website
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.

How to Create a Mobile Friendly Website

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Recently uploaded

Recently uploaded (20)

How to Create a Mobile Friendly Website