Do You Want to Focus on Mobile Design?
Designing for mobile is different than designing for desktop. People are using their phones on the go, and they’re using them differently, too. With that in mind, here are ten commandments of good mobile web design!
Google’s Material Design guidelines can be a huge help when trying to design a good mobile website. As the company explains, “Material design is a system for creating bold and dynamic user interfaces.” With this philosophy in mind, you should create your website with specific goals in mind before designing it. In other words, why are users coming to your site?
Before You Start Designing
Here are the ten commandments of good mobile web design. They’re based on Google’s Material Design, but they’ll apply to just about any digital product. While these aren’t commandments in the traditional sense, you should treat them as rules when designing for mobile users.
1. Thou Shalt Not Let Thy Mobile Site Be Slow!
One of the worst things you can do is create a website that users have to wait too long to load.
The speed at which your site loads will affect whether or not people stay on your page – and if they don’t, it’ll immediately impact how engaged they are with what you’re doing.
Here are a few tips to ensure your website is running seamlessly from any browser or device:
– First, you’ll need the right tools. Make sure you have a speedy web host and that your site’s on a fast connection.
– Next, identify what’s slowing down your site. Load up the Lighthouse extension for Google Chrome and add it to your developer tools. This will tell you what’s going wrong with your site before it goes live!
– Finally, make sure to compress anything you can. Images, in particular, don’t load well over slower connections, so make sure they’re at a smaller size file size if possible.
Did you know that optimizing your website speed can boost revenue? On average, for every one-second increase in load time CTR decreases by 7%.
On top of slowing down your site, it’ll make visitors leave. If they get tired of waiting to see what you’re up to, good luck getting them back on the same page!
2. Thou Shalt Not Let the Breakpoints Be Too Far Apart
Breakpoints are a big deal in modern web design. They’re what’s allowing these responsive websites to work, and they need to be utilized correctly!
Breakpoints make it possible for users to see your content on any device – from phones and tablets to desktops and laptops. For this all to work, you’ll need to make your design adapt to different screen sizes. When doing this, though, the gap between breakpoints needs to be smaller than you think!
“10px is good for touch elements, while 20-40 works well for regular desktop viewports.” -Nils Borchers
There are plenty of opinions about this subject – especially on what the proper breakpoints are for desktop, tablet, and mobile. For the most part, though, it’ll depend on your project – so you’ll need to make sure you think through your decision!
3. Thou Shalt Consistently Design Between Platforms
It’s not enough to just design for mobile if you want a polished product.
Your website needs to look good on all platforms, as well as across devices and browsers.
One of the biggest mistakes you can make is having a design that works for one device but not another. This will lead to a big drop in users who end up looking at your site on their phones or tablets! A great example of this is when you take a mobile site and put it on the desktop.
You might notice that the entire page gets crammed into one column, or that navigation has been lost in favor of just one button. The same goes for when your website design works on iOS but not Android – even though at first glance they’re both Apple products!
Your web design will come across as unprofessional and incomplete if you don’t take the time to make sure it looks good and functions correctly on all platforms.
4. Thou Shalt Not Let Thy Mobile Site Be Confusing!
In a world where websites have to work across different devices, you need to ensure that people aren’t getting lost.
The best way to do that is by making your site easy to navigate. When users are scrolling through your mobile site, they should be able to understand where they need to go next – whether it’s downloading an eBook or clicking on a call-to-action button.
Make sure there are no dead ends, too! No one wants to see a page that takes them to another page but then requires them to click on more buttons to get any further.
If at all possible, you should design your pages with progressive enhancement in mind. This means that you’ll be making sure that your users will always have the best experience possible when browsing your site!
5. Thou Shalt Not Use Inefficient Fonts
When you’re designing a website, one of the things that will slow it down is your font face.
To have a good mobile site, you’ll need to choose fonts that are easy to read and free from bulky data. You can also reduce your load time by using font faces that are already installed on the user’s device!
The important thing to remember here is not to go overboard. Although it might be tempting to use every font you know, this could slow down your site and possibly impact its load time.
Fortunately, there are resources like Google Fonts that offer plenty of options for free!
6. Thou Shalt Make All Buttons Touchable
Mobile users rely on touchscreens to navigate your site, so they should be able to use all of its features!
While desktop sites can get away with just having a single button that does everything, you’ll need to include multiple buttons if you want your mobile design to work well.
If a user wants to download your eBook, for example, they’ll need a button that says “Download,” along with one that says “Buy Now” or something similar. This will help them get to where they need quickly and easily!
7. Thou Shalt Allow Thine Content To Be Parsed Properly
People will be using your website on their phones because they need information. That means you can’t assume that they read every word of your copy!
One way to make it easy for users to quickly get what they need from your site is to reduce the amount of text you have there in the first place. This might seem counterproductive, but it’ll keep your users from having to scroll through too much text before they get to the content that interests them.
8. Thou Shalt Make Sure There Are Plenty Of Links
As we just discussed, your mobile site should be designed with the user’s experience in mind. One of the best ways to do that and keep it simple is by including plenty of links, like the ones that take them to your blog posts.
These will make it easier for users to get more information on what you’re trying to communicate, which can be especially important if they’re on a mobile device. Remember: things are smaller there!
9. Thou Shalt Keep Forms Short
Forms can be incredibly frustrating to fill out when you’re using a mobile device, so it’s best if you keep them short and sweet.
This is another place where progressive enhancement will prove very useful! Some browsers may be able to handle more than others.
Regardless of the specific obstacles, you might face, however, just keep in mind that too much information can ruin a mobile user’s experience.
10. Thou Shalt Make Sure The Site Works In All Browsers!
Another great way to ensure that your site works well on all devices is by making sure that it works everywhere!
You won’t just need to test your website in different browsers, either – you’ll also want to go through it on different operating systems.
To make this process as simple as possible, consider using a service that allows you to test your site from multiple devices!
Designing for Mobile Is Different than Designing for Desktop.
People are using their phones on the go, and they’re using them differently, too. With that in mind, here are ten commandments of good mobile web design!
To have a good mobile site, you’ll need to choose fonts that are easy to read and free from bulky data. You can also reduce your load time by using font faces that are already installed on the user’s device!
The important thing to remember here is not to go overboard. Although it might be tempting to use every font you know, this could slow down your site and possibly impact its load time.
Fortunately, there are resources like Google Fonts that offer plenty of options for free! =>Forms can be incredibly frustrating when filling out while browsing with a mobile device; keep them short and sweet to give users an easier experience navigating through your website or app. One way to make this process as simple as possible is by using a service that allows you to test your site from multiple devices!
Client Testimonials for Mobile Web Design with Alignment Online Marketing:
- ““Alignment Online Marketing is fantastic! We had a website created by another company and we were never quite happy with it. So, we hired Alignment for our mobile site. Our mobile site was exactly what we wanted and its success has been enormous! Great Job!” – Paul G., Owner of Fitness Construction in Austin TX
- “I used to spend countless hours trying to get my sites to look right on any device. I was pretty much ready to give up when a friend told me about Alignment Online Marketing, and after looking into it made complete sense; there’s no way I could design for every single type of device out there! So here we are with my new site from Alignment and couldn’t be happier.” – John V., Owner of John Virtual in New York NY
- “I’m normally not the type to write testimonials, but I do owe this company my business. They gave me an awesome mobile site that looks great and works even better than I expected! We’re getting more likes on our Facebook page now than ever before!” – Bob A., Owner of Bob’s Garden Shed in Seattle WA
- “I’m in the process of hiring Alignment to work on my website and I can’t say enough great things about them! The staff is friendly, professional, and incredibly talented. I know that they’re going to do an amazing job!” – Elaine M., Owner of Green Meadow Yoga Studio in Miami FL
- “I had no idea how much competition was out there when I started looking for a mobile web design company to redesign my site. I got bids from like twenty different places. It was crazy, and it ended up being expensive, too! Luckily, Alignment saved the day; they gave me an awesome mobile website but did it for half of what everyone else wanted to charge me!” – Sam D., Owner of Sammy’s Hardware in Chicago IL
- “I love how simple it is to update my mobile site with Alignment, I don’t have to have some fancy IT guy do anything for me. Furthermore, I can quickly see how my new content is performing with their analytics dashboard! This is the only company that makes sense for me.” – Steve J., Owner of Steve’s Painting in Philadelphia PA
- “I’m so glad that I hired Alignment to do my mobile site, they’ve made it simple for me to get started. Plus, the responses I get from my new website are very encouraging! Now I just need to build back up my client list!” – Linda F., Owner of Little Corner Flowers in Los Angeles CA
- “When a local company from Austin, Texas redesigned my old site I was excited. However, as time went on I noticed it started to hurt business! When I found out that Alignment Online Marketing did mobile web design as well as traditional websites, I knew they were the right company for me. Ever since I’ve been with them, my business has grown and our site looks amazing!” – Jim W., Owner of Southern Security Solutions in Houston TX
- “We spent a bunch of money on billboards to get the word out about our new mobile website with Alignment Online Marketing, but it’s paying off! We’re getting more business now than we ever have before. I’d recommend Alignment to anyone who wants a great mobile web design!” – Sarah L., Owner of Culver’s Restaurant in Des Moines IA
- “Our old website from Alignment is doing better than ever! Thank you for all of your hard work, especially now that we’ve been able to add a lot of new content, we couldn’t ask for anything more!” – Ted R., Owner of Greenridge Car Wash in Portland OR
- “I used to try and do everything myself. I would spend hours fixing up my WordPress site and trying to “optimize” it for search engines with plugins and crap like that. However, once we partnered up with Alignment Online Marketing I realized how much of a waste of time all that was. They are the real pros!” – George C., Owner of Green Valley Carpet Cleaning in Dallas TX
- “Alignment does more than build mobile sites for me, they also manage my content too! My business has grown so much since I started working with them, I can’t imagine doing it on my own!” – Andrea M., Owner of Angels & Blessings in Boston MA
- “My old site was killing us. The web designer that we hired dug us into a hole! Then Alignment came along and gave us our dream website. Not only are they super affordable, but they provide great customer service too!” – Tamara W., Owner of DataFab Printing in San Diego CA
- “We had a local company build our first mobile website, and it ended up being a complete disaster! It was slow as hell and would barely load even on brand new phones. Now that we have our new site from Alignment it is lightning fast no matter what device it’s viewed on!” – Jason P., Owner of The Cleveland Car Wash in Louisville KY
Did You Know That Most Mobile Websites Are Slow To Load?
According to the Google Developers Mobile Guide, “if your page takes more than five seconds to load on mobile, you should expect 20-30% of people to abandon it.” With that in mind, there are certain fundamental rules that all mobile websites must follow. Many of these principles stem from the “mobile-first” design philosophy. So what is mobile-first design? This type of web design approach puts the needs of smaller devices first, taking into account their limited screen size and bandwidth capacity. The number one goal with this method is to create a website that delivers content quickly to your visitors regardless of device or internet connection speed.
FAQ For Mobile Web Design
#1 – How Do I Know if My Website Is Mobile-Ready?
Every website should have a responsive layout. If you’re built your site using a content management system, then chances are you already have one. In WordPress for example, simply choose “Responsive” from the Layout section of your theme’s customization page. Additionally, make sure that every image on your blog is optimized for mobile by using a plugin like EWWW Image Optimizer. If you’re building a site from scratch, consider using a framework like Bootstrap to speed up the design process and ensure that your final product is responsive.
#2 – How do I know if my website loads fast on mobile devices?
One of the best ways to check the load time of your website is to use WebPageTest. Simply choose the “Mobile” option, then enter in your domain name and you’ll get a list of key metrics like the number of requests, load time, and page size. Make sure that the content appears within five seconds!
#3 – How can I tell what devices are currently accessing my website?
Use Google Analytics to check out your site’s analytics. On the Overview page, click on Mobile > Overview and you’ll be able to see a list of all mobile devices currently accessing your website. Ensure that this number reflects your actual visitor count–if it doesn’t, then there is some sort of device detection issue going on!
#4 – How do I make sure that my site is accessible on mobile devices with limited internet connectivity?
This one’s easy! Ensure that any page content can be accessed even if JavaScript or CSS is disabled. HTML5 video should also have an alternative text-based player, and pages should default to the most basic layout possible when viewed without JavaScript.
#5 – Why do I need to think about using different domain names for mobile users?
When designing mobile-first websites, it’s important to think of all the ways your visitors might access your site. This means that any page content should be accessible even if scripts and stylesheets are disabled, or if they’re using a slow internet connection. This means that your site should load just as quickly on mobile devices as it does on desktop computers, and you should consider serving up different content to users that visit from tablet and mobile connections.
#6 – How can I convince myself and my boss we need a completely separate mobile version of our site?
To some people, the responsive design seems overkill. It does require quite a bit of work to create, however it will save you time in the long run. If you feel that your site is too complex for this method, then go ahead and create a separate mobile version of your website! This can be done by simply creating another directory on your root directory, or by using subdirectories. This way, you’ll be able to direct your mobile traffic to the right place without interfering with your desktop site’s flow.
#7 – How do I ensure that my contact form is easy for visitors on all devices?
Every input field on a contact form should have placeholder text, and this text should be brief. There should also be a way for users to clear their information from the form, and your labels should use proper semantic markup.
#8 – How do I optimize my contact forms for responsive design?
If you have a lot of fields in your contact form, it’s a good idea to break them up into sections. This will make it much easier for mobile users to submit their information in a readable way. Additionally, you can add a drop-down menu for each section that contains the options “Email,” “Phone,” and “Message.” You should also use labels instead of input tags when possible!
#9 – How do I indicate that my site is optimized for mobile devices?
This is easy! Just add an icon that looks like a smartphone before your website’s URL. This way, it’ll be incredibly obvious to users whether they’re on the desktop version of your site or the mobile version. Not sure what this icon should look like? Check out https://www.mobi-tech.com/ for a list of icons to choose from!
#10 – How do I ensure that my images are optimized correctly?
Ensure that all your images (or as many as you can feasibly manage!) are scaled-down and compressed before uploading them to your site. Make sure they’re still legible, but don’t worry about making them a specific size in pixels. You can always change the scaling later on, in your CSS stylesheet!
