You can achieve a consistent website experience across all devices with a simplified, mobile-friendly site. These sites may not have crazy features or functionality, but they just work. Think about going mobile-friendly if: You don't have a huge mobile audience looking at your site on mobile - less than 35 percent. By now, I’m sure you know that mobile-friendly websites are the norm – not the exception – on the Internet. They are a Google best practice, and provide a better overall browsing experience for your website visitors. Additionally, more time is spent browsing the Internet on mobile devices, rather than on traditional desktops. Having a mobile-friendly website takes a lot more than simply building a responsive website. Having a responsive website simply means your website will size down to render on a mobile device screen. But that does not mean you are providing great mobile user experience.
- Your Websites Are Now Mobile Friendly Resorts
- Your Websites Are Now Mobile Friendly Countries
- Your Websites Are Now Mobile Friendly Hotels
- Your Websites Are Now Mobile Friendly Cell Phones
Home >> Web Design >> Tips for Mobile Design
If you view this website on your phone, you will notice all the content displays nicely in one column, but if you view it on a desktop, you will see 2 columns.
This is an example of a responsive website design. It's a trend that people are using now to make their websites more mobile friendly.
And there is no reason why you shouldn't have a design like this today.
Why Responsive Web Design?
People access the Internet from so many types of devices today that it’s important for a web page to function properly on any of them.
With the growth in popularity of tablets and smartphones, more people than ever are using devices with smaller screens to surf the Web.
The goal with responsive design is to have one site with various elements that will respond correctly on different sizes of devices. No need to make several versions of the site anymore.
Remember, most users do not appreciate any site that causes them to take additional steps to use it. Also impacting the problem is the fact that many smartphones and tablets can be used either in landscape or portrait position.
If your site has been designed to be responsive, the smartphone and tablet screens should properly display the site for users. In this way, users will find the content easily navigated.
Smartphone users may be able to swipe over their screens to view all the columns, but it's best to make sure they don't have to.
Images should automatically resize, so they won’t appear distorted.
Your Websites Are Now Mobile Friendly Resorts
Sites that are responsive in design have fluid grids. The elements of each page are proportionately sized, rather than being sized by pixels.
The page design must also allow for touch screens as well as mouse users. Touchscreen users must be able to see the areas on the screen where they need to make their selection.
If I've confused you with all this terminology, don't worry. The solution is much easier than you might think.
How to Make a Website Responsive
What method you choose is going to depend on the time you're willing to invest and amount of money you want to spend.
Here are a couple of options you can consider...
Get a Responsive WordPress Theme
This is the easiest solution for most people and since more and more people use WordPress to create websites, it's becoming a more popular choice.
A responsive theme already has the code in place out of the box. So as soon as you install it, you're done!
So if you created your site with WordPress, just search for a theme that is already responsive.
I use the Daily Dish theme and love it. If you don't want to buy a theme, you can use a plugin called WP Touch. It works for most themes and uses a standard layout/design for all sites.
The downside to using a plugin is it may not work with all WordPress themes.
Using Media Queries (CSS3)
If you don't have a responsive theme or you have an HTML / static website, you can add media queries to your existing design.
Sounds complicated, but that just means you have code in a stylesheet that tells the browser how to display your website in different resolutions.
Below is an example of a media query you could add to your stylesheet.
The above query simply tells the browser not to display the sidebar on devices with a maximum width of 480 pixels.
Where did the #sidebar syntax come from, you ask? You would use the name of the ID that is used on your stylesheet (css file).
If you use WordPress, you can find your stylesheet under Appearance >> Editor.
Your site may call it #leftnav. Or maybe your header is labeled #header.
So hopefully you get a basic idea of how this all works.
This site offers a nice overview of Media Queries if you want to learn more.
Dealing With Image-Based Headers
One downside to responsive design is if your site has an image header, it may not display optimally on all devices. Sometimes part of the image will be cut off, depending on the mobile device.
The Responsive Images WordPress plugin will allow you to create different sized headers that will load depending on the size of the mobile device. If less capable mobile devices are being used, this will allow them to download smaller image files.
Outsourcing Your Mobile Responsive Design
If you'd rather not fuss with any of this, you can always hire someone to do the job.
Sites like Elance and oDesk help you find qualified people. Plus, you can preview their work history and feedback.
In fact, if your existing design is quite complex, it might be better to outsource the task to prevent you from pulling your hair out.
Just remember to choose your programmer wisely.
Avoid the urge to save money in development, since you don’t usually get more than what you paid for.
Good developers are worth the prices they charge. Be open to working together with them, and be ready to discuss any details they may have to show you.
Test how thorough they are and how quickly they respond by communicating with them before you hire them. Both Elance and oDesk allow you to correspond with potential freelancers before committing.
Here's something else to consider...
As soon as you post your job, freelancers can begin applying. Many will only reply with a stock message and their resume/experience attached.
I prefer for potential freelancers to actually respond to my job by mentioning specific details about why I should hire them for the job. It lets me know they've actually read the description.
I don't hire people who only leave stock replies.
Also, make sure you are clear on the scope of the project before submitting your job request.
- What elements of your site should be displayed/omitted when viewed on mobile devices? Make a list. Be specific.
- Find out if your needs require a complete redesign or just Media Queries that will simply rearrange you content when viewed on smaller devices. This will greatly impact the price of the job. Be sure to ask.
- At what resolution should the design change (1024 pixels and lower, for example)
- Make a list of any components on your site that may need special attention when viewed on mobile devices (email forms, games, widgets, etc.) Be sure to inquire about these as well.
- Be sure they have a plan for handling your images.
- Are there any sites you'd like to model your design after? If so, include them.
- Ask for sample responsive design work they've completed.
Rest assured your money will be escrowed until you release the funds to the freelancer. So you don't pay until you are happy.
For the record, I have used Elance and had very good experiences.
Things to Avoid With Responsive Designs
1. Slow loading websites.
If you want to deliver a full-size experience even on mobile devices, you’ll want to make sure that mobile users will actually wait for the page to load.
Many mobile users actually leave after waiting only five seconds for a page to be loaded.
2. Hiding important content
Responsive designs have the ability to hide any element of the website. For example, you can opt to hide your sidebar on very small devices.
Make sure this makes sense for your website. The goal is not to penalize mobile users for the devices they have chosen. Make sure that the most important functions of your website can still be accessed.
3. Thinking that one-size-fits-all will work
Mobile devices mean more than just smaller screen sizes. There needs to be more effective use of responsive design than on the site layout alone.
Smartphones can be used for calls and to obtain the location of users, and the browsers should be able to access more API’s, which allows for more of the web to be accessible anywhere.
4. Ignoring context
Each device has its own interfaces, opportunities and constraints. Keep all those variables in mind when you strive to create a user experience that will feel natural.
Think about the icons that people use, and how they orient their devices. Responsive sites should go outside the browser box and reach out to the user.
5. Relying on the dimensions of devices
You have no control over the size of your visitors’ browsers. Each manufacturer makes their devices with the dimensions that they believe are most appropriate. Actual page height does not take into account variables like toolbars or bookmark bars.
Visiting links through Twitter and Facebook apps, along with others, means being forced to use their custom chrome for the containment of web views. Your designs need to hold together, regardless of the specific dimensions you might be dealing with.
Additional Things to Consider for Your Mobile Website Design
How are menus handled?
Not all navigations look great 'as is' when sites become responsive.
Your Websites Are Now Mobile Friendly Countries
If you don’t handle this properly, the nav can break in unusual places on mobile screens. Think about the small screens when you are working on designing your site.
Take note of the hierarchy of your content.
If content won’t fit on smaller screens, you can drop it from the site. Widgets and sidebars might be hidden when scaled to fit mobile devices. You need to determine what you will allow to be unseen and what will remain.
Responsive themes like this one will handle sidebars by dropping them below the content. Be sure that you check the order in which your content appears, regardless of the size of screen you’re catering to.
Does your design handle video?
If you use video a lot on your site, embedding itself can cause problems when you create responsive designs for your web pages. You’ll need to use specialized HTML so that your video content will be properly resized.
If you use YouTube, you are in luck. The embed code is already responsive (iFrame) so there is nothing extra you need to do!
This can be somewhat time-consuming, but it can save you money in the long run. Prototyping tools like Keynote are helpful in studying the way your site will perform. You can even do prototype work in a browser with HTML.
Use different devices to preview your design.
When you’re checking to see how well your designs work, use different browsers, like an iPhone and a tablet. Use differing sizes, and if you’re working for a client, show then the different ways the site will behave.
Here's a great tool to test your site's design on multiple devices.
Test, test and retest
Development is critically important in the process of mobile website design. Test your site on every different platform you can find, and give accurate feedback to your developers. Be exact about the way you’d like interaction to work.
Responsive design can be tricky. Take your time on the project and make sure you get the outcome you desire.
Ready to Start Your Site?
If you haven't created your site yet, you can start at the domain registration step and learn more about what's involved.
If you want to learn more about building a website with WordPress, click here.
If you liked this, please share. Thanks!
Is your website mobile-friendly? If this isn’t a question you’ve asked yourself yet, you should start doing it now. Mobile-friendliness is one of the most important ranking factors in Google, and can play an essential role in your company’s digital marketing.
But while asking the question is easy enough, answering it can be harder. Plenty of factors contribute to mobile-friendliness, and it can be difficult to tell whether your website is optimized for all of them.
That’s why WebFX has created this free mobile-friendly checker. Just plug in your website’s URL to get a report on your site’s mobile-friendliness within seconds!
Once you’ve gotten your results from the mobile checker, you can get a more in-depth analysis of your site’s performance in search by using our SEO checker!
WebFX SEO Checker
- it's Comprehensive.
- it's Immediate.
- it's FREE.
Check your mobile-responsiveness now with our mobile-friendly checker tool
Here’s what you’ll get from our mobile-friendly checker tool:
Our mobile-friendliness analysis provides a generalized look at how functional your website is on a mobile device, and how easy it is for users to navigate it there. Recommendations you receive might include:
- Limiting plugins
- Using a responsive site instead of a separate mobile site
- Using accelerated mobile pages (AMPs)
Tap targets analysis
The second section of our mobile-friendly report will assess your tap targets, or the buttons people can tap when they visit your site on their phones. Ideally, these buttons should be large enough — and spaced out enough — to tap without difficulty.
Mobile viewport analysis
Finally, you’ll receive a mobile viewport analysis. This analysis looks at how well your content can adjust across different types of devices, such as phones and tablets. Recommendations on this front may include:
- Avoiding large, fixed-width images
- Using a meta viewpoint tag in the head tag
- Using relative width values in your CSS
Why checking your site’s mobile-friendliness matters
Why is it important for your website to be mobile-friendly? There are several reasons, but the first one is that without a mobile-friendly site, you won’t rank well in Google.
Google ranks websites based on their mobile format with it’s mobile-first index. So, if your site isn’t mobile-friendly, you will struggle to perform in search results.
Even beyond rankings, mobile-friendliness is key to providing a positive user experience and driving conversions. Over half of all Internet traffic happens on mobile, so without a mobile-friendly site, you’re missing out on many potential customers.
It can be easy to assume that your site is mobile-friendly simply because you can visit on a phone, but that’s not what “mobile-friendly” means. It needs to be optimized to look good and function efficiently on a mobile devices and keep users engaged.
5 tips for making your website more mobile-friendly
If the results of your mobile-responsive test aren’t everything you’d hoped they’d be, don’t worry — there are ways to fix that! On top of the specific recommendations that come with your report, a few simple tactics can send your mobile-friendliness rocketing up.
Here are five ways you can make your site more mobile-friendly and improve your rankings as a result:
1. Scale things differently
When people visit your website on a mobile device, the screen is smaller, which makes things harder to see. To accommodate this, you’ll have to scale things differently in the mobile version.
To start with, the font size you use for the desktop format of your site may be appropriate for a computer monitor, but unreadable on a phone. Make sure you adjust text so users don’t have to squint — though don’t make it too large, either!
The same goes for buttons. It’s simple enough to click something with a mouse, but trying to tap something only a fraction of a centimeter wide can be difficult and frustrating. Enlarge buttons as needed so users have no trouble tapping them.
While text and buttons often require enlarging, other things — like images — often need to be made smaller so they don’t take up the entire screen.
2. Simplify forms
Next on our list of mobile-friendly tips involves simplifying your forms. Filling out forms on mobile is a different experience than on desktop, so it’s critical that you adjust your forms for mobile users.
When on a computer, your audience may be comfortablewith using forms that require submitting multiple pieces of information. But on a phone, people’s patience tends to be lower, and it’s harder to type information and fill out multiple lines.
Don’t make users work through twenty different boxes in a form before they can hit “submit.” Simplify things as much as possible to make them easier to use. You can always ask for more information later.
3. Optimize page speed
Page speed is critical for your website. Most people expect websites to load within one or two seconds, and you don’t want to fall short of that expectation.
But on mobile devices, page speed is even more vital than normal. People want answers fast when using their phones, so you need a site that loads quicky.
Your Websites Are Now Mobile Friendly Hotels
Here are some ways you can optimize your page speed:
- Minify code
- Compress images
- Cache web pages
4. Break up written content
Having large blocks of text on your website is overwhelming. When people see enormous paragraphs, they tend to become discouraged from reading your content, especially if they’re on a mobile device
Since phone screens aren’t nearly as big as computer screens, even shorter paragraphs can often look long to users on mobile. Try to break up the text in your written content as much as you can to avoid driving people to hit the “back” button.
Here are some ways to break up text:
- Use shorter paragraphs
- Intersperse images and videos
- Harness bulleted and numbered lists
5. Use accelerated mobile pages (AMPs)
On top of using standard responsive design practices on your web site, you can set up some of your pages to be accelerated mobile pages (AMPs). AMPs strip away many of the less crucial elements of the regular page, leaving only what’s essential for users.
Here’s an article in a normal mobile format:
And here it is as an AMP:
One advantage of this is that with less information to process, AMPs can load much quicker than normal pages. They’re also easier on people’s eyes, using far more white space and removing non-essential elements from the screen.
Mid-Size Businesses Trust WebFX
Your Websites Are Now Mobile Friendly Cell Phones
Leah Pickard. ABWESee the Case Study
Get more help optimizing your mobile-friendliness with WebFX
Ready to take your results and put them into action? WebFX can help you! Our mobile checker is just the start. With our responsive design services, you can optimize your website to dominate search results and produce happy customers.
At WebFX, we’ve been driving results for clients for over 20 years. When you partner with us, you’ll receive a dedicated account representative to keep you informed and involved throughout the entire process.
To get started, just call 888-601-5359 or contact us online today!