Learning Objectives
Level: beginners
Target: anyone with a website
In this How to Create A Website For Mobile Devices The Lazy Way tutorial, you will learn how to create a mobile optimized website that looks great both on desktop screens as well as in mobile devices (mobile phones and tablets such as iPhone, iPad, Android phones, Android tablets). The only word you will need to know is “Responsive”.
Do You Know How Easy It Is to Create Your Own Website?
Follow the “How to Create A Website in An Hour” first if you would like to create your own website. Then come back here to make it looks great in mobile devices.
Create Your Own Website Now
The Mobile Friendly Website Guide
Why is it important to make sure your website looks great in mobile devices?
Nobody would deny that mobile devices are prevalent these days. Many even predict that mobile devices would soon replace the desktop computers and notebooks. Soon there will be the time when more people will visit your website from mobile devices than from traditional desktop computers. No convinced? Look at the facts/predictions below and judge for yourself.
- From 2013, more people access the Internet through mobile devices than desktop computers as a whole.
- The number of users around the world using smartphones (mobile phones with touch capabilities that can display websites) is estimated to top 2 billion in 2015 (according to a Bloomberg report).
- Website traffic from mobile devices is increasing at a rate of 3.5% month over month (according to Televox).
- The purchase behavior is different too. Close to 70% of people who have searched for a product or service on a mobile device will buy the product or service rather soon. Reports have already shown that the conversion rate through mobile traffic (~28%) is much greater than desktop traffic (source: Search Engine Land).
- Around a quarter of visitors will exit a website (bounced traffic) if the website is not optimized for mobiles and up to 40% of people will click another website if the one they just visited is not mobile friendly (source: Icebreaker Consulting).
- Google checks whether your website is optimized for mobile devices and show your website higher in search from mobile devices for the mobile friendly websites.
What the above can be translated into: if your website is not mobile friendly, you will lose more and more business, especially at a time when mobile internet usage has just surpassed desktop viewing. The trend for mobile usage is unstoppable. With the introduction of more and more powerful mobile devices with larger screens, faster CPUs and multi-tasking capabilities, it is expected that desktop internet use will soon become a minority or only job related. The majority of time people spend on the internet will be from mobile devices.
But the good news is:
- Less than 5% of e-commerce websites on the internet has transformed their website to be mobile friendly, many major ones do not even allow shoppers to buy on mobile devices
If you can make your website mobile friendly, you are ahead of those 95% “dinosaurs” websites.
Benefits of having a mobile optimized website
- You will rank higher in Google search for mobile as Google would take into account whether your website is mobile optimized when ranking websites for mobile devices.
- You might be able to double the website visits as over half of the internet traffic comes from mobile devices.
- You might have a higher conversion rate for your products and services as mobile users are more ready to buy products.
- Your website will look modern and trustworthy with the adoption of responsive website design .
I want to create a website that is mobile optimized. Is it difficult? Is it expensive?
Yes and no. If you just create your own website from scratches using HTML and CSS, this might be a very difficult task as you will need to understand all the ins and outs of responsive website design. But if you have followed our “How to Create A Website Guide” and created your first website using WordPress, you are in luck! You just need to convert your website to a responsive one that’s tailored for mobile with a simple change of WordPress theme and a few customizations.
Yes, it is that simple. Best of all, many of the responsive themes are provided free (of course, quality is of your top priorities, you are advised to purchase a paid theme such as DIVI for only US$69 – this is the one currently used on the WP Learner website and they are consistently upgrading the themes to make them even better).
Why aren’t most other websites optimized for mobile?
I have the same question too. It is either because the website owners are so busy with their business that they are ignorant of the mobile trend or they just think that it is extremely expensive to go mobile with their websites (of course, you have already know that this is plainly a misconception). You just need to have a little knowledge – by knowing the word “responsive”, you are already ahead of 95% of other websites!
OK, How to Create A Website That Is Mobile Optimized?
What is responsive website design (RWD)?
Though this is a bit technical, you are highly advised not to skip this part to avoid problems in future. This section shows you the concept behind responsive website design and what you should know about RWD.
Fundamentals of responsive website design (RWD)
The formal definition of responsive website design is still heatedly debated. While we would make use of responsive website design, we just need to know that it is a combination of modern technologies which will allow your website look good on every device from as small as an intelligent phone to mega-large screens.
Responsive website design is generally accepted to include the following elements:
- fluid layout – that is it will tend to fill up any width of browser window size
- media queries – it will try to detect the width of browser size and style the layout differently
- flexible images – images will resize to fill up the space provided without trimming
So much for the concepts, let’s see responsive website design in action. You might just consider a webpage is consisted of some boxes. If the page is wide enough, they might appear side by side. But in the case of mobile devices, as the screen width is much smaller, the boxes might need to stack up against one another (like the diagram shown below).
For a more realistic representation, this is a tool helping you to visualize how a website will look in different devices (mainly the standard size of Apple mobile devices). You will just need to enter the website address in the box provided and the website rendered in devices with different widths will be shown on the same page (note that these are just simulations, the website might look a bit different in the real mobile devices). Below is a screen shot for WP Learner website:
Is there other ways to make a website mobile friendly?
Yes, there are a number of services and WordPress plugins claiming that they can turn your website into a mobile optimized one with a few clicks. Though most of them work as advertising, they are actually not doing anything on your existing website but copy the contents just to show them in a mobile format if visitors are viewing the website from mobile devices.
Basically, you need to do the following:
- Sign up the services or install the responsive WordPress plugins.
- Select a pre-made template tailored for the mobile website (note that the look and feel might be vastly different from your existing website).
- Select contents and parts of the website you would like to show on the mobile website.
- The services or plugins will generate the mobile webpages based on your selections.
Note that if you have added new parts or design to the website, you will need to revisit step 3 and 4 to include them. Also, most importantly, as your website theme is not mobile optimized, some of the contents created might not be able to show up properly in mobile devices and the plugin or services might not be able to convert the contents for you automatically. The result: a mobile website with broken layout here or there.
If you are still interested in exploring the mobile optimized services or WordPress plugins, you can find a list below:
- WPtouch Mobile Plugin – a plugin which will automatically switch your website to a mobile theme for your WordPress website if the visit is from mobile devices
- WP Smart Mobile Theme Plugin – gives your website a mobile optimized theme when viewed on mobile devices
- Auto Mobile Theme Switcher – allows you to specify different themes for mobile viewing and desktop viewing
- MobilePress – extract your website contents and show in a mobile optimized interface
- WPReadable – similar to MobilePress, this plugin will make use of your contents in a mobile friendly theme, giving visitors an optimal mobile viewing experience
Actions Steps to Make Your WordPress Website Mobile Friendly
- In the admin area of your WordPress, go to Appearance > Themes and click the button “Add New“.
- In “Feature Filter” check the box “Responsive Layout” and scroll down to click the button “Find Themes“.
- There are close to 300 free responsive WordPress themes for you to choose from!
- Click “Preview” and drag the browser window to view the website design in desktop (right) and in mobile (left).
- You can then install and activate the theme. Congratulations, your website is now mobile optimized!
How to Choose the Perfect Responsive WordPress Themes
There are close to 300 free responsive WordPress themes from which you can choose. Below we will provide some guidances on how to choose the perfect responsive WordPress theme for your website.
- Determine whether you would like to create a website or a blog. A website differs from a blog mainly in the homepage. The homepage of a blog consists of the usually 10 blog titles either with excerpts or the full blog posts while a website usually have a specially crafted homepage with graphics and information other than the blog articles.
- For a website, you should choose a theme with a dedicated home page design. The themes may allow you limited flexibility to change only some texts or images of the pre-designed homepage (e.g. Customizr). Before installing, always click the “Preview” button to view the design – the preview below shows the pre-designed homepage of the Customizr theme.
- Once you have found your perfect theme. Install the WordPress theme. Click the “Live Preview” button to understand what customization options are included in the theme.
- You might also have additional customization options in the by clicking Appearance in the left menu bar and looking for items like “Customize“, “Theme Options“, “[Theme name] Options“, etc. This is not standardized as each theme designer will add the options the way they want. For the Customizr theme, it is named “Customize“. There you can change the color scheme, website logo, the images below the slider plus many other options, etc. Remember to click “Save and Publish” on the top left corner after you have made the changes, otherwise your changes will be lost.
Note: There are some themes offering you a “page builder” which offers you the capabilities to build up a page the way your like it without requiring you to know HTML or CSS (e.g. DIVI, a paid theme which is used to build the many webpages of wplearner.org). They are usually provided with several professional pre-made templates for you to quickly put up a professional homepage. You are advised to consider a paid theme (DIVI for only US$69) if quality is among the top priorities. Below are just several of the pre-made designs offered with the theme.
One Missing Step – Responsive Images
After implementing the responsive WordPress themes, your website will look perfect on all devices. However, that does not mean the job is perfectly done. We have missed one big element – the images. You might ask: no, I see that the images are scaled perfectly to fit the screen. Yes, it is “scaled” to fit, but the original image with the full resolution (around 1080px) is downloaded, even on an intelligent phone with screen width of 320px. That will slow down the download considerably but not add any values to the webpage which is absolutely not ideal. We want quick download in mobile devices. Stay tuned for the next tutorial on “How to Create A Website For Mobile Devices The Lazy Way [Part 2]“. We will again give you a lazy solution to that.
Conclusion
Everyone building a website would like the website to be visited by visitors, and the more visitors the better. As the usage habits of visitors have changed from viewing websites on desktop computers to viewing websites on mobile devices, your website should follow the trend too. Optimizing your website for mobile devices should be among the top priorities after you have created your own website following the “How to Create A Website Guide“. By following the five action steps above to switch to a responsive WordPress theme, you have carried out the most important steps for mobile optimization. Don’t forget the word: “responsive“!
Edward Chung
Latest posts by Edward Chung (see all)
