Over the course of the last decade, people all over the globe have begun to use mobile devices to access the internet. The traditional desktop computer, while still relevant, is no longer the primary device used to browse the web. This means that you need to make sure you have a responsive website for both desktop and mobile users.
Why? Because you risk losing potential customers if they visit your website on their phone and it doesn’t load correctly, looks wonky, or is difficult to navigate. It’s not enough for your website to be mobile-friendly. It needs to be mobile responsive. Meaning, the website automatically reformats for mobile browsers.
Luckily, Constant Contact’s websites are formatted for both desktop and mobile devices. That means you don’t even need to know how to check the responsiveness of the website. However, for those who don’t have a website that’s automatically mobile-friendly, we’ll discuss:
- How to build a responsive site
- What to consider in responsive web design
- Why use responsive design?
The quick trick? Use Constant Contact’s website builder to create a responsive website and your finished platform will be ready for thumb-scrolling, smartphone-browsing users everywhere.
How to build a responsive site
To create your mobile responsive website, the first thing you will need to decide is whether you will hire a web developer to do it for you, or handle it yourself. Hiring a web developer is a tried and true method. By hiring a professional to do it for you, you stand a good chance of having the job done right. However, the downside is that hiring someone for the job will cost you extra time and money. How?
- Time – To put it simply, there is no way for the developer to know what vision you have in your head for this website. You will be forced to spend a significant amount of time communicating every detail you wish to be included and how you would like each element to be prioritized (more on that later).
- Money – Professionals must be paid for their time, and if you or your developer aren’t efficient with your communication, you could end up looking at a rather large development cost.
The other option is to build it yourself with a user-friendly mobile-responsive website builder that’s precoded and ready to go.
Constant Contact mobile-responsive website builder
Constant Contact offers a mobile-responsive website builder that comes with all the tools you’ll need to build your site. It includes instructions and tutorials to help you along the way, and it saves you a ton of time and money that you would otherwise pay for the services of a professional web developer.
What to consider in responsive web design
Let’s step back for a second and address the following more thoroughly: what is responsive web design? Well, the whole point in making your website mobile-responsive is to improve your users’ on-site experience by making it visually appealing and easy to use (on whatever device they are using to access it). The types of devices users might access your site with are:
- Desktop computer
- Laptop computer
- Mobile tablet
- Mobile phone
Now, your standard website is already built to work on a desktop or laptop. Both of these have large enough screens for you to include text, pictures, links, graphics, and any other element you might want on one screen, all the while keeping them readable.
But what happens when you shrink the size of the screen to that of a tablet or mobile phone? Suddenly, your sweet looking website with all its cool pictures and graphics is so small that your users can’t read any of it.
This is where a mobile-responsive site works its magic.
It will automatically change the layout of your website to make it work on smaller screens. But how do you achieve this? Here are some things to consider for responsive website design:
Fluid Grid
To make your website mobile-responsive, you’ll need to build it on what is called a “fluid grid.” Early websites are all built on a fixed grid, which means that every element on the page is laid out in a fixed position.
If you’ve put your title at the top, your text below it, and a picture on the right-hand side of the screen, then that is where they will appear on any screen, no matter what the device. This becomes a big problem when you shrink the screen size down to that of a mobile phone. Using a fluid grid fixes this problem because it is both flexible and scalable.
A fluid grid allows you to add elements in a way that adapts, or changes, to fit the size of the screen your user is viewing your page on. It will automatically adjust the font size of your text, the size of pictures and images, and where they’re all placed on the screen.
Think of a fluid grid as water poured into an oddly shaped bowl. What happens? The water adjusts to the landscape, giving shape to form.
With a fluid grid, no matter what the device, the website adapts.
Prioritize web elements for mobile layout
The next step is to prioritize the elements in order of importance to your users. This means that you will have to go through and pick out which text, images, and action buttons are so important to your webpage that they must be displayed on the screen.
When you shrink the size of the screen, you automatically have less space to work with.
And while you could include a whole bunch of cool stuff for users to look at on each screen, a lot of them would be so small that users wouldn’t be able to see them well, which is frustrating.
So, you’ll have to decide which pieces are most important and include only those on the mobile portion of your layout.
Ask yourself:
- What information do my users need to know to make use of my webpage?
- Which links do they need to have if they require more information?
- Which buttons will they need to complete a purchase?
- Which text blocks, pictures, buttons, or links need to be grouped together to make my website easy to work with?
The answers to these questions will help you decide what information should be included on your mobile pages, and where they should be placed to make your site the most user-friendly.
Think carefully about images
How to include images on your mobile website can be one of the most challenging parts of the entire process. While you build out a responsive website, you will need to create rules that decide how images will be handled on different pages and screen sizes.
Let’s say you want to include the same image on multiple pages, but each of those pages has other elements included that are different from each other. On the first screen, you might have just a little bit of text and a couple of other elements. This would leave you with plenty of room to leave the image at full size. But what if the next screen has a lot more information that needs to be included?
Because you will have less room, you will have to decide whether the image needs to be:
- Shrunk vertically
- Shrunk horizontally
- Placed in a different position on the page
- Removed entirely
You probably want these images included on the page for good reason. After all, a picture is worth a thousand words. But when working with limited space, you’re going to run into some tough decisions, so think carefully about how you can display your most important images to make the most of them.
Save room for touchscreens
This one might seem obvious (since nearly every tablet and mobile phone on the market these days uses a touch screen). In this case, we’re not necessarily talking about them. These days, more and more laptops and even desktop monitors are being manufactured with touch screens. In the interest of making your website appealing to every user on any type of device, it’s important that your website is touchscreen-friendly. To make this happen, there are two main things you’ll want to consider:
Tap target size
Your tap targets are the links or buttons on your webpage that let users interact with the page. These can be anything from links for other pages; to dropdown menus; text boxes to enter usernames, passwords, personal information, or billing information; to action buttons that help users navigate the page like “forward”, “back”, “enter”, or “submit”.
A mouse arrow is precise, so you can hit small targets on a screen with one. However, it’s harder to hit targets with a human finger, so they need to be made big enough for people to use on their touchscreens.
Tap target spacing
Additionally, tap targets will need to be spaced out with enough room between them that people with larger fingers don’t accidentally hit a tap target that they did not intend to. When people hit the wrong target, it might take them to a page they didn’t want or need to see.
If they’re filling out a form, it could cost them all the progress they have already made, and force them to go back to the beginning to fill everything out again. Either one of these will likely cause users to become frustrated, and you don’t want your users to be frustrated.
Use a template
Speaking of frustration, if the thought of designing your mobile-responsive website from scratch seems overwhelming, go ahead and use a template.
There are plenty of pre-designed templates with all different kinds of themes and layouts to fit your particular project. Using one of these saves you the hassle of deciding on a layout for yourself and instead, frees you up to fill in the branding, color scheme, and other elements that are specific to your company.
Constant Contact’s templates, for instance, come with tons of different themes that are already optimized for mobile. Choose one, fill it out, publish it, and voila! You have a mobile-responsive website.
Why use responsive design?
At this point, you might be wondering if all of this is really worth the time you’ll have to spend on it. The answer is absolutely, yes. But why use responsive design? Well, statistics show that mobile-responsive websites are, without a doubt, good for business, and there are a few different reasons for this.
Mobile-responsive reaches new customers
Once you launch your mobile-responsive site, you will be able to reach any customer using the internet on any type of device. Also, your potential customers will be able to enjoy the same level of functionality from your site, regardless of which device they visit your site from.
Mobile-responsive reduces frustration
Reducing frustration on behalf of your users is one of the biggest things you can do to ultimately increase sales. People are turning to you and your business to help them fix some sort of problem; not create another one.
Studies show that customers are actually more likely to turn to a competitor when they become frustrated with your site, and it doesn’t take much to make them frustrated. Make sure that your design has a seamless mobile experience to keep customers doing business with you.
Why mobile web design is good for SEO
SEO is short for search engine optimization, which is a fancy way of saying that your site is well suited to the needs of Google and other search engines. When your site has good SEO, it means that Google and other search engines like the way your website is built, because they think potential customers will like it.
What this means for you is Google (or other search engines) will make your content visible and move your page toward the top of users’ search results, making your business easier to find than the competition.
How to get started
The only thing left to do is get started. Constant Contact knows how to make responsive website building easy, cheap, and fast, and we’ve made it all possible with our mobile-responsive website builder.
Constant Contact’s builder includes:
- Templates that fit your industry. Just type in your business or blog idea.
- Themes that match your business’ personality. Choose one and start customizing.
- Image cache with over 550,000 professional quality images. Use these to start filling out your site.
And, you have access to a whole lot more to get your website built quickly and easily. Create a responsive website today!
The post How to Make a Mobile-Responsive Website appeared first on Constant Contact.