Get Started Today, It's Easy!

How to Make a Mobile Version of Your Website

How to Create a Mobile Version of Your Website?

Having a mobile version of your website is a must nowadays and the only surefire way to make your web project accessible from mobile devices. So, if you are right about to launch a website, you are bound to take this issue into account to make it a success. Got a website already and wish to update it in order to make it mobile-friendly? The info provided below will come in handy to you as well.

There are several ways to start a mobile website today. The choice of the most suitable solution depends upon several factors such as website type, age and characteristics, your own web design objectives, skills and requirements. The most widespread solutions are as follows:

  • Responsive design creation, when a user visits the same website (which displays differently with regard to special CSS-related rules) from desktop and mobile devices;
  • Separate mobile website version based on the mobile-only approach, when you have two interfaces that work consistently and can even be hosted on different domains/subdomains;
  • Full-fledged mobile app, which can be either a stand-alone product with a pre-designed architecture developed for a certain platform or a separate preview tool (like a web browser) that is applicable to one website only.

Any of these options works great for mobile website creation. It’s up to the owner only to pick the most suitable solution. Let’s have a look at the most widespread (and the most convenient) ways of mobile project development now.

How to Make a Mobile Version of a Website (Website Builder)

If you don’t have a website yet, it makes sense to pick a service that comes with responsive design support and/or has a separate integrated mobile editor. A website builder will work best for this purpose as these platforms are mostly created for the development of mobile-friendly websites and, thus, they initially make all their blocks, widgets and interface elements responsive by default. As a result, projects built with them, display great on desktop and mobile screens without the need to create a separate mobile version. Let’s review this option via the use of Wix website builder.

wix desktop editor

Wix is the world-popular all-in-one SaaS website builder that allows starting/managing any type of web project, be it a blog, a portfolio, a landing page, a business website or even a web store. All the templates available in its extensive gallery (there are over 550 of them here by now) as well as web pages users create from scratch are automatically adapted for mobile browsing.

wix mobile editor

It is possible to separately set up a desktop and mobile website version here, but there is no tablet preview option yet. What you can do here is hiding the selected blocks and interface elements and modifying/setting up unique backgrounds here. What’s more, Wix has specific mobile-related features, such as:

  • Display of the Quick Launch panel (you can add a phone call button, links to social networks/messengers etc. here);
  • The “Up” button;
  • Welcome screen (a kind of animated loading screen that allows displaying emotional greetings or introducing a brand/trademark before you actually access a website);
  • Custom color scheme for Chrome browser panel;
  • The service of automated content and web page layout optimization for mobile devices (this is quite a convenient option for web pages created by inexperienced designers).

Wix also has a mobile app that lets you manage a website, if you get a subscription that includes access to professional business tools.

How to Make a Mobile Version of CMS Website (WordPress)

Like any other CMS, WordPress does not pay attention to a device used to reach a website. The platform just provides the design variant specified in the default settings.

It still makes sense to highlight the services of web developers here as WordPress is one of those CMS, the design of the administrative panel of which can adapt to mobile devices (this means that a website will be convenient not only for visitors, but also for its owner, who will be able to edit, set up and fill it with content from a mobile device). Additionally, there are applications for smartphones that are applicable not only for a classic CMS, but for a cloud WordPress.com platform as well.

Gutenberg WordPress

As a result, a mobile website version proves to be a merit of a template itself in 99% of cases. The only exception is special plugins or scripts that can redirect users to a separate mobile theme (on the basis of screen resolution or device model, for example).

How to Create a Mobile Website Version with WordPress from Scratch

If you are just planning to launch a website, then the problem is not that acute – you just have to pick the right template. The assortment of responsive themes is more than enough even in the official CMS catalogue. You have to make sure the selected design absolutely adheres to the declared functions. The same is about alternative platforms like ThemeForest or TemplateMonster.

templatemonster adaptive theme

If the speed of loading and high PageSpeed Insights parameters really matter to you, then there are special templates that guarantee up to 100 points in profile tests like the Neve theme, for example. However, designs that cannot adapt to smartphone screens, are not quite widespread these days.

How to Replace a WordPress Template with a Responsive One

If you already own a website for quite a long period of time and its template is outdated being initially created to match large-scale screen formats, then you should consider a possibility to replace an old website design with a new one. Such an approach has several advantages, namely:

  • Desktop and mobile website version will have the same style;
  • The need to manage two interface types will be eliminated;
  • You won’t have to write complex functions and algorithms to define the screen resolution and type of device a user has to redirect him/her to the separate design;
  • Commercial themes frequently come with tech support and, thus, you will be able to get answers to all your questions and to set up a new theme not worse than the previous one.

Disadvantages are also available here. Templates often come with written codes of analytics, counters, ad blocks etc. Some of them even introduce separate material types, which triggers the need to transfer all these elements to a new template. All the potential mistakes may have negative impact on the search engine results. If you have regular users, they may not like the idea and may even refuse from visiting your website. Thus, you need to thoroughly analyze the upcoming design switch to consider all the possible nuances.

How to Make an Outdated Template Responsive

The idea of making an outdated template responsive is not as complicated as it may initially seem. However, it doesn’t really make sense to try it, if you lack niche skills or at least web design basics. Anyway, there is always a possibility to hire a web designer to help you with that.

The main idea is to add CSS media queries, based on which cascading styles will be specially added for the required screen resolutions. Have a look at the example now:

@media screen and (max-width: 479px) {
...These are style sheets that will be applied exclusively for screens,
the width of which does not exceed 479 pixels, that is, for smartphones
in the portrait format... 
}
@media screen and (min-width:480px) and (max-width:800px) {
...CSS styles here will be developed for screens with the width from
480 up to 800 pixels, for example, on smartphones with horizontal screen position...
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
...These are styles for tablets in vertical and horizontal positions...
}

For instance, if your main grid looked like this:

desktop version

It will have the following look in HTML:

<div class="main page box">
    <div class="profile box">Guest profile</div>
    <div class="article box">Main article</div>
    <div class="sidebar box">Sidebar</div>
</div>

Styles for these boxes are placed in CSS template files with the dot standing in the beginning signifying that this is the CSS class:

.main web page box {
width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)
}
.profile box {
width: 280px; (the width may also be provided in percentage form - width: 25%;)
float: left; (right-edge wrap)
}
.article box {
width: 600px; (the width may be provided in percentage form - width: 50%;)
float: left; (left-edge wrap) 
}
.sidebar box {
width: 400px; (the width may be provided in percentage form - width: 25%;)
float: left; (right-edge wrap)
}

If we replace the fixed or relative width with 100% for the suggested screen resolution, then the grid will look as follows:

mobile version

To reach such result, it is enough to add the media query to the style sheets (the example provided below is applicable for all devices with the screen width of 1024 pixels and below):

@media only screen and (max-device-width: 1024px) {
.main web page box {
width: 100%; (full width)
}
.profile box {
width: 100%; (full width)
float: left; (right-edge wrap)
}
.article box {
width: 100%; (full width)
float: left; (right-edge wrap)
}
.sidebar box {
width: 100%; (full width)
float: left; (right-edge wrap)
}
}

Mind that the comments provided in brackets are mentioned exclusively as a sample, they cannot be transferred to the actual CSS code.

What pitfalls can emerge with such responsive design realization? Unfortunately, there are many of them:

  • The entire web page layout may be violated as not only key blocks available on a page may have fixed width. These can also be images, news blocks on a homepage/in a category, author’s description blocks and other elements. It is impossible to identify all of them at once. Each of them will have to be edited as soon as it is identified.
  • The web page volume won’t change, which will have negative impact upon the download speed with slow Internet connection (no optimization will be possible under such conditions).
  • According to the search engine recommendations, fonts on mobile devices should be easily readable without zooming out. This will trigger the need to redefine all the font sizes for headings, body texts, quotes, lists (numbered and unnumbered) etc.
  • A header and a complex menu should be completely remade. It makes sense to leave a small website logo only, a search icon (if you have this option) and a profile icon (if an authorization system is used). A desktop menu should better be hidden and replaced with a “sandwich” icon (menu icon). In the majority of popular responsive templates, this is implemented by two parallel menus: the first one is meant for desktop screens and it is displayed on PC only, while the second one is meant for mobile devices only (it is displayed on the basis of the same media queries on mobile devices only).
  • If the structure of the main boxes differs, for examples, the sidebar is displayed on the left but not on the right, while all the widgets will be displayed in front of the main content, although, it is more logical to place them lower.
  • Apart from CSS files, website styles can be replaced with JS scripts it will be more difficult to find and edit them.

These are only some of the potential pitfalls. Thus, it makes sense to hire a web design expert to complete the task.

The advantages of media queries make it possible to delete the incorrect code any time. These styles are not displayed on the main website.

How to Add a Responsive Website Version with Plugins

Some CMS use their own extension sets, while others don’t have them at all. WordPress coed with the most remarkable plugins for responsive website creation, namely:

  • Jetpack – the automated mobile version creation feature has been discontinued since March 2020;
  • WPtouch – is available in free and paid versions, the extension has its own plugins and themes like separate cache organization plugin, web app creation plugin, image optimization plugin, AMP creation plugin etc. The process of switching from desktop to mobile theme with WPtouch is completed without changing web page URLs, which matters a lot for SEO;
  • WP Mobile Menu – responsive menu for mobile devices (it will come in handy to you, if you need to replace a bulky and complex menu of the desktop website version with a responsive and compact menu for mobile devices);
  • WP Mobile Detect – the plugin initially defines that a person uses a mobile device and provides the result as a true/false value. This makes it applicable for the implementation of the template switch option or for the display of certain interface blocks;
  • WP Mobile Edition – the plugin can convert WordPress websites into full-featured web apps. Users can add a website icon to their smartphone/tablet desktops to use it in the full screen format (without any frames and browser tabs);
  • Mobile Smart – a plugin identifies that the device refers to the mobile class and then switches the themes to the alternative one, which is compatible with mobile devices. A Pro version comes with integrated support of mobile menus, special widgets, plugin management option (a separate set can be provided for mobile devices), domain switch (for the implementation of correct work of two independent website versions) etc.

Web developers have made sure that the extensions remained unclaimed as many website owners have decided to switch to responsive template versions. Thus, the majority of these plugins have not been updated for quite a long period of time, which may result in the incompatibility with the current version of the platform. The only exception is WPtouch.

Work with each plugin will have its own peculiarities. Some of them offer ready-made mobile templates, while others recommend downloading third-party extensions or creating those of their own.

If you give preference to working with a mobile website version on the subdomain/alternative address, then here are the nuances you should be aware of:

  • These are different websites for the search engines and it’s really bad that their content is not unique;
  • To make the search engines “glue” the URL and understand that this is the same website, all the link attributes should be properly organized:
    • Attribute link … rel=”alternate” href=“URL-mobile page” – for desktop versions;
    • Attribute link … rel=”canonical” href=“URL-desktop web pages” – for mobile templates.
  • If the content on different web page versions differs, you run a risk of getting sanctions for cloaking (for content replacement).

How to Make Mobile Version of HTML Website

As far as HTML websites don’t have dynamic functions, you won’t be able to analyze a screen resolution of a device and to switch from a desktop template to the mobile theme based on the result. All you need is to completely redesign the layout grid and styles of the problematic elements.

We have already reviewed how to do that – this is done via media queries. The most difficult to adapt layouts are those with fixed width and position of elements.

Nothing will work out without specialized niche skills and CSS/HTML code immersion. It makes sense to either hire a web design pro right from the start or to change the design to another one you can buy or order, or simply develop a brand new web page from scratch, for example, using Mobirise offline website builder, for example. Finally, it may be high time to move to the cloud infrastructure and to choose one of online website builders.

Separate Sites for Mobile and Desktop or One Website: Which Is Better?

As mentioned above, having a mobile website is a must for any business owner. This is a surefire way to ensure quality business presentation on the web, generate traffic and guarantee the unsurpassed user experience. The question is: does it make sense to create two separate website versions for mobile and desktop screens or to build a responsive website that will display great on both types of devices?

Generally, starting one responsive website is a more effective and practical solution. It eliminates the need to create two different websites with diverse domains/subdomains, URLs and internal structure. Such sites often confuse visitors and they may trigger problems, when it comes to SEO optimization, internet marketing and other related promotion methods. Instead, you get one project that will display equally well on desktop and mobile screens.

How Much Does a Website Mobile Version Cost?

The cost of a website mobile version generally depends on a platform you start it with. If you choose an online website builder like Wix, it may be absolutely free as the system lets you create websites that are mobile-ready by default. However, free Wix plan does not let you connect your own domain name, which will make it impossible to get the most out of your project performance.

As far as Wix has quite a distinctive and versatile pricing policy, you can pick any of its plans to launch a website. Just consider your web design objectives, project type and specialization as well as budget you are ready to invest into it, while choosing the most preferable subscription. Each Wix plan comes with a broad range of special features and terms that affect the final cost. The cheapest Website subscription will cost you $13/mo, while the price of the most affordable Business Basic plan starts from $23/mo.

Have you made up your mind to use WordPress for responsive website creation? Then the cost of the project will eventually depend upon the price of plugins you will go for. WordPress extensions are generally positioned as free ones, but a part of their features still becomes available after you upgrade to the Pro version. For example, the cost of WPtouch Pro will range from $79 up to $359 per year. That is exactly why, it seems reasonable to switch to a ready-made responsive template. Such themes are bought once, while their cost constitutes around $40-80. In case you still decide to hire a professional web developer to redesign an outdated theme for you the cost will be discussed individually depending upon the project complexity.

Bottom Line

It’s no secret that any website should have a mobile version to stay in demand with the target audience today. There are almost on people who don’t use their mobile devices to browse the web, looking for the services and products they need. Thus, the process of your website mobile optimization will eventually depend upon the selected platform.

If you are just planning to launch a website, it makes sense to give preference to one of the most popular online website builders. Wix will work best for this purpose. In case you already run a website powered by the CMS like WordPress, then it is better to replace it with a responsive theme. Plugins that offer mobile support, however, may be quite expensive, while a complete template redesign will be a real challenge, especially if you intend to cope with the task independently.

Anyway, it does not make any sense to create a separate mobile version of your website. You will face problems related to project development and its further support. A far simpler and reasonable solution is to make your website mobile-responsive from the start.

Howard

About the Author

I'm Howard Steele, the founder and editor-in-chief of this website. With over 10 years of web building I know how complicated and tiresome this task can be for a non-IT person. Can’t decide which service to choose? Feel free to ask me for advice. Just describe your website needs, and I’ll gladly help you.

» Helpful Tips » How to Make a Mobile Version of Your Website