Mobile version template. Problems with sprites and pictures

In the modern world, sometimes having your own website is as important as, for example, having a phone number or email address. Unfortunately, not everyone can create a beautiful professional website on their own, and sometimes it doesn’t even work out. Ordering from programmers is also not an ideal solution, since not everyone can afford it.

Free HTML website templates will help you get out of this situation. An HTML website template is a set of ready-made static pages for a website on a specific topic. Using this template, you can create a simple website in just a couple of hours, provided you have basic knowledge of HTML markup. In the HTML section, you will gain this knowledge if you spend a couple more hours studying, and if you take the time to study the CSS section, you will be able to fully control the design of HTML website templates and customize them completely to suit your needs.

Another undeniable advantage of website templates is that in most cases they are written by professionals. A professional website template means not only a beautiful and modern design, but also the way the code is written. Search engines look at how your website is written, whether the code is SEO optimized or not, and based on this they lower or increase your position in the search results. Therefore, a good website should not only be beautiful and modern, which is important, but also correctly written in terms of code.

Download free HTML website templates and create your projects in no time.

A mobile website template is an indispensable solution for a modern website that must meet the highest requirements. Any quality web resource must have a design that adapts to mobile devices, and for this the template must be adaptive or responsive. WordPress templates, in particular, have this feature. The websites of many global brands operate on the basis of this platform, for example, Harvard Business Review, singer Katy Perry, the science fiction saga Star Wars and Mercedes-Benz. All of these sites are adapted for mobile devices, which is a significant advantage.

Now it is very important that the site is optimized not only for search engines, but also adapted for mobile devices. This is primarily due to the increasing popularity of smartphones and tablets among ordinary users. If your site is not “friendly” to mobile devices, it will look at least awkward: small fonts, text that doesn’t fit on the screen that you have to scroll to the right, huge images and a bunch of other troubles. A mobile user will simply leave such a site for your competitor’s site. The importance of adaptation for mobile sites is also dictated by the fact that mobile traffic in the total share can reach up to 50%. By initially forgetting that the site must have a responsive or adaptive design, you risk not only losing a huge part of your potential audience, but also reducing your chances of success in general.

Premium WordPress templates provide a complete solution that will become a confident basis for your site of any type: blog, magazine, online store, corporate site, gym site, cinema site, non-profit organization and so on. In addition to the fact that the design of such templates is made at the highest level and does not contain any flaws either in the code or in the layout, it is also responsive.

By choosing a WordPress template and this platform, you can be sure that your site will not only be aimed at attracting visitors, but will also work well on any device and browser. To save your time, we decided, together with our specialists, to make a small selection of such templates for various purposes. Choose what you like and create a successful website right now.

Mobile Website Template Flatsome – Multipurpose and Responsive WordPress Theme

Flatsome is an excellent choice for creating a website of any type, be it a blog, a store, a portfolio, etc. The versatility of this theme is also expressed in its excellent adaptability to various types of devices and all screen sizes. The theme will look and work great on both mobile devices, laptops and personal computers. A simple Drag and Drop page editor will allow you to create and edit your website pages the way you want. The theme is also equipped with the WooCommerce plugin, so you will have the opportunity to create your own online store.

Porto is a great and colorful WordPress theme

Porto is a versatile and fully responsive business WordPress WooCommerce theme that is also suitable for creating any kind of website. Porto gives you the opportunity to take advantage of many elements and powerful features that will help you customize everything you want. Compared to the features of other universal themes, Porto features advanced WooCommerce features, exclusive page layouts, design customization features, and more. Porto guarantees super fast performance on all devices, which is very important for any business and online stores.

Puca – Mobile Optimized WordPress WooCommerce Theme

Puca is an extremely flexible and customizable WP WooCommerce theme that can be installed and customized to your liking within minutes by quickly importing demo layouts. Puca can be used for various purposes: Fashion stores, furniture stores, electronics stores, etc. The theme is fully compatible with all SEO standards, which will help your business rank top in Google search. All Puca pages are fully responsive so they can be viewed regardless of device type or display size.

Mobile website templates for businessLawyer & Attorney – template for a website for a lawyer, lawyer and notary office


This is a universal legal template that can also be used in the financial sector. To create a website on it, you need to import a ready-made website or create it yourself through the drag-and-drop interface of the builder. A ready-made website with a targeted design has standard sections with areas of legal practice, examples of successfully completed cases, team members and work hours. You can add a form to sign up for a free legal consultation.

In addition to being responsive and working well with touch devices, the template also supports SEO plugins and has fast loading speeds despite the use of CSS animations. You can add beautiful icons (1200+ pieces) and a slider with amazing effects to the site.

Houzez – real estate agency mobile website template


This is not just a template for a realtor or real estate agency. On its basis, you can get a full-fledged real estate management system with the ability to place them in the catalogue. This will increase the flow of customers to your website. There are several demos to import. You can use the parallax effect and add video to the background.

The catalog supports multiple layouts for displaying items in a list or grid, as well as page layouts for individual items. The search is carried out according to various criteria: size, type, cost, location and amenities. When searching for property, the user can see objects located nearby. You can examine the object in detail using the “360° Virtual Tour” function. The template supports professional plugins iHomeFinder and dsIDXpress.

Total – a universal website template for mobile devices for any business


One of the best-selling templates on ThemeForest for use in various fields: interior design, development, SEO, service industry, construction, medicine and so on. You can install one of the demo themes for your application, but if you have time, take the time to use Visual Composer's drag-and-drop builder tool to get a truly unique design. For this, there are special modules for portfolios, reviews, personnel, galleries and other sections.

The template supports store, forum and slider functions. With the Events Calendar plugin you can plan, add and invite to events, and with the Contact Form 7 plugin you can add a convenient contact form to your site. Yoast SEO plugin support.

Mobile Website Templates – Blog and MagazineSoledad – Conceptual Mobile WordPress Website Template for Blog and Magazine


This is the best selling template in the Blog & Magazine category for 2016. To configure it, use the Live Customizer tool, which works in real-time mode and supports more than 300 options. Also, to customize or create a website from scratch, there is the Visual Composer plugin. Over 900+ homepage options for magazines and blogs on various topics (travel, music, videos, games, movies, food, health, cars, fashion and so on) and 300+ slider layouts. Five post layouts, three sidebar layouts, and six portfolio layouts. Stunning gallery grids.

Caress – a full-fledged mobile blog template for WordPress


Caress theme has a clean and fresh design that can be easily customized to suit your needs. To do this, the Live Customizer tool has 70+ different options. The template is especially suitable for bloggers who upload a lot of graphic content - it provides support for uploading high-resolution photos, organizing galleries and adding videos that will look very harmonious in posts.

There are 14 layouts available for blog and category design. Two types of slider with sticky posts. You can also make the sidebar sticky and add a WooCommerce store product section and nine widgets for social networks and posts. The footer also has areas for widgets, including an Instagram photo carousel.

Vlog – WordPress video blog or magazine template


This masterfully designed template is strictly focused on presenting videos on various topics. This could be a vlog, a website with video tutorials, or a magazine for viral videos. To do this, it is fully compatible with well-known video services YouTube, Vimeo and Dailymotion.

The template supports over 200 exquisite layouts and features to beautifully present text and video content the way you want. Using the Series plugin, you can group and create playlists from articles and videos, which is very convenient for educational videos. The Video Thumbnails plugin will help you set up a thumbnail image for your video. Similar to YouTube, visitors can expand the video to full screen or watch it later. By placing banners, you can earn money from advertising.

Website templates for mobile devices – Online storesOxygen – WooCommerce store theme with customization options


Oxygen's custom mobile website template will help you get a store with a sophisticated design and support for basic features to sell products. For pages, you can create your own layouts absolutely free using Visual Composer. A slide show will help attract potential buyers to popular products, promotions and special offers. Navigation can be designed with a fixed side menu, which can be very convenient.

Using the interactive module, buyers will be able to quickly view the product they are interested in without leaving the catalog page. The best products can be added to your wishlist or to your shopping cart, which is always available at the top of the site. Some products can also be designed as a lookbook. The theme has a responsive design and fully supports all gestures from mobile devices.

Savoy – minimalist style online store template based on AJAX


The Savoy theme has a simple yet beautiful design that allows you to focus on the products you sell. AJAX functionality will be convenient on both desktop PCs and mobile devices. Its advantage is that the user does not need to go to a separate page to perform some action. In particular, simple Ajax search for products is supported.

To optimize store performance, the “lazy loading” function of product photos is used. Support for a full-screen product gallery with the ability to zoom in on the image. Support quick view, wishlist and login/registration form in popup window.

There are several blog page layouts. Sliders and galleries respond freely to mobile touch gestures.

Different templates for websites that support mobile devicesBellevue – a template for a mobile hotel website that supports booking services


This theme has seven demos for various website options, including a one-page one. The premium version of the WP Booking System plugin will provide visitors with the ability to easily book a room at your hotel. With Events Calendar, you can add important events to your calendar with support for Apple's iCal and export to Gmail. There is also MasterSlider with support for mobile gestures.

The parallax effect will make the site visually more attractive. The blog is available in two layouts: standard and Masonry. Stunning page layouts for rooms and rooms. A set of 1300+ clear and scalable vector icons, as well as CSS3 animations, will help you decorate your site. For conversion, you can add any form to the site. Support for seasonal discounts and payments via WooCommerce.

Sport – sports club template for WordPress


Sport is a specialized mobile website template for a sports club, center or community. The design is simple and clean, so your site will be comfortable to use both from a regular PC and from mobile devices, including iPhone and iPad with increased requirements for image quality.

The kit includes two ready-made sites with two color schemes, which are easily customized through the admin panel. To create a header, there is a special builder with support for 40 options for advertisements and links to social networks. Four gallery types: Isotope, Masonry, with slider and Singles. Support for forum, social network, event calendar and online store plugins will be very useful for a sports club website.

Choose only a high-quality mobile website template for your purposes, and you definitely won’t regret it. Even more themes for mobile sites can be found in our reviews - and.

Alexander is the founder of the “Web Laboratory of Success” website project, created to support beginning and continuing Internet entrepreneurs. He is a convinced workaholic with professional experience in managing the editorial office of an online magazine, creating and managing his own online store. Main occupation: promoting businesses (including online stores) through Facebook and Google Adwords. Main hobby: monetizing websites through affiliate marketing tools and Google Adsense. Personal confirmed records: 3 million blog visitors per month.

Greetings, my dear blog readers. Ruslan Galiulin is in touch. Today we will talk about mobile versions of websites that every website or blog should have in order to move up to the TOP of search engines. In the article I will provide style codes and ready-made examples of page layout that you can download to your computer.

If your site is still not mobile, I recommend using my advice or contacting professionals - http://www.Mobile-version.ru who will do everything according to search engine standards. Using the same link, you can check your site for mobility.

In 2013, Google began putting pressure on webmasters (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convincing them of the need to create lightweight site modifications, and since 2015, mobility has become one of the ranking aspects (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex is not far behind, having created a special “Vladivostok” algorithm that takes into account the site’s suitability for viewing on phones.

Mobile Friendly today is not just about taking care of visitors, but an indispensable condition for promotion.

When a website is created from scratch, the Mobile First approach is used. But most have old work projects. The main question that the mobile version of the site raises in such situations is how to make it without spoiling the existing template?

There are three approaches:

  • A separate address and layout - placed on a subdomain like m.site.ru. Redirection occurs through a server redirect to the user agent.
  • Responsive design - the url and html remain the same as in the desktop format, but in CSS media queries provide rules for different screens.
  • RESS is a responsive design, the address remains the same, but the server sends style sets depending on what type of hardware is requesting the page.

For owners of old projects, the best choice is to use adaptive layout. Let’s look at how to do this with your own hands and without using unsafe plugins step by step.

Mobile version of the site: how to do it right

Further actions will require solid basic knowledge of html and css or the ability to quickly google incomprehensible things.

Information for beginners: in CSS, the words before the curly braces mean specific pieces of the html file for which they are responsible for displaying. They are often written with a dot or hash - #place (property: value;).

Step 1. Remove restrictions.

Owners of rubber layouts can skip this step. The rest will have to work harder.

Width - we look for large sections in the code with a rigidly defined display. If the parameter is specified in pixels or points, you need to change its value to percentages, ems and other units that are sensitive to the environment. Often the main container or content area has a fixed width - in most cases the restrictions are removed by replacing it with max-width.

Pictures - instead of clear sizes, we write properties for the img tag, which will make the images adaptable. Photos will change proportions within their parent containers.

img (

Max-width: 100%;

Height: auto;

Tables - you won’t be able to set them to be fully responsive, but you can make pages with them suitable for mobile devices by adding this code:

table (

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Wraps are specified by the float property. Setting this parameter will allow blocks to move depending on window parameters, adjusting to elements with a stable position or within parent containers. Standard div elements are placed on a new line by default. For example, placing 1000 px div blocks of 200 px each in a container, you can see the following picture.

The blocks stood on top of each other. Adding a wrap removes line breaks and lines up the elements in all available space.

Step 2: Plan your content reorganization.

Find out what parts of your desktop site should be displayed on mobile devices. To do this, answer yourself these questions:

  • Which blocks perform only decorative functions? - Most often these are sliders, sidebar decorations, questionnaires, random photos.
  • What do visitors ignore? - Heat maps of clicks and paths will help answer this question. We will ruthlessly hide the least active elements.
  • What must remain in the mobile version? - Usually this is advertising, a feedback form, subscriptions or social media buttons.
  • Think about how the site should look on tablets, smartphones and small old phones - you can set a different look for each device.

Step 3. Convenience.

Navigation: phone screens are too small; a regular website menu rarely fits into such a frame. It is customary to install a menu that drops down using a button.

Content Area: For phones, it's common to set the body width in CSS to 100%, depending on the available space. This means that text, modules, advertising, and sidebar content will be displayed in one column on small devices.

Sensors: Fingers are not as precise as a mouse, give them plenty of room. The space around links and other active elements must be at least 28 x 28 pixels.

Help your visitors define active space - indents, highlights, color changes and other things that can be set for touches, write a hover pseudo-class for links and buttons.

Implementation of Media Queries with examples

If you've ever created CSS tables for printing, you already have an idea of ​​the possibilities of assigning individual styles depending on conditions.

Media queries are logical expressions; accessing them implies an answer with a true or false parameter. If the query result is true, that is, the user agent or device dimensions match the specified media type, then the style rules specified inside the media block are automatically applied.

Media queries can be assigned according to the following parameters:

  • browser window width and height;
  • device width and height;
  • orientation - landscape or portrait mode;
  • screen resolution.

The current list of arguments is available in the official specification.

Let's move on to examples. There is a ready-made template, the size of its content part is 1000 pixels, all internal elements and details are configured in relation to this parameter.

If the user's screen is narrower than the specified content part, a scroll bar will appear. Floating design elements can behave in unpredictable ways - bumping into each other, blurring, or narrowing too much.

First of all, we remove the fixed size that creates the band so that it does not interfere with the settings. In our template, this is the navigation wrapper. In a reader layout, this can be one or more elements. If you find it difficult to determine, open the browser developer tools - using the block model view, find the element that does not fit into the screen dimensions.

To fix this, remove the fixed frames by writing in the template styles:

@media only screen and (max-width: 1000px) (

Nav (width: 100%; )

Now, if the user’s screen width is less than 1000 px, then the width of the menu will be equal to 100% of its size. The main version of the template looks the same as before. Replacing the property removed the bottom scroll bar when shrinking the screen.

But the blocks still look dubious - let's change their display, increasing the width as a percentage to the required size.

We add to the same mediaquery:

Block (width: 35%;)

How to find out the optimal sizes for the blocks of your site? Calculate manually or take any ready-made grid as a basis - fluid grid. You can focus on existing standards: in two-column layouts with a window width of 980-1050px, the wrapper is taken as 95%, the content - 60%, and 30% is left for the sidebar. The remaining space is used to form borders and margins for neatness.

However, you can use box-sizing for the content so as not to calculate pixels each time, but to work according to the overall dimensions.

Let's move on to setting display on screens with lower resolution:

@media only screen and (max-width: 600px) (

Block (

Float:none;

Width:85%;

Margin: 1em auto;

If the screen is less than 600 px, then our blocks should fit into one column - remove the wrappings, set new indents, center and change the width. Most often it is set to 100%, but if for some reason this is inconvenient, we set our own size.

This way you can set not only the dimensions of content blocks, but also their display. For example, prohibit the display of large elements, replacing them with any convenient ones.

Let's demonstrate the possibilities using the example of changing colors and displays.

The smartphone version hides the main menu and turns the block color blue, while the larger screen displays the design without these changes.

Hiding the navigation is required in most cases - it is replaced with a button. It is more appropriate to do this using javascript; you can use ready-made solutions.

Edits are made pointwise, the range can be limited both above and below. It's fast and convenient - in one line you can set separate CSS for different devices, without affecting the main view of the site.

You can declare @media rules anywhere within an existing style sheet, or you can create a separate one for these declarations, and then import it into the main CSS using the @import rule.

Mobile version of the site: how to do it and what to pay attention to

MediaQuery is understood by all modern browsers, but it will not work in IE 8 and below. The problem is solved by turning to older IEs using conditional comments. They need to be written in the template code, not in the CSS.

The script itself is available on GitHub (https://github.com/scottjehl/Respond), adds support for minimum and maximum dimensions and media queries to old IE.

Another problem is that responsive design involves the use of Html5, which is again incomprehensible to older browsers. Treated with hack:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

The code is written in html; in addition, block display of the created elements is set in CSS:

header, nav, section, article, aside, footer (display:block;)

Let's immediately touch on the question - how to make sure that some scripts are displayed only with the specified screen parameters. If you use jquery, you will need to add a simple script to the template code. The numbers change to the required ones. It reads like this: if the window width exceeds 980 pixels, the script specified in the path is applied to the page. You can specify several, the syntax is written by analogy using a semicolon inside curly braces.

If ($(document).width() > 980) (

$.getScript("path to script");

Another point is how the iPhone’s mobile browser should process the transmitted content, and whether its increase is allowed. To do this, an initial scale is written in head:

All that remains is to check the correctness - for this you can use your own browser and phone or turn to services.

If the site is being redesigned on a local server, correctness can be determined in ami.responsivedesign.is . For correct display, Denver owners will need to change the encoding to utf-8 by editing the server httpd.conf file.

The service will demonstrate what the project looks like on different devices.

Additionally, the template is tested https://developers.google.com/speed/pagespeed/insights/ or in a special form https://www.google.com/webmasters/tools/mobile-friendly, as well as in webmasters.

In Yandex this looks detailed, but Google will simply report that there are no problems.

If everything is done correctly, there will be no scrolling or unnecessary elements. The mobile version is ready, and now you have learned how to make it yourself. If the material was useful to you, then like and subscribe to the blog newsletter. All the best.

Below, by clicking on one of the buttons, you can download 2 examples of the folded page in this lesson and just work with the finished pages and copy the code.

Sincerely, Galiulin Ruslan.

    There is a solution

    Question about the subject. Actually, I understand that?mobile=1 removes the “nomobile” flag in the session file. If this parameter is specified in the desktop version of the browser, then the mobile version template is not connected. If on mobile devices, then...

    Here is the completed version for Shop-Script 6: public static function isMobile($check = true) ( ​​if ($check) ( if (self::get("nomobile") !== null) ( if (self::get( "nomobile")) ( waSystem::getInstance()->getStorage()->write("nomobile", false); ) ) elseif (self::get("mobile")) ( waSystem::getInstance()- >getStorage()->write("nomobile", true);...

    We have a website http://kotofey.md (parked to webasyst), it is a mirror of https://kotofey.webasyst.cloud (facebook template) on the basis of which the online store application on facebook is made - https://www.facebook .com/kotofey.md/app/2151596388...is...

    Change menu items in the mobile version

    The site menu is now displayed. You need to make sure that the store menu is displayed with information about delivery, etc. Mobile version template "mobile"

    ONLINE STORE MOBILE VERSION

    COMPLETELY CUSTOMIZE THE EXPRESS SHOP MOBILE VERSION TEMPLATE AND MAKE AN ONLINE STORE.

    Layout of the mobile version of the site

    Colleagues, good afternoon. After an unsuccessful experience working with one of the experts from this forum (the work lasted from December 10, 2016 but was never completed, and now the developer has completely disappeared), I am asking you to complete a full-fledged mobile version...

    Good afternoon, I came across a very strange interpretation from developers about what a mobile device is and what it is not. When in the Webasyst settings (Site or Store) I enable the "Mobile theme" option (Theme for...

    Dear developers, watch this video, it shows a man...

    There is a solution

    Good day. I need to display different content depending on the mobile or desktop version. How can I check whether the mobile version is now or not in the template code?

    (if $wa->isMobile()) .... (/if)

    +1

    There is a solution

    Please tell me how you can hide this or that block, element, etc. in the template, in the mobile version of the site. The task is to remove several elements from the mobile version because they are not displayed correctly in size.

    Can you tell me a little more about CSS?

    Make min. order amount in the mobile version and insert a picture.

    Need to do:1) Min. the order amount in the mobile version of the site (in the regular version it is written in the cart.js template, and in the mobile version)2) Insert a picture on the site page so that it expands to full size when clicked.

    Good afternoon! There is the following situation: the mobile version of the site seems to work as it should, but for some pages, in particular the buyer’s personal account, the desktop template is loaded, although there is a mobile version. Tell me where I need to fix it so that...

    In order to defeat the hordes of bots that were registering every day, I had to install Google Recaptcha v.2, the bots disappeared, but if the “I’m not a robot” checkbox does not work for ordinary people and the check pops up, then in the mobile version of the site (template:...

    There is a solution

    Good afternoon, tell me which file to register the counter in and will it be displayed in the same form as on the website? From the main template to the mobile one, I transferred the file liveInternet.js, which contains the counter code, but now I paste it into the mobile version of the site: