QuestionsAnswered.net
What's Your Question?
How Does HTML Code Work?
HTML is to a website what a solid foundation is to a house. Without HTML code, web developers wouldn’t have anything to build on. In other words, you wouldn’t be able to read this article without proper HTML code. Learn more about how this important language works.
What Is HTML?
HTML stands for hypertext markup language, and it’s used to lay out the basic structure of a website. You can build a simple website with HTML alone, including different font sizes and types, paragraphs, photos, background colors and other basic features. If you want to make your site look modern and nicely organized, though, you’ll need to learn additional languages like CSS and JavaScript.
The Basics of How HTML Works
Writing HTML code is basically like writing instructions for a web browser on how to display a website. For example, if you write HTML background color code specifying that your site should have a blue background, browsers read the code you’ve written and follow those instructions. The actual processes behind this are complicated and involve the transfer of data through the internet. If you’re interested in designing your own websites without using templates, though, it’s not so important to understand the technical specifics of how websites are rendered in a browser. It’s enough to know that HTML is an important part of this process, and that you need to have a good HTML structure in place if you want to build a functional, attractive website.
Understanding HTML Code
HTML is often taught as an introductory coding language because it’s ultimately pretty simple. To write HTML code, all you have to do is understand the proper syntax for communicating with a computer. You’ll also need to know the right instructions to include. These instructions are known as elements. Elements consist of tags and content. There are two tags, opening and closing, that must always bookend your content. The content between these tags is what you want to display on your site, and consist of text you write, hyperlinks to other websites, links to photos and more. If you fail to use the right symbols and characters in your opening and closing tags, your HTML will not work properly. If you do use the right tags, only the content will display on a web browser.
HTML Essentials
This is content for HTML code.
Learning HTML
HTML is an important building block for a website, but the good news is that it really isn’t that complicated to learn. There are a lot of free online resources available for those who want to dig in and learn how to use HTML to build websites, and that means not only that you’ll have guidance getting started but also that you’ll have plenty of resources to turn to for information as you learn on your own.
MORE FROM QUESTIONSANSWERED.NET
Convert Your Website to HTML
How to save your web pages as html.
- PHP Programming
- Java Programming
- Javascript Programming
- Delphi Programming
- C & C++ Programming
- Ruby Programming
- Visual Basic
- Alvernia College
- Strayer University
Did you create your site with a website editor? Many people make their first site with a web creation tool when they first decide to build a web page , but later, they decide that HTML would be a better fit. What to do when you have a site created via website editor, but you don't know how to update it as part of your new HTML-created site? Never fear, here's how to convert your original web project to HTML.
How to Get the HTML for the Web Pages You Created
If you created your pages with a software program , you can get to the HTML to change the pages by using the HTML option that comes with the program. If you used an online tool, you may or may not have the option to change your pages using HTML. Some creation tools have an HTML option or a Source option. Look for these or open the menu for advanced tools to search for these options to work with the HTML for your pages.
Salvaging Your Live Web Pages in HTML
If your hosting service doesn't offer the option of getting the HTML from the editor, you don't have to forget about, or trash, your old pages. You can still use them, but first, you must salvage them and save them from the fate they have endured.
Salvaging your pages and turning them into something that you can change with HTML is easy. The simplest way to do this is to open the page in your browser. Now right-click on the page and select View Page Source .
You can also view the page source through the browser menu. In Internet Explorer, it is accessed through the View menu and then select Source . The HTML code for the page will open in a text editor or as a new browser tab.
After you have opened the source code for your page, you will need to save it to your computer. If it opened in a text editor such as NotePad , click on File , then scroll down and click Save as . Choose the directory where you want your file saved to, give your page a file name, and click Save .
If it opened in a browser tab, right-click on the page, select Save or Save as and save the file to your computer. One caveat is that sometimes when you save the page, it eliminates the line breaks. When you open it for editing, everything runs together. You can try instead to highlight the HTML you see in the View Source page tab, copy that with a Control + C and then paste it into an open NotePad window with a Control + V . That may or may not preserve line breaks, but is worth a try.
Working With Your Salvaged HTML Web Pages
You have now salvaged your webpage. If you want to edit it using HTML, you can open your text editor, edit it on your computer and then FTP it to your new site or you can copy/paste it into the online editor your hosting service provides.
Now you can begin adding your old web pages to your new website.
:max_bytes(150000):strip_icc():format(webp)/Codong_islander11-05d41c049f304cf8bd26410300a2bf37.jpg "make html website mobile friendly")
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
HTML Tutorial
Html graphics, html examples, html references, html responsive web design.
Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
Try it Yourself »
Setting The Viewport
To create a responsive website, add the following <meta> tag to all your web pages:
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.
Advertisement
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below changes depending on the width:
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the text size scales.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Media Queries
In addition to resize text and images, it is also common to use media queries in responsive web pages.
With media queries you can define completely different styles for different browser sizes.
Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:
Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial .
Responsive Web Page - Full Example
A responsive web page should look good on large desktop screens and on small mobile phones.
Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.
* no credit card required
Responsive Web Design - Frameworks
All popular CSS Frameworks offer responsive design.
They are free, and easy to use.
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.
W3.CSS is smaller and faster than similar CSS frameworks.
W3.CSS is designed to be independent of jQuery or any other JavaScript library.
W3.CSS Demo
Resize the page to see the responsiveness!
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
To learn more about W3.CSS, read our W3.CSS Tutorial .
Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.
To learn more about Bootstrap, go to our Bootstrap Tutorial .
COLOR PICKER
Get your certification today!
Get certified by completing a course today!
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
[email protected]
Your Suggestion:
Thank you for helping us.
Your message has been sent to W3Schools.
Top Tutorials
Top references, top examples, web certificates, get certified.
Make Your HTML-Website Suitable for Mobile Devices
Introduction: Make Your HTML-Website Suitable for Mobile Devices
First I was not satisfied when I visited a desktop optimized Website on a smartphone. The fonts are too tiny, you have pan and zoom in/out all the time, the links are always hard to target. So I had to do some research how to make a website mobile suitable in relation to the display size. Responsive (Web)Design is one possible solution. The Good: -Only basic HTML/CSS knowledge is required -No additional App Programming/Installation The Bad: -You can't make (easily) a CMS created Website into a responsive site. -I haven't tried it yet, but there is a CMS OS Project with responsive functionality, take a look at: http://www.fork-cms.com/
Step 1: Some Illustration
A responsive website behaves like a spring that fits in any size of space. You can stretch and compress it. If you change the structure, the spring itself doesn't affect on number of foldings or windings (threads). The 'information' remains the same. You don't have to write everything new. A HTML-file contains information of a website, the CSS file defines the layout structure. That means you only have to add a new tag in an existing HTML file and extend the CSS Stylesheet.
Step 2: Tools You Need
Special software is not required. You can work with the included Windows/Linux Text Editor or use a Freeware Editior (eg. Notepad++, gedit....) For this tutorial I reused a HTML design layout provided by SelfHTML (a HTML learning Site, unfortunately only in German). http://de.selfhtml.org/layouts/nr10/index.htm So I asked and got the permission from the author, big thanks to him!
Step 3: Add One Code Line in the HTML-File
At first you add a meta tag into your HTML-File between the <head></head> tags: <meta name="viewport" content="width=device-width, initial-scale=1" /> This codeline defines the default zoom for mobile devices.
Step 4: Media Query for Mobile Devices
A media query has the structure like: <code> @media screen and (max-width: 481px){ /*write your CSS-Code here*/ } </code> '@media screen and (max-width: 481px)' defines the CSS layout for screen sizes with 481px max. (CSS Resolution) and below. For example a FullHD smartphone (portrait view) has a width of 1080 pixels, but it's not the same like the CSS-resolution. To convert the "smartphone pixels" into "CSS pixels" you have to consider the pixel ratio. A 1080p smartphone has a pixel ratio of 3 => 1080/3 = 360px (CSS-resolution) At wikipedia, there is a list of the most common mobile devices that shows the resolution + pixel ratio: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density Thanks to the testers! So we take a look at ' screen.css ' (located at .../CSS/screen.css) and add a media query with new structure definitions after the existing CSS definitions. The other css files are for older browser versions and for printing purposes.
Step 5: Use Dynamic Units to Keep the Site Responsive
In some cases it's better to use percent units or avoid static px, inch, em...etc. Percent statements allow to keep the site flexible in relation to the screen size. In this case I've deleted/commented the static 640px width in the "#body" element.
Step 6: Define a New CSS-Structure for the Navigation Links
To ease targeting the links I have added some margin and padding spaces between them. The borders (border: 1px solid white;) around the link-elements give the look of buttons. You can align the navigation elements to the left, right or center, like shown in the second image.
Step 7: Summarize All Textcolumns Into One Single Column
In portrait view a smartphone has not much horizontal space. So you have to stack the columns into one column vertically. In this example we have two textcolumns "#main" and "#subnav". If you "float" both columns to the left, the "#subnav" column stacks on the top of the "#main". I have defined the two columns with the same structure definitions, so that they have the same width, alignment and margin spaces. ~2.7% margin space seems to be visually more accurate (compare the border space on the left and right). Unfortunately I don't know where the ~0.6% have gone. Sometimes you have to estimate and experiment with the values.
Step 8: Test and Finalize Your Website
Testing is important, every (mobile) browser has a slightly different behaviour. Testing Methods: -The best way to test a responsive website is to use real mobile devices. You can go to an electronics store to check out your site with several kinds of smartphones and tablets. -You can use an emulator to test a website, take a look at: http://www.mobilexweb.com/emulators -Firefox/Chrome has a built-in Development-Tool, so you can check out the look of a website in various screen-sizes, but it doesn't simulate a real mobile device. FF : start the tool by pressing Ctrl+Shift+M and select the screen size Chrome : First you start the developer tools by pressing Ctrl+Shift+I . A cog-wheel appears right-below of the dev-screen. Click on the Cog Icon and goto the overrides tab. Select User Agent and Device Type. Sometimes CSS definitions have to be written in a seperate CSS File for a certain (mostly older) browser. My tutorial is not perfect, it doesn't probably work perfectly on some browsers. So it's your turn to improve the code. At last here is the edited html-layout of this tut attached as zip.
Attachments
1 person made this project.
Did you make this project? Share it with us!
Recommendations
Game Design: Student Design Challenge
Make It Bridge
Make it Glow Contest
12 Comments
2 months ago on Step 8
Please Reply Me Sir. Meta Tag Is Working But Css Link Is Not Connect Main HTML Code
I Have Problem, My Css Code Is Not Merge Main HTML Codeing
5 years ago
Actually all you need is just this one line of code my friend and that is
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Reply 11 months ago
Thank you, Jiby. That seems to have worked for me.
Reply 5 years ago
PERFECT! It was just that simple! THANK YOU!!!
Tried this but doesn't work with my blog which uses blogspot :(
2 years ago
The meta tag alone did NOT fix my site from being a clunky mess on mobile vs web browsers. HOWEVER, something ELSE did work for me: I used the CSS property max-width: 100%. I threw it on every section of my CSS page that needed refining aaaand...it worked! So if any of you are still struggling like I was, banging your heads on your keyboard, etc., and the meta tag isn't enough, try max-width: 100% and see if that helps. You might want to try one area at a time before copying and pasting down the line like I did. Hope this helps. Cheers!
Tip 4 years ago on Step 1
This doesn't work at all! :(
I tried this on my website http://www.animemunch.net/ and all it did was make the entire page white. Void of all content and formatting. Help? What am I doing wrong?
6 years ago
Thanks a lot! This really helped me!
8 years ago on Introduction
You are welcome!
App & Browser Testing Made Easy
Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators
How to make Website Mobile Friendly?
By Jash Unadkat, Community Contributor - December 8, 2022
Mobile phones have become an inseparable part of our lives. A report from Statista indicates that as of 2022, there are 6.64 billion smartphone users in the world, which will rise to 7.5 billion by 2026 . In the second quarter of 2022, mobile platforms account for 59% of overall web traffic , which is more than half of the global web traffic. Given this significant mobile usage, designers and developers must focus on delivering seamless website UX on mobile devices. Consequently, website owners must ask themselves:
- How to make a website mobile friendly?
- How to ensure cross-browser compatibility for a website?
- How to optimize the mobile website for maximum conversions?
This article answers these key questions by describing effective techniques for designing mobile-friendly web pages. Bear in mind that every mobile device has unique screen sizes and resolutions. A website needs to be fully responsive and cross-browser compatible to deliver optimal viewing experiences across multiple devices. This brings us to the first technique to make a website mobile-friendly.
Read More: How to perform Mobile Compatibility Testing
1. Implement a Responsive Layout
A responsive layout allows a website to rescale itself according to the device being used to view it. This makes the website adapt to different screen sizes without any rendering issues. Responsive web design works well for both mobile and desktop platforms as the website realigns its appearance accordingly.
Having a mobile responsive website boosts the SEO value of a website as Google prefers indexing and ranking websites that are mobile-friendly. Incorporating a responsive layout goes a long way in assisting websites in ranking higher on Google searches.
Need to check website mobile responsiveness?
- While developing a mobile friendly website, t ry running a quick test using BrowserStack Responsive.
- Just enter the website URL, and the tool will immediately display the website on a range of real devices like the Samsung Note 10, iPhone X, iPad Pro, etc.
- Testers can see how a website appears on different devices and start optimizing accordingly to make website mobile friendly .
The responsive checker runs responsive tests on real device-browser combinations. As a result, users get accurate test insights. Thus providing an inclusive experience.
Try BrowserStack Responsive Testing
2. Optimize Website Speed
Speed plays a decisive role in creating the first impression of any website. 47% of visitors abandon a website if it takes more than 2 seconds to load whereas even a 1-second delay in page response can hurt your conversion rates by 7% .
Google considers high speed a positive ranking factor , so web developers must take all the necessary steps to increase website speed .
To evaluate a website’s loading time, run a website speed test on BrowserStack SpeedLab . Enter the URL and click on Start. This free tool verifies website speed on multiple real browser-device combinations and displays a score out of 100 for both mobile and desktop platforms.
You not only get reports but also actionable insights to help make website mobile friendly.
Check Your Website Speed
3. Subtle Pop-Up Implementation
It isn’t very pleasant for users to encounter sudden pop-ups while browsing web content, especially for mobile users. Sometimes, the X mark (to close the pop-up) is not even adequately visible, thus adding to the users’ annoyance. Developers and designers must ensure that if they have to display ads, they do so in a subtle manner.
Irrelevant pop-up implementation is one of the most common web design mistakes that turns your prospects into irate customers thereby lowering your chances of mobile conversions. Few techniques for subtle pop-up implementation:
- Implement the pop-up only when the reader scrolls down 70% – 80% of the web page.
- Match the pop-up design with a mobile-optimized design.
- Design CTA buttons on the pop-up to be clear and actionable.
4. Incorporate Viewport Meta tag
Incorporating the Meta tag lets developers control the viewport’s width and scaling so that the website is sized correctly on all devices. The viewport meta tag instructs the browser to resize the web page width according to the device screen size it is viewed on.
Also Read: Ideal Screen Sizes for Responsive Design
Use the code snippet below to define the meta element on each web page:
5. Declutter your Web Design
Web developers must ensure they are not cluttering the website by providing every functionality on the same page. This creates confusion, making it difficult for users to navigate a page with too many elements. Offer only the critical functions upfront since those are the ones users will actively look for. For a seamless user experience, prioritize a neat, minimalist design that makes navigation intuitive.
- Developers can incorporate one of the core elements of modern web design – the Hamburger button on a website.
- Mobile users can open the entire menu with a single click if implemented.
- This makes navigation easier and fosters a richer visual appeal.
Pro-Tip: Once done, consider running a responsive test again to verify if the decluttered website design appears to make your website mobile friendly.
6. Always Test the Website on Real Mobile Devices
An effective way of ensuring that your website delivers an optimal user experience is to test it on real mobile devices.
- Testing on real devices enables the detection and resolution of any issues or discrepancies that a user may face in real user conditions .
- Run every user scenario on as many real browser-device-OS combinations as possible so that customers can experience effortless, effective browsing irrespective of their mobile device.
Testing websites across real iOS and Android devices can be challenging without access to a comprehensive test infrastructure. Now, it is not feasible for every organization to have a mobile testing lab as it involves a significant investment. Using a real device cloud is often a better alternative because it requires zero maintenance.
BrowserStack also includes mobile-specific features such as geolocation testing , push notifications, network simulation, location testing, etc.
Try Testing on Real Devices for Free
7. Update Content Carefully
While experimenting with mobile web designs and content CRO activities, the overall website can take a hit. With a mobile-first design approach taking precedence, it’s crucial to craft and update your website’s mobile content with a pinpointed approach. Make sure that the content is readable on mobile screens and well-oriented.
- Product managers should consider the space restrictions on smaller screens to ensure only critical content elements are prominently displayed and A/b tested if needed.
- Developers can avoid this by opting for visual comparison testing that will avoid any web design mistake from showing up in production.
Case Study : Learn how Basecamp optimizes UI testing workflows with visual testing
8. Do not use Flash
Flash makes your website slower, impacting SEO and disrupting the user experience. Flash can make a page take longer to load, and sometimes it is completely incompatible with mobile devices. It is recommended to use HTML5 and CSS instead to make your website more responsive and mobile-friendly.
9. Make the website compatible with both orientations
Unlike desktops which display content in landscape mode only, mobile phones display the screen in both Landscape and Portrait orientations. Hence, you should ensure that the website loads and functions fine in both Landscape and Portrait modes with no UI distortion, glitches, or stretching. You can check it by testing the website in both modes on real devices.
Test your Website on Real Mobile Devices
In Conclusion
Developing a website to be mobile-friendly is important but at the same time, the mobile-optimized website should sufficiently deliver a flawless user experience across any device-browser-OS combination.
Mobile devices have significantly changed how people use the internet daily. This trend is set to increase, and more people continue to access the internet primarily via mobile devices yearly. Additionally, as leading search engines like Google continuously seek to make the web a mobile-first search landscape, having a mobile-friendly website must precede developers and testers.
We're sorry to hear that. Please share your feedback so we can do better
Related articles.
Mobile First Design: What It Is and How to Implement It
Learn to incorporate the mobile first design strategy for building device-friendly apps and websites...
How to make a WordPress Website Mobile Friendly
WordPress is a popular CMS widely used for building website and its content. Here’s a comprehensiv...
How to make a User-Friendly Website?
If you're wondering how to make a user-friendly website, understand six factors to improve website c...
Featured Articles
Curated for all your testing needs, thank you for subscribing.
We use cookies to enhance user experience. By continuing to browse or closing this banner, you agree to our Privacy Policy & Terms of Service .
Responsive Web Design – How to Make a Website Look Good on Phones and Tablets
In the rapidly evolving landscape of connected devices, responsive web design continues to be crucial in web development.
Not long ago the term "responsive web design" was non-existent. But today, most of us have had to adopt it to some extent.
According to Statistica , as of 2019, 61% of all Google search visits take place on a mobile device. In September of 2020 Google will change its search algorithm to prioritize mobile friendly websites.
In this post I'll cover the following:
- What is responsive web design?
- The viewport meta tag and what it does
- Effective techniques used in responsive web design to accommodate mobile and tablet devices
- Tools to help simulate and monitor mobile and tablet user experience
What is Responsive Web Design? (RWD)
Responsive web design is an approach that focuses on a website user’s environment. The user's environment will depend on which device they have connected to the internet.
There are many device characteristics that provide opportunities for user-centric focus. Some of these include:
- network connection
- screen size
- type of interaction (touch screens, track pads)
- graphic resolution.
Before responsive web design was popular, many companies managed an entirely separate website that received traffic forwarded based on the user-agent.
But in responsive web design the server always sends the same HTML code to all devices, and CSS is used to alter the rendering of the page on the device.
Regardless of the two strategies above, the first step in creating a website for phone or tablet is to ensure the browser knows the intention. This is where the viewport meta tag comes into play.
The Viewport Meta Tag to Identify a Mobile Website
The meta viewport tag instructs the browser how to adjust the page to the width of each device.
When the meta viewport element is absent, mobile browsers will display web pages with default desktop settings. This results in a seemingly zoomed out, unresponsive experience.
Below is a standard implementation:
Now that the browser knows what's going, we can utilize popular techniques to make our website responsive. ?
CSS Media Queries for Different Screen Sizes and Orientations
If you're new to responsive web design, media queries are the first, most important CSS feature to learn. Media queries allow you to style elements based on viewport width. One popular CSS strategy is to write mobile styles first and build on top of them with more complex, desktop specific styles.
Media queries are an important part of responsive web design commonly used for grid layouts, font sizes, margins, and padding that differ between screen size and orientation.
Below is an example of a common use case of mobile first styling in which a column is 100% width for smaller devices, but in larger viewports is 50%.
The code above is a simple example, but what it's actually doing is pretty interesting.
- In considering mobile first, the "column" element is set to have a width of 100%;
- By using a min-width media query, we define rules specifically for viewports with a minimum width of 600px (viewports wider than 600px ). So, for viewports wider than 600px , our column element will have a width that is 50% of its parent.
Although media queries are essential for responsive web design, many other new CSS features are also becoming widely adopted and supported in browsers. Flexbox is one of these new, important CSS feature in terms of responsive web design.
What is Flexbox?
You might be wondering - "what does Flexbox do"? The better question is - "what can't Flexbox do"? What's the easiest way to vertically center with CSS? Flexbox. How do you create a responsive grid layout? Flexbox. How can we achieve global peace? Flexbox.
The Flexbox Layout (Flexible Box) module provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is dynamic (hence the word “flex”).
In the below example we combine media queries as explained above to create a responsive grid.
We accomplish the following with this code:
- Establish a flexbox layout with display: flex in our main container element.
- Style for mobile first. We set the main element to flex-wrap: wrap which allows child elements to wrap within our flexbox layout as illustrated below in figure 1. We set flex-basis: 100% on our div elements to ensure they encompass 100% of the parent width in the flexbox layout (figure 1).
- Style for larger devices like tablets and desktop. We utilize a media query similar to our example in the previous section to set our container main element to flex-wrap: nowrap . This makes sure that child elements do not wrap and that they maintain a column within a row type of layout. By setting div to flex-basis: 33% within the media query - we establish columns that are 33% the width of the parent.
- In this example the magic would appear in larger devices with our combined media query and flexbox rules. Because we defined display: flex , and because we didn't override the rule within the media query, we have a flexbox layout for mobile, tablet, and desktop. The media query flex-basis: 33% and inherited display: flex rules will give us a recognizable flexbox layout as seen in figure 2. In the past, to achieve this column type of layout, we would need to do some serious heavy lifting and write tangles of CSS.
Flexbox provides a great way of achieving varying, fluid layouts. In some cases we might not have such freedom in vertical space. We may need to fit an element within a fixed height. In this situation, we have another technique at our disposal - horizontal scroll.
Horizontal Scrolling with Overflow Scroll
There may come a time that you have content overflowing the viewport without a graceful way of handling it. Behold... overflow scroll to the rescue. ?
Common uses for this technique include scrollable menus and tables. Below is an example of a scrollable menu.
How'd you do that!? Let's take a deeper dive.
- overflow-y: scroll is the key ingredient of this recipe. By specifying it child elements will overflow the horizontal axis with scrolling behavior.
- Not so fast! Although you may think overflow-y would be enough, we have to also tell the browser not to wrap the child elements with white-space: nowrap ?
Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.
Responsive Images
By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.
This is doing a lot of things. Let's break it down:
- By setting max-width: 100% the image will scale up or down based on its container width.
- By using a combination of picture , source , and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.
- WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.
- srcset is used to tell the browser which image to use based on the device's resolution.
- We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.
Responsive Video
Responsive video is another subject that has inspired a large number of articles and documentation.
One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.
This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.
In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.
- position: relative on the container element allows child elements to utilize absolution positioning relative to it.
- height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.
- position: absolute , top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.
- And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.
I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.
Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.
Tools to Simulate and Monitor Responsive Websites
There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.
Chrome DevTools Mobile Emulation
Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.
Monitoring Mobile Website Performance with Foo
Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.
Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis . You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.
For example, a Lighthouse report will callout images that are improperly loaded based on device.
Responsive web design will continue to rapidly evolve, but if we stay on top of current trends we can provide the best experience for our users. I hope these tools and techniques are helpful!
Not only will our website users benefit from a versatile design but also search engines will rank our web pages higher.
Adam is a software engineer who works in New York City. Founder of www.foo.software.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
How to Make a Mobile-Friendly Website: Responsive Design in CSS
Using Media Queries and Viewport for a Mobile-Ready Design
With so many people in the world using mobile phones to surf the web, more and more webmasters are looking for ways in which they can make their websites mobile-friendly. This usually means modifying their sites for the smaller screen size found on such devices, either by providing a separate page that can be viewed comfortably there, or, more commonly, making their websites automatically adapt by shrinking things and moving stuff around. The latter method, often referred to as "responsive web design", is described in this tutorial series.
Prerequisites
Since this tutorial deals with the changes you need to make to your website's low level code, you will need to know some HTML and CSS . You do not need to be an expert or anything like that, but some knowledge is necessary, otherwise this tutorial will be incomprehensible to you.
Incidentally, if you are here because you thought this article is about designing a website from scratch, please read How to Create a Website instead.
Responsive Web Design
In responsive design, we will present the same web page that desktop or laptop computer users see to your mobile audience. Only the Cascading Style Sheets, or CSS, will be different. That is, browsers on desktop/laptop computers will render the page using one set of CSS instructions, while those on mobile phones another.
This method of working not only saves you the labour of creating a different set of pages for each type of user, but also the hassle of maintaining those 2 sets over the years, trying to keep them in sync.
Overcoming the Mobile Device's Defaults: Viewport
For the purpose of this article, to avoid having to qualify everything I say, making things even more wordy than it needs to be, I will use the following shorthand. When I say either "desktop" or "computer" here, I mean a desktop or laptop computer, and not a smartphone or tablet (even though the latter two are actually computers too). And when I say a "mobile device", I mean a mobile phone, a tablet with a small screen, and the like, and not a laptop computer (even though the latter is also portable). Without this shorthand, the article is going to be even more difficult to read than it already is, with multiple sentences just to explain what I mean when I say these terms. I also tend to use "smartphone" synonymously with "mobile device" here, so that the article doesn't sound too monotonous.
The browsers of modern mobile phones are written with the knowledge that websites are traditionally designed for computer monitors. As such, it adapts by pretending to the website that it has a computer-sized screen and scaling everything to fit in it. For example, Safari on the iPhone 5 pretends that it has a screen width of 980 pixels by default, even though its real size is 320 pixels (in portrait mode). So if you were to design a website with a fixed width of (say) 730 pixels, its entire width will fit into your mobile phone's screen, even though the latter isn't that wide. The browser accomplishes this by shrinking your website so that everything becomes really small. If the user needs to read anything, they will have to zoom in the relevant portions. You can see this effect by going to the fixed width demo page with your smartphone. That particular page has a fixed width of 730 pixels, and is deliberately designed not to adapt to your use of a mobile phone.
Since this default of pretending that the device has a width of 980 pixels and automatically scaling content defeats our attempt to manually create a comfortable experience for mobile users, we have to override it before we can do anything meaningful. To do this, add the following HTML tag to the <HEAD> section of your web page:
The viewport meta tag above instructs the browser to use the actual device width with a scaling factor of 1. That is, it is not to pretend that it has some other width, nor is it to scale the content so that it fits into the existing window. Everything is to be used as-is. This instruction makes mobile browsers behave exactly like their desktop counterpart.
If you want to be future-proof, you will theoretically need to add the equivalent CSS code to your style sheet.
The above is the method sanctioned in the proposed CSS standards (ie, it has not actually been ratified yet). Since things like width and how a web page is presented are really style rules, they rightly belong to the style sheet instead of a meta tag in the HTML. Unfortunately, at the time I write this, no web browser actually implements it out-of-the-box. Microsoft and Google have experimental code in their browsers that support it, but it needs to be explicitly enabled by the end user.
If you want to test it in Internet Explorer 10, 11 and Microsoft Edge, because you have enabled the facility in your preferences, you should also add the following. (The zoom property has not yet been implemented.)
The " -something- " prefix (eg, " -ms- " for Microsoft, " -webkit- " for Google, " -moz- " for Mozilla, etc) is the method used by browser vendors to add support for experimental things that have not yet been officially added to the standards. They do this because if they add, say, @viewport prematurely, using the pre-standards method still under discussion and negotiation, and the final standard eventually ends up with a different meaning for those properties, then the websites that depended on the pre-standards way of writing @viewport will break. This leads to an unholy mess where the browser vendors have to decide how to interpret the rules on a website, since some sites will rely on the pre-standard semantics while others the official one. And webmasters will not be able to solve the problem either, by coding things one way or the other, since they can't control whether their visitors use a pre-standards browser or a post-standards one. The solution is therefore to offer a prefixed version, and to only enable the one without a prefix when the standards are settled.
In any case, since the CSS method is not yet supported by any browser by default at the time I write this, and it's not even officially a standard yet, it's up to you whether you want to add it to your style sheet. If you do, you should keep up-to-date when it's finally implemented in case there are changes to how it is specified.
The Key that Unlocks a Responsive Design in CSS: Media Queries
Now that we have got the mobile phone's browser to refrain from resizing things behind our back, we have to adapt to its small screen manually. While this seems like a step backward, it actually allows us to do things in a more appropriate way than the phone's automated facility: for example, we can resize the things that can be resized (eg, images), while leaving alone others that shouldn't be resized (like the words). To make space for this, we can send elements that are not so crucial to the bottom of the screen. For example, if you were to read any article on thesitewizard.com, including this one, on a mobile phone, you will find that my navigation menu (ie, the list of buttons) that is normally in the left column in a desktop browser, is positioned at the bottom of the page on a smartphone. I figured that since the user is on this page, his/her primary purpose is to read the article. As such, I put the article at the top so that visitors can get to it immediately.
To accomplish magic like this, we need some way to detect the screen size. Modern browsers provide this facility in the form of a "media query".
A media query in a style sheet looks something like this:
Any CSS enclosed within the curly brackets of that " @media screen and (max-width:320px) " test will only apply to screens that have a maximum width of 320 pixels. You are, of course, not restricted to testing for a width of 320 pixels. The latter is merely a figure I picked for this example. You can test for min-width and max-width of any size. You can even test for range of sizes as well, such as in the following code.
CSS rules that are not enclosed within a " @media " section apply to everyone. And code that is enclosed within a specific " @media " section will only be used when the conditions of the query are met. If you have multiple conditions that must be met simultaneously, connect them with " and " as in the examples given. You can have multiple media query blocks, each of which will only be applied when the conditions for that block are met.
Note that the above is just an example meant to illustrate the use of multiple blocks of media queries. My choice of the numbers used there is arbitrary, so don't spend time puzzling over them.
You can also put your media queries in the <link> element itself, so that an entire stylesheet is only applied when that particular set of conditions is met. For example, the following loads 3 style sheets, one supposedly for mobile devices in portrait mode, another for their landscape mode, and the final for desktop and laptop computers.
This allows you to cleanly separate your code for different screen resolutions into different files, if that is what you want. Once again, note that the point of the example above is to demonstrate the use of media queries in <link> tags. The numbers are arbitrarily selected.
Testing for Portrait and Landscape Mode with Media Queries
Instead of using specific resolutions to figure out if a device is in the portrait or landscape mode, you can also use the condition " orientation: portrait " and " orientation: landscape ".
I tend not to use these since I find that knowing the number of pixels available more useful than just figuring out the orientation of the device. But the facility is available if you need to use it.
Other Useful Features in Media Queries
Apart from the above, you can also insert tests for min-height (ie, minimum height), max-height (maximum height), width and height .
In addition, you can start the media query with " only ", as in the following snippet:
Very old browsers that don't understand the modern media queries syntax will think that "only" is a type of device (like "screen" or "print" or "speech"). And since they think that the rules in the block are meant for devices classified as "only", they will not follow them. Modern browsers, on the other hand, ignore the word "only" (by design), so this conditional test is useful if you need to guard against old browsers parsing your mobile-only rules and applying them even on a desktop computer.
If you want to use CSS for all situations except when certain conditions are met, you can use " not " before your condition, such as in the following example.
(Note that since I didn't specify " screen " in the example above, it implies " all " which means all devices.)
Be warned though, "not" is treated like "only" in very old browsers. That is, it will interpreted as a device type and therefore the styles in the block that follows will be not be applied.
Mobile Screen Resolutions / Widths
Here is a list of the browser screen widths of some commonly-used mobile devices. The list is not exhaustive, since new brands and models are released all the time. However, the list is enough to give you an idea of the kinds of sizes that you need to accomodate.
- 240 pixels (old Android portrait mode)
- 320 pixels (iPhone 3 to 5 and iPhone SE portrait mode)
- 375 pixels (iPhone 6, 6s, 7, 8 and X portrait)
- 384 pixels (Android Nexus portrait)
- 414 pixels (iPhone 6 Plus, 6s Plus, 7 Plus and 8 Plus portrait)
- 480 pixels (iPhone 3 and 4 landscape mode)
- 568 pixels (iPhone 5 and iPhone SE landscape)
- 600 pixels (Android Nexus landscape, Kindle portrait)
- 667 pixels (iPhone 6, 7 and 8 landscape)
- 736 pixels (iPhone 6 Plus, 7 Plus and 8 Plus landscape)
- 768 pixels (iPad portrait)
- 812 pixels (iPhone X landscape)
- 1024 pixels (iPad landscape)
On thesitewizard.com, I treat all screen widths above 629 pixels as being sufficient for my 2 column layout. Resolutions below that get a single column, with the navigation column (the left column) pushed to the bottom of the screen. You can see the effect of my mobile CSS rules even if you are on a desktop: simply resize your browser window on this very article you are reading. If you shrink the width smaller than 629 pixels, you will get the single column that the mobile users see.
Note that you do not have to follow my system of partitioning the CSS at 629 pixels. That's just the figure I used because it seems to work fine for thesitewizard.com's content. In fact, if I remember correctly, I saw a site that switched to a mobile layout only at 480 pixels, while another switched to different layouts depending on whether the screen had 940, 640 or 520 pixels on its horizontal axis. I recommend that you do not blindly follow other sites' size conditions: use a number that suits your content, testing and adjusting it accordingly.
Compatibility with Web Browsers
The media queries facility that allows us to test for screen size is a latecomer to the web browser scene. That is to say, CSS had already existed for years before the standard included the means to conditionally apply certain rules to certain screen sizes. As such, very old browsers do not support these features.
Where smartphones are concerned, as far as I know, media queries are only supported on Android browsers beginning with version 2.1, on iPhones's Safari 3.2 and above, Blackberry 7 and later, Opera Mobile 12 and later, Opera Mini 8, and Internet Explorer ("IE") mobile 10 and above.
On the desktop/laptop browsers front, support appears to have started with IE 9, Firefox 3.5, Safari 4 and Chrome 4. Since Microsoft Edge was originally based on IE 11's code, it has always had media queries support.
In view of the above, how safe is it to use media queries on your site?
A lot depends on your site's demographics. For example, if your site has many people using phones with IE mobile 9 and earlier, you will probably want to support them.
This is not impossible, since early versions of IE allow the use of conditional comments , where you can include rules that will only be rendered by them and not other browsers. As such, it's possible to detect those browsers without resorting to media queries.
Alternatively, you can use JavaScript to detect the screen size and adjust your style sheet accordingly. There are even free JavaScripts floating around the Internet that implement media queries on early IE versions, although I have not tried any of them and therefore cannot vouch for them.
If your site has very few visitors using such old mobile browsers, then you have to decide whether or not you want to bother creating a solution specially for them. You may find that the time and effort you need to expend is disproportionate to the number of people that actually benefit from it. And that number will only decrease with time. As such, you may want to just let such users view your site using the default style sheet (which was what everyone would have seen anyway, before you suddenly decided to create a mobile-friendly one).
Next Chapter
The next chapter deals with some ways of modifying a two column layout so that it is mobile-ready . If your site is a one column website, please read How to Make a One Column Website Mobile Friendly (HTML/CSS) instead.
Copyright © 2016-2020 Christopher Heng. All rights reserved. Get more free tips and articles like this , on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/ .
You are here: Top > Cascading Style Sheets (CSS) > How to Make a Mobile-Friendly Website: Responsive Design in CSS
Other articles on: Website Design , CSS
thesitewizard™ News Feed (RSS Site Feed)
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml . You can read more about how to subscribe to RSS site feeds from my RSS FAQ .
Please Do Not Reprint This Article
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
Related Articles
- How to Create 3D Buttons Using CSS
- How to Centre a DIV Block Using CSS
- How to Create Rounded Corners for Your Box Borders in CSS
- How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically
- How to Point Multiple Domain Names to One Website: And How to Avoid Search Engine Problems When Doing So
- How to Create a Website
- How to Register Your Own Domain Name
- The Real Meaning of "Unlimited" in Web Hosting
New Articles
- How to Set the Height of a DIV Relative to a Browser Window (CSS)
- How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
- How to Insert Meta Tags into a Web Page with BlueGriffon
- How to Play a Song (or Some Other Audio Clip) from a List on a Website
- How to Draw a Horizontal Line on a Web Page with Expression Web
- How to Create a Website Free of Charge
- Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
- What's the Difference Between a Domain Name Registrar and a Web Host?
- What's the Difference Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?
Popular Articles
- How to Create a Blog
- How to Make / Create a Website: The Beginner's A-Z Guide
- Tips on Choosing a Good Domain Name
- Expression Web Tutorial: How to Design a Website with Microsoft Expression Web
- Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6
- BlueGriffon Tutorial: How to Design a Website with BlueGriffon 3
- How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor)
- Free Feedback/Contact Form Wizard
How to Link to This Page
To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)
It will appear on your page as:
Home » Building Websites » How To Make Your Website Mobile-Friendly | 9 Steps
How To Make Your Website Mobile-Friendly | 9 Steps
Our independent research projects and impartial reviews are funded in part by affiliate commissions, at no extra cost to our readers. Learn more
In the summer of 2015, more Google searches were carried out via mobile than desktop for the first time ever – and you’d better believe they’ve only gone up since then!
If you’re reading this article, chances are you’re already aware of the importance of having a mobile-friendly website, and are looking to make sure that yours is offering a great experience to mobile users. We can teach you how to do that!
To make your website mobile-friendly, you’ll need to:
- Choose a mobile-responsive theme or template
- Strip back your content
- Make images and CSS as light as possible
- Avoid Flash
- Change button size and placement
- Space out your links
- Use a large and readable font
- Eliminate pop-ups
- Test regularly
But first, what does mobile-friendly actually mean?
When we talk about a ‘mobile-friendly’ website, we’re talking about displaying a different ‘version’ of your website to visitors viewing your site from mobile, in order to give them a better experience.
There are several ways you can achieve this:
- Responsive design – your website’s design adjusts to adapt to the screen size, whether you’re just changing the size of your desktop tab, or browsing from a mobile or tablet.
- Dynamic serving – visitors are shown a different, purpose-built version of the site, depending on the device they’re viewing from.
- A mobile app – in some cases, having a completely separate app for your mobile audience makes the most sense (although if this is the case, you should also make sure your website is up to scratch for those who don’t want to download it).
Responsive design is the bare minimum you should be aiming for, and it’s what Google recommends – not to mention being one of the main routes you can take to making your website more accessible . That said, we think it’s worth further editing your auto-generated mobile site anyway – after all, you want to aim for a fantastic mobile user experience, rather than an ‘acceptable’ one.
If you think a mobile app would work for your site, we recommend getting in touch with a developer who can help you out with that.
How to Design a Website – If you’re starting to design (or redesign!) your website, check out this article for a step-by-step guide, and key points to consider.
How to Build a Website – Haven’t made a start on your site yet? No worries, this guide will walk you through the whole process!
5 Best Website Builders for SEO – Any website builder with strong SEO comes with mobile-friendliness baked right into its templates. Here are five of the best.
1 Choose a mobile responsive theme or template
Okay, so this is the first step, and it’s a big one: choose a mobile responsive theme or template! Because having a mobile-responsive design is so important, it’s something that pretty much every top website builder has covered across each of its templates. For example:
Squarespace – has water-tight mobile-responsiveness, and would be our top choice if you’re building a site from scratch and view mobile experience as a top priority.
Wix – all templates are mobile-responsive, but always be sure to check in the mobile view as you go. Because Wix sites are so customizable, sometimes big changes don’t translate so seamlessly, and you’ll have to do some tweaking.
If you’re building a site using a CMS system, such as WordPress , make sure the theme you choose to build your site from is mobile-responsive – or if you’ve already built a site, switch to one that is!
Just search ‘responsive theme’ in WordPress’ own theme library, or on a third party site like Themeforest . Make sure you read reviews, and if possible, take a look at any sites that are using this theme from your mobile to gauge the experience for yourself.
Help! What if I’m on a non-responsive theme, and I can’t switch it?
If your website was built using an old, non-responsive theme or template, and you’re unable to switch it, try adding this line of code into each page’s <head> tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
2 Strip back your content
You’ve chosen a lovely responsive theme or template, so now you’re all set, right? Wrong!
Switching to the right template or theme is a big step, but it’s only one of several you should take to perfect that mobile experience.
Now, it’s time to take a look at the automated mobile view of your website and strip it back:
Distill your offer
Work out the main goal of the page you’re on, and don’t hesitate to make this a lot more prominent on your mobile version.
Take a look at this example from Trainline :
The homepage is designed to encourage users to search for train tickets, and this form takes center stage on the mobile version. On the desktop version, this would seem too pushy, but on a mobile version, it works.
Avoid large chunks of text
The copy on your website should be short and sweet at the best of times (with the exception of blog posts, like this one!), but on mobile this becomes all the more important. Take a read over our tips for writing for the web , and take your virtual scissors to any long chunks of text.
Shorten forms
Filling in long forms is a chore at the best of times, but on a mobile? On the move? Forget it! Long forms will lose you readers faster than you can say ‘this is a required field’. Make sure every form you’re displaying on mobile is only asking for information that’s absolutely essential.
3 Make images and CSS as light as possible
Making your website as light as possible is always a good idea – but what exactly does that mean? Well, each element on your website carries a virtual ‘weight’ – whether that’s a video or an image which has a file size, or code which needs to be loaded each time the website is clicked on.
Google has been very clear about the fact that website speed is a crucial ranking factor, meaning slow (a.k.a. ‘heavy’) websites will lose out to the competition on the search engine results pages (SERPs).
When it comes to mobile, this is all the more important. If you’ve ever tried to load a webpage somewhere remote, only to watch each element fall into place painfully slowly, you’ll understand why.
So, what can you do about it?
Compress your images
When you’re uploading any image to your site – mobile or desktop version – it’s vital that you compress your images using a free online tool, such as kraken.io . This greatly reduces the file size of your images, without compromising on the image quality.
Host your videos with a third party
By uploading your videos to a third party then embedding them on your site, it means the virtual ‘weight’ of these videos is largely kept to that chosen site, rather than to yours.
Wistia is a popular platform for this, but YouTube also works – you’ll just want to make sure you’re switching off autoplay, so that an unrelated video doesn’t play after yours. To do this, simply:
- Go to your WordPress page or post
- Find the embedded code and click on the ‘text’ tab
- Find the part that says src=”youtubeurlhere”
- Add ?autoplay=0&rel=0 after youtubeurlhere
- The code should now read src=”youtubeurlhere?autoplay=0&rel=0″
- Hit ‘Update’ and you’re good to go
4 Avoid Flash
Flash is often used to create animations, but it generally isn’t supported by mobile devices, so is best avoided altogether.
5 Change button size and placement
Pretty much every website uses buttons to link through to other sections, or to forms. But a ‘good’ button can quickly become a ‘bad’ button on mobile if it’s in the wrong place, or is the wrong size.
Think about how you hold and use your phone. Chances are you’re using your thumbs for pretty much everything, meaning anything you can’t reach with your thumb becomes a total pain.
Here’s where you should aim to place CTAs on a mobile site:
So now you’ve got your buttons in the right place, it’s time to make them the right size. That generally means you’ll need to enlarge them a little – it’s a lot harder to click accurately with a thumb than with a mouse, after all.
6 Space out your links
Speaking of how hard it is to click accurately with a thumb as opposed to with a mouse, that brings us nicely onto our next point: look at your links!
More specifically, you’ll want to check that any hyperlinks on your mobile site:
- Aren’t too close together , to avoid people clicking on the wrong one by accident.
- Link out to pages which are also mobile-optimized for a seamless user journey.
7 Use a large and readable font
It’s recommended that you use a font size of at least 14px on desktop, but make sure you test out how it looks on your mobile version – chances are you may find it shows up a little small, and you’ll want to bump it up a bit.
Double check the readability of your font, too. It’s one thing to try a more experimental font on a desktop, but this move is unlikely to pay off on mobile. That said, you’ll want to keep fonts as ‘on brand’ as possible across all platforms.
When working on a mobile view of your site, you’ve got a much smaller area to play with. On a desktop, you can space out text with line breaks and images. On mobile, try bolding or capitalizing different lines of text instead to stop them from merging into one another.
8 Eliminate pop-ups
When used carefully, pop-ups can work really well on a desktop version of a site. You might have noticed they’re something we use on quite a few pages here on WBE.
But when it comes to mobile, pop-ups are best avoided. Not only do you have a smaller screen to deal with, but you can’t tailor the pop-up to trigger at key moments, such as when the user goes to exit your screen.
9 Test regularly
The best way to find out how mobile-friendly your mobile site is is to test it! You’ll want to do this in three different ways:
Run URLs through Google’s mobile-friendly tool
Google has a free mobile-friendly testing tool , which anyone can use to test how mobile friendly any given URL is – whether that’s a homepage (as below), or a page within your site.
Try out different device sizes from your desktop
A great way to check how responsive your site is is just to play around with the shape of the tab of your website that you have open. As you reduce the width of your tab, you should notice your site start to ‘contract’ and morph into the more mobile-friendly version.
To quickly test the look of anything on mobile, you can also right click on your webpage, select ‘Inspect’, and then click on the icon of two screens that appears in the toolbar across the top:
How to Make Your Website Mobile-Friendly: Summary
Thanks for sticking with us as we explained how to make your website mobile-friendly. Here’s those steps once again:
How to make your website mobile-friendly:
The good news for most sites is that the bulk of the hard work will likely be done for you by your theme or template. That said, we think it’s worth making the extra tweaks outlined above to ensure your mobile users are getting a brilliant experience, rather than an acceptable one. After all, the stats say they’ll likely make up the majority of your users!
More information
- Want more information on designing mobile optimized websites ? Check out our step-by-step guide
- Want more design tips? Find out about dynamic content and how to use it
Written by:
I started writing about the wonderful world of the web more than three years ago, and haven’t looked back since. Put simply, there’s never been a more exciting time to get online. Having tested all of the best website builders and ecommerce platforms on the market, myself and the other writers at Website Builder Expert are in a great position to help you do just that. Why wait to get started?
Related Posts
- SEO Software
How To Make Website Mobile Friendly?
For the past few years, Google has been shifting its focus to mobile search.
As of now, it’s known for sure that 70% of the whole web is on the mobile-first index.
In terms of SEO, this means that Googlebot indexes the mobile version of your site instead of the desktop site. Thus, if your site isn’t mobile-friendly, chances are it won’t see high search rankings, or worse, your rankings may suddenly drop .
So, how do you make your website mobile friendly so that both your users and Google crawlers will absolutely love it? Let’s have a look!
What is mobile SEO?
- Why making a mobile-friendly website is so important?
How to choose the right mobile-friendly solution?
How to check if your website is mobile-friendly, how to make your website mobile-friendly.
- Step #1. Optimize loading times on mobile
Step #2. Let Google crawl everything
- Step #3. Work on your mobile site’s UI & UX
- Step #4. Implement Schema Markup
Final thoughts
Mobile SEO stands for mobile search engine optimization. At its core, this is the process of optimizing your website for users who use smartphones, tablets, or any other mobile device to access your site.
The goal of mobile SEO is to provide an exceptional website experience for all mobile users regardless of the screen size, device’s operating system, or mobile internet speed.
Why making a mobile-friendly website is so important?
Billions of users choose their smartphones over desktop computers daily when they need to catch up with the latest news, check the winner of a football match, or shop online.
While the benefits of mobile SEO may be obvious, I’ve put together some of the most convincing points below.
Want to Learn SEO Fast? Join our 30-Day SEO Course and get one super simple SEO lesson daily to your inbox.
Mobile search has outpaced desktop search
Back in 2017, mobile searches exceeded desktop Google searches. Today, more than half of all web searches come from mobile devices . As the share of mobile device traffic keeps growing monthly, this trend will only strengthen.
For website owners, this means that a huge part of visitors is viewing their sites from mobile devices. And if the site isn’t mobile-friendly, mobile searchers will bounce back to the search results. Google captures user behavior and may eventually downrank such sites. Chances that bounced users will ever visit badly optimized sites again are low, too.
Google’s focus is on mobile search
It all started in 2015 when Google rolled out its mobile-friendly update .
With the so-called “Mobilegeddon” update, Google penalized websites that were not mobile-friendly. However, this applied only to mobile search, which share was much lower than desktop at that time.
This changed dramatically when we first heard about the mobile-first index . Starting in 2017, Google slowly began to crawl the web using the smartphone Googlebot. Fast forward to 2022 and we’re having 70% of the whole web on the mobile-first index. And it keeps extending to finally reach 100%.
What does this mean for website owners?
In short, only the mobile version of your web page is now used for indexing and ranking purposes, which makes mobile SEO important for any website owner.
Here are some visuals to help you better understand how mobile-first indexing actually works:
And a short video straight from Google:
The conclusion from the above – Google’s preference is given to sites that are mobile optimized. We’ve once again seen the proof of it when the Page Experience update rolled out.
Wondering if your site is on the mobile index? There’s a quick way to check this using Google Search Console (GSC). Just head over to Settings and check the About section. You'll see Googlebot Smartphone as an indexing crawler.
Note that all websites that went live after July 1, 2019 , are indexed with the help of Googlebot Smartphone.
If you’re still on the desktop index, things are likely to change anytime soon, so it's better to take care of your mobile SEO now without putting it off.
When you decide on a long-term mobile SEO optimization plan, Google offers three mobile configurations you can choose from.
To help you choose the right configuration, I’ll briefly describe all three, stating the pros and cons of each.
Responsive design
Mobile responsive design is the most elegant solution in terms of mobile SEO and is recommended by most popular search engines like Google.
Briefly, you have the same URL for all web pages for both desktop users and mobile visitors. The HTML stays the same, too. The only thing that changes is the CSS, which alters the rendering of your content depending on the screen size and device type.
What’s HTML? And CSS?
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are the two major building blocks of any webpage.
I’m sure you’ve already seen pieces of HTML looking like this:
And CSS looking like this:
In plain terms, HTML is used to describe the structure of your webpage.
CSS tells browsers how to present your page including colors, layout, and fonts, as well as allows you to adapt your pages to different screen sizes, device types, and operating systems.
To have full control of how your site looks on various devices, you’ll want to use media queries. The @media rule basically tells browsers how to render your website when certain conditions are met.
Here's one of the basic media queries – if the width of the screen is 800 pixels or less, the background color will change to black :
With a responsive website, all your pages will look great on any device, with minimum effort and time spent.
Have a look at how link-assistant.com is displayed on three different devices – iPhone, iPad, and desktop:
You can easily check how your website is displayed on different devices, too. If you’re using Google Chrome, right-click anywhere on your page, and hit Inspect . In the top left corner of the screen, find Dimensions and pick the device you want to see your site on.
Alternatively, you can leverage a few free online tools. I like this one .
Last but not least, many modern solutions for building a website can help you set up a responsive website without any coding experience.
To summarize, here are the pros and cons of a responsive web design for mobile SEO.
Dynamic serving
Another way to make mobile-friendly websites is to serve your content dynamically.
With this configuration, the server responds with different HTML (and CSS) on the same URL depending on which user agent requests the page (mobile, tablet, or desktop).
Here’s how it works:
This method is more time-consuming as you have to create two versions of a webpage for the same URL. Plus, you have to keep up with the latest gadgets that are being released. If you don’t, the desktop version of your site will be loaded on newer mobile devices.
Overall, dynamic web serving is less preferable when it comes to mobile SEO:
Separate mobile site
This approach lies in creating a separate mobile-friendly website for mobile visitors.
Mobile traffic is redirected to another, mobile-specific URL, which typically looks like this – m.example.com . As a rule, this version of a site has less content than the desktop one and offers navigation that's better suited for mobile browsing.
This mobile configuration was popular back in the day, but today it’s not used that often and is not recommended by Google .
Here’s Google’s take on this:
If you choose this mobile configuration, you’re likely to see serious troubles with duplicate content, which can hurt your site’s SEO. Also, you'll want to optimize titles and meta descriptions so that both versions of a single page have the same title and meta descriptions. What’s more, HTML and CSS allow us to do unheard-of things with websites today, so a responsive solution is preferred.
Do you need an app?
A separate mobile app (for iOS and Android users) is an extra option, which can complement your mobile-friendly website or serve as a standalone solution.
It’s important to understand that not every business needs an app.
Say, if your website is purely informational, you’ll be good to go with making your website responsive for mobile visitors. But if you’re running an e-commerce site or food delivery service, an app can significantly boost your users’ mobile experience.
But…
Building an app is a serious headache if you don’t have a solid technical background or a massive budget. It’s a costly solution, and often can be replaced with a properly optimized responsive site. So unless you’re a big brand, an app is not something you should spend your money and time on.
Summing it up, Google and other search engines recommend that you use a responsive layout for your mobile-friendly site today. But the choice is always up to you and your business needs.
To help you revise all three mobile configurations, I’ve made this handy infographic:
First things first. Before you start making your existing website mobile-friendly, check what’s your status quo at the moment.
Check for common issues on mobile devices
Jump to G SC and head over to the Mobile Usability tab.
The tool will let you know if you have any serious issues with your site’s mobile SEO. And if you jump to the Details section, you’ll see a short description of what Google believes to be hurting the usability of your site for mobile visitors. This includes user experience issues, problems with your mobile site’s interface, and a slew of other factors you’ll be working on later in this guide.
If you don’t have a GSC account, you can also check your site’s mobile optimization using Google’s Mobile-Friendly Test .
Enter your site’s URL, hit Analyze , and wait till the tool collects all the data.
The only drawback is that you can analyze only one URL at a time. So if you need to audit the entire website, it’s better to use Google Search Console.
Alternatively, you can check your pages' mobile-friendliness with WebSite Auditor. Launch the tool, and go to Page Audit > Technical Audit . Enter the URL you want to examine and a few keywords describing the page. Once the check is finished, you’ll see the results and a detailed breakdown of the factors that need improvement.
Check page speed on mobile
Before we jump to page speed optimization on portable devices, let’s see how you can measure this factor first.
This can be done in a few ways – with the help of WebSite Auditor and Google PageSpeed Insights.
WebSite Auditor allows you to check all your web pages in bulk. There you can go to Site Structure > Site Audit and get a bulk page speed report for your entire website as well as view all affected pages — all from a single dashboard:
Or you can switch to Site Audit > Pages > Page Speed and view a list of pages opposite speed issues that affect them. Click on any page and you’ll also get a list of page elements that can be optimized for better performance:
Alternatively, you can use Google PageSpeed Insights . Once you’re there, enter the URL of a page you want to check and wait till the analysis is finished. Scroll down to the Opportunities section and see the suggestions that will help improve your website speed.
The disadvantage of this method, as you might guess, is that it only allows you to examine one page at a time, which can be tiresome.
There’s another Google tool to check your website speed on mobile – Mobile Speed Test . The cool thing about it is that you can see how fast your webpage is loaded from different locations, and on different mobile networks (3G/4G).
Ready to step into 2023 with a mobile-friendly website that is perfectly optimized?
In this section of the guide, I’ll describe four steps to make your site mobile-friendly, both in the eyes of users and Google.
Step #1. Optimize loading times for mobile users
How fast your site loads on mobiles is crucial if you want to boost your mobile SEO.
One of the studies cited in Google’s blog post revealed that mobile users tend to keep their attention on the screen only for 4-8 seconds at a time. If your web page takes longer to load, you’re losing a ton of visitors, literally.
Check these statistics from Google:
When it comes to the search and ranking algorithms, the Page Experience update and the introduction of Core Web Vitals (CWV) once again emphasized the importance of shorter load times for mobile visitors.
What are Core Web Vitals?
Core Web Vitals are the metrics that measure loading speed, interactivity, and visual stability on your website. Together with mobile-friendliness, safety, security, and the lack of pop-ups, these new signals are now used to assess the overall page experience and to cast a final vote in deciding whether a page is worth ranking. Here’s a detailed guide from Google .
We've also found some convincing correlation between improved Core Web Vitals and organic impressions and clicks. Make sure to check our Core Web Vitals case study to learn more.
Google’s benchmark for mobile page speed is one second. While this may seem quite ambitious, this goal is attainable.
Here are the exact steps you need to take to guarantee shorter load times on mobile:
Check your server response time
Much of the success with your loading times depends on how fast your web hosting server is. If your server takes too long to respond, you’ll see a corresponding alert in PageSpeed Insights. You’ll want to talk to your web hosting provider’s support to discuss possible ways to speed things up.
Avoid Flash – use HTML5 instead
Adobe Flash was extremely popular in the early years of the internet. But this is no longer true. Especially for mobile devices, which never supported Flash. If you need to add media to your web pages (videos, animations, etc.) use HTML5 instead not to hurt your mobile SEO. Not only will it help you deliver the same content on all devices, but it will also significantly boost loading times on smartphones, and tablets.
Don’t use too many plugins
If you're among WordPress users or you're leveraging any other CMS, be extra careful with plugins. They may be slowing your site. Do a split test to see how well your site performs with and without plugins. You can also use Query Monitor to detect problematic plugins on your WordPress site.
Make your images mobile-friendly
Every site has a ton of images. To make them all load fast enough, they surely need to be optimized. Make sure you’re using proper image formats, such as AVIF, JPEG 2000, JPEG XR, and WebP. The latter format is 25% to 35% lighter than PNGs and JPEGs of similar quality, so it can become a major speed booster when it comes to mobile SEO. To reduce the size of your images even more, run them through compression tools .
Another way to save on loading time is to leverage lazy-loading for images on mobile devices. Lazy-loading allows you to defer offscreen images and load them only when it’s needed.
Important note
To avoid indexing issues, don’t lazy-load the mobile content that is above the fold because Googlebot can’t load elements that need user interaction.
Enable web caching
Caching speeds up browsing and makes for a good user experience for returning visitors. Allow browsers to cache all parts of your site’s content, including text, images, HTML, CSS, and JavaScript. This should greatly help with your mobile optimization.
Sign up for a Content Delivery Network
A CDN is a network of servers linked together to deliver your site’s content faster. And by saying faster, I mean it. In plain terms, multiple CDN servers are located all over the globe. When a user from, say, New York, visits your site, a CDN network will find the closest server and load all content from there. No matter where geographically the original server is. Many web hosting providers offer CDN at no extra cost.
Double-check your code
To keep your site optimized for mobile search and secure fast loading speed on mobile platforms, every single piece of your HTML, CSS, and JavaScript must be perfectly coded.
Use fewer redirects
You can’t build a site without a single redirect. But make sure they are properly set up, and watch out for mobile-only 404 redirects. The general rule of thumb here is the fewer redirects you have on mobile devices, the better.
Use AMP but with caution
The AMP project (Accelerated Mobile Pages) is an open-source project largely sponsored and promoted by Google. You might have seen AMP pages on a SERP.
AMP pages used to have a lightning bolt icon. But recently Google removed the AMP icon for mobile search results. So it’s really hard to tell the difference now.
The major AMP benefit is that your pages load almost instantly but this boost in speed comes at a price. First, there are serious web design restrictions. You can only use inline styles, CSS is limited to 50KB, and JavaScript to 150KB. Second, when someone links to your AMP page, this backlink will point to the google.com domain instead of yours. So link-building gets a bit complicated with AMP pages. Lastly, if your mobile webpages are properly optimized, you can reach AMP-like mobile loading speed without actually implementing AMP.
We have a detailed guide on AMP , make sure to check it to see all the pros and cons of this technology.
That’s pretty much it. If you want to dig deeper and find more ways to optimize your website’s loading speed for better mobile SEO, check this ultimate guide and watch this short video on checking core web vitals in WebSite Auditor.
If your website has been switched to mobile-first indexing, you’ll want to make sure that the mobile version of your site has the same content as desktop. This includes Javascript, CSS, images, and other important pieces of your site’s code.
As you already know, it’s the mobile version of your site that is indexed and ranked. So if any parts of your content are blocked on mobile, Google simply won’t see them and they won’t get indexed. By the way, we have a dedicated guide on how to fix Google's most common indexing issues .
If you still need to hide any parts of your pages’ content for mobile users, you can put them in tabs. Before the world heard about the mobile-first index, this might have been an issue and could hurt your rankings, but it’s no longer true, and Google confirmed that .
Additionally, if you have a separate site for mobile visitors ( m.example.com ), you need to check and compare both versions of your robots.txt file – for desktop and mobile.
What's robots.txt?
A robots.txt file is a text file that tells search engine bots which pages or files from your site they can or can't visit. To get into more details, check this help article .
There’s a good old way to do this by adding robots.txt after your desktop and mobile website’s URLs – www.example.com/robots.txt and m.example.com/robots.txt .
Check with extra caution that none of your important and money-making pages are blocked from crawling on mobile devices.
If you’re using WebSite Auditor, you can see your website just like a Googlebot Smartphone crawls it. Go to Website Auditor > Preferences > Crawler settings > Follow robot.txt instruction for Googlebot-Mobile .
Step #3. Work on your mobile website’s UI & UX
Mobile website’s user experience differs from desktop in many ways.
As a rule, there’s a smaller size of the screen, and the browsing is primarily done in portrait mode. While a responsive layout covers many of these aspects, you should mind that having a responsive site is not always enough in terms of mobile UI optimization.
Let’s walk through the main action steps you can take to level up the mobile experience for your visitors and ensure your website is mobile-friendly.
Mind Viewport meta tag
A simple but often overlooked part of making a website mobile-ready is the “Viewport Content” tag.
The viewport meta tag tells browsers how to handle the dimensions and scaling of your webpage on different devices.
Google’s recommendation is to use the viewport tag as follows:
If you’re using a responsive design, always double-check that your HTML contains a properly formatted “Viewport Content” tag. It will help you avoid your site showing up as а desktop on a mobile phone.
Improve readability
Always think small screen when you’re picking font sizes and colors.
Apply simple clear fonts with the size of at least 14px. Make sure there’s enough contrast between text and background to avoid readability issues in problematic surroundings.
Also, try not to overwhelm mobile users with lengthy text blocks on the top of your landing pages – use short paragraphs instead, and move the text that isn’t critical to the bottom.
Here’s a good example from The New York Times.
While their desktop version is heavy with lots of text and images, their mobile version is light and easily readable with one featured article at the top:
Doubt your website is easily readable? Just take your smartphone and browse it for a few minutes. Have you had to zoom in to read any parts of your content? If the answer is no, then the readability of your mobile website should be fine.
You can also jump to Mobile Usability in Google Search Console to check if your mobile responsive website has any readability issues, which may be hurting your website's mobile SEO.
Take a “thumb-friendly” approach
When you’re optimizing your site for mobile devices, you’ll want to make the whole design “thumb-friendly”.
Take a look at this:
In 49% of cases, it’s a thumb that is used for interacting with content. Hence, all tappable elements on your mobile website should be of enough size to fit the size of a thumb. This also applies to the distance between clickable links in your text.
Google recommends a minimum tap target size of roughly 7mm or 48 CSS pixels, with a minimum spacing between elements of at least 8px.
Time-saving tip
There’s a quick way to check if your site meets these criteria with the help of Google’s Lighthouse (available in Chrome browser).
To do this, open the page you want to examine in the browser, right-click anywhere on the page, and hit Inspect . You can also press Shift + CTRL + J (Windows), or Option + ⌘ + J (on macOS).
At the top right corner of the screen, find and click the >> symbol and choose Lighthouse .
You’re almost there! Hit Generate report and wait till the check is finished.
A familiar report we’ve already seen in PageSpeed Insights will be generated, but we’re particularly interested in what the SEO section tells us.
In case any of your tappable elements fell out of Google’s recommendations, Lighthouse will give you a warning, as well as it will tell you exactly what hurts your mobile SEO and needs fixing.
Improve navigation on the mobile device
Your mobile-friendly navigation can take many shapes but you should always remember that it must feel natural and intuitive to users. Once people land on your homepage, they should perfectly understand where and why they need to go next.
Here are a few tips to make your mobile navigation perfect:
Keep it simple. Remember mobile users get easily overwhelmed? This applies to navigation as well. Your menu should be designed with small screen sizes in mind. So instead of cluttering it with lots of elements, you’ll want to analyze your typical users’ journey and limit your mobile navigation to the 4-8 most vital items. Check these mobile menus from Flyus and Apple for inspiration:
Prioritize important elements. Since mobile users’ attention span is really short, you’ll want to bring your most important items, such as money-making pages and calls-to-action, to the very top.
- Don’t forget about the “thumb-friendly” approach. Always keep in mind that your users don’t use a mouse to navigate your mobile site. Design for taps, not clicks.
- Avoid horizontal scrolling. Neither Google nor users really like horizontal scrolling. If your menu doesn’t fit mobile screens, you should rethink it.
- Replace the home button with your logo. Going back to the homepage should be easy from any page of your site. But why let a boring text button or the “home” symbol steal screen real estate? Embed the link to your homepage right into the logo of your brand instead.
Mind your CTAs
As a rule, mobile website visitors engage with the content on your site more eagerly than on desktop. But surprisingly, the mobile conversion rates are way lower according to various research studies. So why is this so?
I’ve done my own check and found out that many landing pages often have the same problem. And that’s a misplaced call to action.
Have a look at these landing pages:
In the first case, I can’t join the online marketing event before I scroll down – the banner overlays the CTA, and there’s no way to close it. Mailchimp is likely missing out on a big part of mobile website traffic on this page.
With Benchmark’s landing page, I had to scroll four or five times before I finally saw their CTA button. I’m 100% confident their conversions would skyrocket if they followed a basic mobile SEO tip…
Always place CTAs on your money-making pages above the fold for mobile users. Don’t force them to scroll to find it, never let not-so-important banners overlay CTAs, make the CTA’s text clear, and don’t forget that the button should be designed with the thumb-first approach in mind.
Here are some good examples of a properly placed CTA on a mobile device:
See the difference?
Check social sharing buttons
Adding social sharing buttons to your site is always good. They let users easily share your content in their social profiles, boosting your brand exposure and helping you reach more people online.
The social sharing widget is typically placed on the left/right side of the screen for desktop users so that they can share your content once they decide to do so.
However, this placement is not so good for mobile devices because the browsing happens in portrait mode.
You can still leverage social sharing buttons on the mobile version of your site without hurting your mobile SEO. You just need to use a tab view and place the widgets, say, at the bottom of your page. Take a look:
Avoid intrusive pop-ups
Many website owners think of a pop-up as an extra way to collect more leads, email subscribers, or to get more visitors to register for an online event. At the same time, both users and Google consider pop-ups a UX nightmare in the majority of cases. And this is particularly true for mobile devices.
With smaller screen sizes on mobile, a pop-up that is fine for desktop can hamper the view of the target content and look not exactly the same as you want it to be.
Take a look:
Such pop-ups will not only ruin your mobile user experience but can also hurt your rankings. Google confirmed this a long time ago.
So does it mean you can’t use pop-ups at all? Not actually.
To avoid penalties from Google, you need to use any pop-up responsibly and make sure they are not hiding the background content completely.
So instead of using pop-ups like these:
You’ll want to go with pop-ups looking like this:
Step #4. Implement Schema markup
Schema markup is a set of HTML tags used to help Google’s crawlers better understand what your content is about. You can choose from hundreds of different tags and use them to mark content on your site (phone numbers, working hours, recipe cooking times, product prices, etc.).
Sites with properly structured schema markup are better interpreted by Google and have all chances of getting these beautiful rich snippets on mobile search engine results pages:
Apart from looking gorgeous, these rich snippets typically take the top of Google’s search results. You can imagine how this influences click-through rates.
Ready to give it a try? Here’s how:
If you're running a WordPress website, you need to use specific plugins offering structured data optimization.
Out of many ways to implement Schema markup, there’s one I prefer most – Google’s Markup Helper . It’s simple, automated, and the whole process doesn’t take much time.
Once you’re in the helper, just pick the type of content you’ll be working with, add your URL, and hit Start Tagging.
On the next screen, you need to highlight the elements of your web page and specify what they are.
Once you’ve finished tagging, click CREATE HTML . You’ll get the code that needs to be added to the head section of your page.
As soon as you’ve uploaded your page and it’s live, check if everything works fine.
Go to the Rich Results Test and check if your page is eligible for rich results.
That’s it!
As we all live in the mobile-first world, mobile SEO is an absolute MUST today. While it doesn’t take much time and effort, the benefits of mobile SEO are huge and include better user experience on mobile devices, higher rankings, and conversions.
Make sure to follow all the best practices listed in this guide, and the results of your mobile SEO efforts won’t take long to notice. If I missed something or you just want to share which mobile SEO tips worked best for you, don't hesitate to drop a comment in our private Facebook community .
- Technical SEO Is Amp Still Relevant in 2023? We did some research to see if AMP is the future of the user-first web and if you have to rush and convert your webpages to AMP.
- Technical SEO Page Speed: SEO Guide to Shorter Load Times An SEO guide on how to measure and improve page speed scores for your website.
- Technical SEO Image SEO: Full Optimization Guide Everything an SEO expert needs to know to use images for ranking. With the right implementation, pictures can be both a decoration and a ranking benefit.
Subtotal: £ 0.00
No products in the cart.
- Blog & News
- Get Support
- Become a Member
- Divi BodyCommerce
- Divi Machine
- Divi Ajax Filter
Divi Form Builder
- Divi Mobile
- Divi Mega Menu
- Divi Protect
- Divi Machine Accounts
- Meet the Team
How to make a mobile-friendly website responsive design in CSS?
Sep 20, 2022 | ⏳ Workflow | 0 comments
With smartphones in everyone’s hands, it is quite impossible now to avoid making a website mobile-friendly. Over 50% of people use mobile devices to search for information and data. Having a responsive website design is a best practice that everyone who designs a website should consider in today’s world.
Using responsive design, a site or application adapts to the device or environment it is being viewed on. When it comes to building websites, it’s a combination of several CSS and HTML features and strategies.
In this blog, let us take a look at how you can make a mobile-friendly website responsive design in Cascading Style Sheets or CSS.
How to make a mobile-friendly website in CSS?
When it comes to web design, CSS stands for “Cascading Style Sheets.” Written in a markup language or a coding language such as HTML, it is a language called a style sheet that is used to describe the display of a document or a page. An HTML element’s appearance on a screen, paper, or other media can be determined using CSS.
Let us understand how to make a mobile-friendly website in CSS by dividing the website design into layout, media query, image responsiveness, and typography.
If you have a domain name, you will want to assign it to your store. This can be done by going to the “Domains” tab and clicking on the “Add Domain” button.
You will then enter your domain name and click on the green checkmark. Your shop’s URL will now be: example.com
If you don’t have a domain name, don’t worry! You can use a free subdomain from WooCommerce.com.
To do this, go to the “Domains” tab and click on the “Add Domain” button. Then, type in your desired subdomain (for example, myshop.woocommerce.com) and click on the green checkmark.
Your shop’s URL will now be: myshop.woocommerce.com
Media Query
What are media queries? In order to create a website that is responsive, media queries are an essential component.
Media queries give you the ability to build various layouts based on the size of the viewport that you are working with. They can also be used to determine other aspects of the environment in which your website is operating.
Once the layout is set, you can proceed to the step of adding media queries. The media queries will highly depend on the layout that you make. So the code will also be unique to your layout.
Adjust the layout by setting points according to the size proportions and orientation. It is also a good idea to make your page suitable for different screen sizes by adding multiple queries within a stylesheet. When a media query is inserted, and the layout is altered, it is called a breakpoint.
Here, as we are discussing making the website mobile-responsive, you can use the mobile-first approach. Try out single-column layouts that can be a good fit for mobile screens.
You will be using a lot of images for your website. You must make sure that the media you use, be it images, videos, etc., are responsive as well.
Typography is an important part of website design. The font sizes were defined earlier using pixels, but a responsive website needs a responsive font. For this, ‘rems’ are used.
Rems are relative to the HTML element and are also user-friendly. You can start off with making responsive fonts by resetting the HTML font size.
Wrapping Up
The rise in popularity of online channels has necessitated a shift for businesses to utilize digital platforms in recent years. In today’s world, websites serve as a one-stop-shop for consumers to learn about and purchase their products, voice their opinions, and get support if needed.
Author: Danish Wadhwa
Danish Wadhwa is an Entrepreneur and Growth Hacker with more than ten years of expertise in Data Driven Marketing. He is a high energy individual fueled by his passion for helping businesses grow Digitally. Danish is a Fountainhead and CEO HubSpot Marketing Agency webdew and He took everything he learned in his career to help Businesses learn from his Growth Marketing Blog at webdew.com/Blog .
What did you think?
Submit a comment cancel reply.
Your email address will not be published. Required fields are marked *
Recent Posts
- Divi Theme Builder: Creating a Quick and Easy 404 Page Template
- How to Escape Custom CSS in Divi Modules: A Guide to Advanced Styling
- How to Use GPT Chat Prompts to Boost Your Web Design Agency’s Marketing: Free Cheatsheet Inside
- Divi Theme Builder: A Complete Guide to Creating a Dynamic Category Archive Page Template
- Divi Theme Builder: A Complete Guide to Creating a Dynamic Single Post Page
Boost the power of your divi website
With divi nitro, supercharge woocommerce, with divi bodycommerce, protect divi section, with divi protect, beatiful mega menus, with divi mega menu, improve mobile user experience, with divi mobile, build complex websites, with divi machine, powerful purpose built, unlimited access for cheaper, divi engine membership, filter posts, products and cpt, with divi ajax filter, related posts.
HostGator - HostGator
Web Hosting and Marketing Tips for Entrepreneurs
24/7/365 Support
- Customer Portal
How To Make A Website Mobile Friendly
Smartphones quickly went from expensive, exciting new technology, to a regular part of everyday life. Today we find it strange for anyone to leave the house without their phone. From hospital waiting rooms to theater lobbies (back when they were open anyways), people staring at their phones is a normal sight.
For website owners, that means it’s past time for your website to provide a good mobile experience.
In 2016 for the first time, mobile internet usage surpassed computer usage. And the trend has only increased in the years since. Over half of all website traffic worldwide now happens on smartphones.
While the distribution of website traffic for individual websites will vary, approximately half of all your visitors are likely to be viewing your website on the small screen of a phone. Having a mobile-friendly website is no longer optional. If your mobile visitors don’t have a good experience on your site, you’ll drive away a huge portion of your traffic (and hurt your search engine rankings in the process).
You’ve heard it before by now, but we’re saying it again: your website needs to be mobile friendly.
- Is My Website Already Mobile Friendly?
If your website was built or updated within the last few years, the designer or website builder you used may have had the mobile experience top of mind. Before you put a lot of resources into worrying about how to make your website mobile friendly, check to see how your website fares now.
Google provides a mobile-friendly testing tool . Drop your URL into the search box. You’ll not only get a quick answer on whether or not your website is mobile friendly, but also a screenshot of how the page looks on a smartphone screen and a list of recommendations to make the mobile experience better.
If the tool shows that your website needs a lot of work, then making your website mobile friendly should be treated as a top priority. Doing so will improve your website’s visibility in the search engines, ensure more of your visitors stick around, and help you increase conversions on your website.
If Google’s tool gives you the thumbs up, updating your website for mobile doesn’t need to be given the same level of priority. But you may still benefit from considering ways to make the mobile experience better for your users. Every little bit helps.
12 Steps to Make Your Website Mobile-Friendly
What You'll Learn...
1. Make Your Website Responsive.
2. make information people look for easier to find., 3. ditch text-blocking ads and pop-ups., 4. make website speed a priority., 5. keep your web design simple., 6. make your button sizes large enough to work on mobile., 7. use large font sizes., 8. don’t use flash., 9. include the viewport meta tag., 10. turn off autocorrect for forms., 11. allow a way to switch to desktop view., 12. regularly perform mobile testing., make your website mobile friendly.
Here are a few steps you can take now to make sure your website works as well for your mobile visitors as it does for your desktop users.
Most web design experts agree that building a responsive website is the best way to create a site that works well on both desktop and mobile platforms. That’s because a responsive website includes all the same content and information on any device you access it on, but the site responds to the device it’s being displayed on and optimizes its appearance accordingly.
In other words, the way a page is displayed and arranged changes based on the size of the device screen. An image that shows up next to a block of text on a desktop may show up on top of it when loaded on a smartphone, for instance.
With responsive design , you can make your website mobile friendly without limiting the information your mobile visitors can access – they still get all the same content the rest of your visitors do. And responsive design is also good for SEO. Google directly recommends it .
You may think you can’t build a responsive website on your own. But, as responsive design has become the norm, many tools now make it easy. Check out these 20 top web design tools for responsive web design.
Or go with the easiest option of all and use a website builder that offers responsive templates. All design templates in HostGator’s drag-and-drop website builder are already optimized for mobile. You don’t have to do anything special to make sure your website will work on a mobile device. Just select your template and you’re good to go.
People often pull out their smartphones looking for something specific—the answer to a question, the address of a nearby restaurant, or a customer service phone number. In these cases, they want to find the information they need as fast and as easily as possible.
Think about what information your mobile visitors are most likely to be looking for when they head to your website, and put that somewhere obvious and easy to find on the mobile homepage. Also consider the FAQs people most often look for when they visit your website. It might not make sense to put all the answers front and center on your mobile homepage, but make sure they’re easy to find and navigate to on a mobile device.
If you’re not sure what your mobile visitors are looking for when they come to your site, use your analytics. In Google Analytics, you can add Mobile Traffic as a Segment in the Behavior section, allowing you to see how mobile visitors interact with your website.
If you run a restaurant website and mobile visitors regularly perform a search for your menu, redesign your site to make it easier to find. If your visitors frequently visit the page with your contact information, maybe add that to the bottom of your home page. Reducing the steps they have to take to find the information they’re looking for will make their overall experience on your website better.
Nobody likes them in any context, but when you’re trying to read text on a small screen and a big ad or pop-up blocks your view of the page, it’s extra annoying.
Most of your visitors won’t take the time to try and find the little X to minimize the pop up, they’ll just click away and go find another website. If you want to create a positive user experience, avoid allowing ads or pop-ups that block the content of a page at all.
If you feel they’re too important to ditch entirely, then at least either disable them for mobile users, or set it up so a pop-up only appears when they’ve scrolled to the bottom of the page, not when they’ve just landed on it. And make sure the X to cancel out the ad or pop-up is big enough that they can easily find and select it.
Maybe you remember the days of dial-up and having to wait impatiently for websites to load slowly. But now that everyone takes faster internet speeds for granted, if your website loads at the pace of the not-so-good old days, your audience won’t wait around.
Google’s research on mobile loading speeds found that most websites take over five seconds to fully load, but few visitors will wait that long before clicking away.
Website owners can deploy a number of tactics to improve site speed . Some top steps you can take to improve your speed on mobile are:
- Use AMP (Accelerated Mobile Pages) – AMP is a framework Google encourages for speeding up load times for your web pages on mobile. If you have a WordPress website, you can get started with the AMP plugin .
- Compress your images and CSS – The parts of a web page that load the slowest are those that are large and take up a lot of space, such as your high-resolution images and CSS. You can speed up website load time by compressing your image file sizes , so they load faster without negatively affecting the quality of what people see on the site.
- Check your web hosting plan – If your website has outgrown the web hosting plan you started with , or if you went with a less than reputable hosting provider to start, one negative consequence could be slower load times. You can speed things up by upgrading to a web hosting plan that matches your current needs.
You might like…
- Shared Hosting
- Website Builder
Complicated websites with a lot of clutter are confusing on any screen, but they make it especially hard for visitors to navigate your site on a small screen.
Avoid clutter. Stick to a clean, minimalist design that makes it easy for people to find what they’re looking for. And by having fewer files on each page that need to load, a simple design will also contribute to faster load times.
Apply this thinking to your menu as well. If your website has a lot of pages and categories, it may make sense to offer a large menu on desktop screens. But on mobile, you want to cut it down to the most important options. Some websites switch to putting their menu behind a hamburger button on mobile. That way it’s not taking up much space on the mobile screen, but visitors can click to open it if they need it.
It’s easy enough to click on a button of any size with a mouse, but when you’re trying to “click” with your fingers on a small smartphone screen, small buttons are hard to deal with . And that’s especially true if there are multiple small buttons close to each other—pressing one when trying to select another will cause real annoyance for your visitors.
The best way to save your visitors from this frustration is to use bigger buttons. And be thoughtful about where on the screen you place them . UX expert Josh Clark writes, “While a thumb can sweep most of the screen on all but the most oversized phones, only a third of the screen is truly effortless territory: at the bottom, on the side opposite the thumb.”
Any time you add a button to your site (and for all those already there), take some time to test them out yourself on however many mobile devices you can scrounge up amongst your employees and family. Make sure selecting each button is reasonably easy on all the devices and, if it’s not, update it so that it is.
Reading on a small screen is that much harder if the font is tiny. It’s best to use a font size of at least 14px on your webpages, but go ahead and test out how that looks to see if going bigger could be better here.
It’s also best to stick with standard fonts. Any font your visitor’s browser might need to download will slow down how long it takes your website to load, which is bad news on mobile.
Using flash throughout your website is an SEO mistake . It can slow down a page’s load time and there are a lot of browsers and devices where it just doesn’t work at all. Neither Android nor iOS devices support flash, so if you build a website that depends in any way on the experience of a flash animation, your mobile users will be left out.
Most designers know by now not to use flash on a website, but if yours was built a few years ago, you may still have some lingering features that use the outdated technology. Scrap the technology altogether on your website and find a strong web design that works without it.
The viewport meta tag is an easy way to control how your website shows up on mobile. If your page opens up as the same width on the small screen of your phone as it does on your desktop, you’ll have to awkwardly scroll from side to side to read each line of text and see the different sides of the page. The viewport meta tag tells browsers to fit the width of your page to the screen of the device type the visitor is coming from.
Adding this to your html is pretty simple. Just paste this onto the html for each page:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
We all deal with the small annoyances of autocorrect all the time but even so, website owners often fail to think about the little ways autocorrect can make a user’s interaction with your website inconvenient.
If you have forms on your website that ask for name or address information, one small way to make providing that information easier on your mobile visitors is to turn off autocorrect for each form field, otherwise their phone will try changing their name or street name to more common words and slow down the process of filling out your form.
In the input field, make sure you include autocorrect=off in the html.
And if you haven’t already, make sure your forms are short. Don’t require visitors to provide more information than necessary. No matter what device they’re on, if the form takes too long to fill out or demands details a visitor doesn’t want to share, they won’t bother.
Some of your mobile visitors may actually prefer to see the desktop version of your website instead of the mobile one (especially if you go with a mobile version of your website rather than a responsive site).
Give them a way to do that if it’s their preference. You want your visitors to be able to interact with your website in the way that makes the most sense for them.
The best thing you can do to make sure your website offers a good mobile experience is to regularly test it out yourself on your mobile device. Every so often, pull up your website on your phone and tablet and spend some time browsing to see if anything’s hard to see or difficult to do. Ask your employees to do the same, and consider hiring users to do testing as well (since they’ll be seeing it all with fresh eyes).
Regular testing is the best way to catch small issues that create a worse experience for your visitors. The faster you notice them, the sooner you can update your website to provide a truly mobile-friendly experience.
Even if you get everything right today, the way mobile devices look and work will continually change and today’s mobile-friendly website may not still do the job tomorrow. Keep testing, keep tweaking where needed, and continue to think about your mobile users as a priority and you should be fine.
[adrotate group=”6″]
Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.
Share this:
- Click to share on Twitter (Opens in new window)
- Click to share on Facebook (Opens in new window)
Prices reflect discount on first term
HostGator often offers promotions, coupons and special offers to customers during their initial term. Please note that special offers are limited-time promotional prices that are available to new customers and are valid for the Initial Term only, and not for successive or renewal periods. Promotional rates apply to GATOR, Shared, Cloud, VPS, Dedicated, WordPress and Reseller hosting plans and will automatically renew after initial term at regular rate found in your control panel. Note: If you register a free domain through us and wish to cancel your account, there is a fee to retain your domain.
IMAGES
VIDEO
COMMENTS
There are many advantages and disadvantages of HTML, including compatibility and difficulty of use. All Web browsers can read HTML files and webpages, but the language can be difficult to decipher, especially since one small typo could lead...
HTML is to a website what a solid foundation is to a house. Without HTML code, web developers wouldn’t have anything to build on. In other words, you wouldn’t be able to read this article without proper HTML code. Learn more about how this ...
If you created your website with a type-and-post editor, find out how you can convert it to HTML. Use these steps to get the code or save to report. Did you create your site with a website editor? Many people make their first site with a we...
Setting The Viewport. To create a responsive website, add the following <meta> tag to all your web pages: · Responsive Images. Responsive images are images that
Make Your HTML-Website Suitable for Mobile Devices · Step 1: Some Illustration · Step 2: Tools You Need · Step 3: Add One Code Line in the HTML-File · Step 4: Media
How to make Website Mobile Friendly? · 1. Implement a Responsive Layout · 2. Optimize Website Speed · 3. Subtle Pop-Up Implementation · 4.
The meta viewport tag instructs the browser how to adjust the page to the width of each device. When the meta viewport element is absent, mobile
Make your website mobile-ready, automatically adapting to a mobile phone or computer as needed, using CSS.
In 2020, more people view websites from their phones than from a desktop. Having a mobile friendly website is important.
Learn How To Make Responsive Website Design Using HTML And CSS Step By Step❤️ SUBSCRIBE: https://goo.gl/tTFmPb❤️ Complete website Using
To make your website mobile-friendly, you'll need to: · Choose a mobile-responsive theme or template · Strip back your content · Make images and
If you're using a responsive design, always double-check that your HTML contains a properly formatted “Viewport Content” tag. It will help you avoid your site
Adjust the layout by setting points according to the size proportions and orientation. It is also a good idea to make your page suitable for
12 Steps to Make Your Website Mobile-Friendly · 1. Make Your Website Responsive. · 2. Make Information People Look for Easier to Find. · 3. Ditch