Guides
How to Create a Mobile Friendly
Website
Regardless of your business or online property, one key essential is that all of y...
How to Create a Mobile Friendly
Website
Step 1: Register Your Domain Name(s)
Before you can get started with your mobile f...
How to Create a Mobile Friendly
Website
Step 2: Setup Your Web Hosting
Once you have all of your names registered, you’ll ...
How to Create a Mobile Friendly
Website
Beside your “main” domain you want to click the red “Add Hosting” link. The next s...
How to Create a Mobile Friendly
Website
Step 3: Install Wordpress
We have step by step instructions on how to install Word...
How to Create a Mobile Friendly
Website
Step 5: Setting up a Responsive Design
You need to find a Wordpress theme that is ...
How to Create a Mobile Friendly
Website
On the left side, hover over Appearance and click Themes
How to Create a Mobile Friendly
Website
We have selected the SunRain theme, which is available in our
Wordpress installati...
How to Create a Mobile Friendly
Website
On the left side, you'll see a link that says SunRain
Options. Depending on your t...
How to Create a Mobile Friendly
Website
For our theme -- SunRain -- all we have to do is tick the box that
says "Check the...
How to Create a Mobile Friendly
Website
• Below is a screen shot of our example website --
YourSupportHero.com -- on an iP...
How to Create a Mobile Friendly
Website
Step 6: Setting up a Mobile Website
Wordpress makes it easier than ever to setup a...
How to Create a Mobile Friendly
Website
The reason I wanted to go directly to the Plugins page is to show you where
they a...
How to Create a Mobile Friendly
Website
After you have typed in the search box, press
enter on your keyboard and this shou...
How to Create a Mobile Friendly
Website
Click the Install Now button in the top right corner (pictured
above). A prompt wi...
How to Create a Mobile Friendly
Website
To check our work, we'll grab our mobile device (in this case an
iPhone 6 plus) an...
How to Create a Mobile Friendly
Website
As you can see, our website now how has a mobile friendly
design. The visitor also...
How to Create a Mobile Friendly Website
of 19

How to Create a Mobile Friendly Website

A step by step guide on how to make your website mobile friendly through the NameHero.com Platform. Our platform features one click installation of Wordpress, mobile website design, responsive design and more. Here is exactly how to make your website viewable on smart phones and tablets through NameHero.com.
Published on: Mar 3, 2016
Published in: Internet      
Source: www.slideshare.net


Transcripts - How to Create a Mobile Friendly Website

  • 1. Guides
  • 2. 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
  • 3. How to Create a Mobile Friendly 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
  • 4. How to Create a Mobile Friendly 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:
  • 5. How to Create a Mobile Friendly 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.
  • 6. How to Create a Mobile Friendly 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.
  • 7. How to Create a Mobile Friendly 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.
  • 8. How to Create a Mobile Friendly Website On the left side, hover over Appearance and click Themes
  • 9. How to Create a Mobile Friendly 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:
  • 10. How to Create a Mobile Friendly 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.
  • 11. How to Create a Mobile Friendly 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.
  • 12. How to Create a Mobile Friendly Website • Below is a screen shot of our example website -- YourSupportHero.com -- on an iPhone 6 Plus:
  • 13. How to Create a Mobile Friendly 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:
  • 14. How to Create a Mobile Friendly 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:
  • 15. How to Create a Mobile Friendly Website After you have typed in the search box, press enter on your keyboard and this should be the first result that is returned:
  • 16. How to Create a Mobile Friendly 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.
  • 17. How to Create a 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:
  • 18. How to Create a Mobile Friendly 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.

Related Documents