Take these 6 steps, create a special page on your freelance website, and point new clients to your web design process. Most clients will prefer a clear, actionable plan for their web design project, and clarifying your website design process will help with communication throughout the project, ultimately leading to happier clients–and less. Shop Costello is a website with high visual impact – the designer has a Nicki Minaj collaboration on sale – but what the design does well is to tell users how to find out more about the fashion items on the website. The SHOP button is easy to find and is placed in a prime location so that users won't miss it. Making your website user-friendly is extremely important to make sure your customers keep coming back. When UsabilityTools published the results of a case study that analyzed and tested the websites of 8 universities, it became clear that the people preferred websites with clear menu labels and transparent information. Approach #2: Go With the Flow – Responsive Web Design. Responsive web design enables a pre-existing website to resize and re-adjust automatically for various mobile devices. Technologies like CSS3 and HTML5 make it easy to design your site to adapt to any device it’s being viewed on, converting the website to a mobile layout for better viewing.
- 6 Tips For Creating A Website Design That Sticks With Users Using
- 6 Tips For Creating A Website Design That Sticks With Users Must
- 6 Tips For Creating A Website Design That Sticks With Users Use
We’re on a bit of a mobile kick lately – my last post was about mobile marketing basics, and today we’re diving head first into mobile websites.
We will be covering different approaches to mobile website design, mobile site best practices, and what you can do to easily make your site mobile-optimized! Get ready to touch, tap, and swipe your way into the world of mobile web design!
Mobile Website Statistics: Why You Need a Mobile Friendly Website
If you aren’t quite sure about whether or not it’s worth your time to learn about mobile site design, these mobile website statistics will convince you!
- Global mobile traffic now accounts for 15% of all Internet traffic
- No one screen size has more than 20% of the market share
- 61% of people have a better opinion of brands when they offer a good mobile experience
- 60% of mobile shoppers use their smartphones while in a store, and another 50% while on their way to a store
- Tablet users spend 50% more than PC users
- Mobile-based searches make up one quarter of all searches
- Every 100ms increase in load time decreases sales by 1%
Mobile Website Design’s Biggest Rule: Keep it Simple
Your mobile website doesn’t need to have the same kind of pizazz and showmanship as your regular, full-size site. On a tiny screen, big, flashy graphics take up too much space and can result in snail-paced load times, which mobile users simply won’t accept.
Mobile sites should be more basic and bare bones, with a simplified design. Remember that most mobile users are visiting mobile sites for hard info, not for curiosity or general interest. The goal is to provide mobile users with the information they want and nothing extra. This means streamline navigation and layout, keeping things as easy and simple as possible.
That being said, this doesn’t lock you into having an ugly site – aesthetes rejoice! You can still create beautiful mobile websites. CSS3 lets mobile website designers create some pretty attractive graphics with features like gradients and drop-shadows, letting you have a polished mobile website without the clunky weight of large graphic files.
With this overarching concept of mobile simplicity in mind, we can start to think about how to actually go about our mobile website design plan. There are generally two approaches.
The Two Approaches to Creating Mobile Websites:
1. Build a unique mobile website
2. Design existing website to adjust itself for various mobile devices (what is called “responsive design”
We’ll be discussing these two different methods in detail. There’s no right or wrong answer, but your business’s priorities might make one option better suited for you.
Approach #1: A Domain of Their Own – Creating a .Mobi Website
.Mobi websites are sites that have been specifically designed to be viewed and navigated on mobile devices. Technically any domain can be viewed on a mobile device, but .mobi sites claim superior usability.
From a user perspective, .mobi is preferable since all .mobi sites MUST be optimized for viewing on a mobile device. From a business perspective, there is a solid assortment of both pros and cons in taking the .mobi design route.
PROS of Building a .Mobi Website:
- Specifically designed to work well on small mobile screens
- Minimum amounts of bandwidth is used, letting sites load faster
- Simple, light, and streamlined
- More likely to appear than .com sites on mobile searches
- Since you’re building a separate website, you can adjust content to rank for specific mobile search queries, which often vary from classic desktop searches
CONS of Building a .Mobi Website:
- You now have two separate websites to maintain (your regular .com domain and .mobi mobile domain)
- You must start SEO work for your .mobi from scratch
- Having two domains means the increased possibility of duplicate content, which could mean getting penalized by the Googs
Approach #2: Go With the Flow – Responsive Web Design
Responsive web design enables a pre-existing website to resize and re-adjust automatically for various mobile devices. Technologies like CSS3 and HTML5 make it easy to design your site to adapt to any device it’s being viewed on, converting the website to a mobile layout for better viewing.
Responsive web design is a great option, and growing more popular by the day as the variety of devices that access the web grows. Mashable noted that last year they were accessed on over 2,000 different mobile devices! Responsive design aims to make your site look gorgeous on all of them. Naturally there are some pros and cons.
PROS of Responsive Design:
- One single website adapting to different devices, rather than managing separate sites for different devices
- There are many responsive web design themes from Wordpress for under $100
- Responsive web design is the Google-recommended method of mobile website design
CONS of Responsive Design:
- Sites implementing responsive mobile web design can be slower to load than .mobi sites
- Website ads often break when being adjusted with responsive web design
- Information architecture and functionality can get screwy
Choosing Between .Mobi vs. Responsive Design
The .mobi vs. responsive web design battle is as great a rivalry as Coke vs. Pepsi, Energizer vs. Duracell, Mac vs. PC! Well, OK, it may not be quite that intense, but many web experts really do have some pretty strong feelings about which is the preferred method of mobile site design.
So which method is right for you?
Image from Google Mobile Ads Blog
There really is no right or wrong answer. Responsive design is easier to maintain, since you are dealing with one single website. However, creating sites customized specifically for mobile devices means you’ll have the chance to experiment with mobile-specific features like GPS and cameras.
Usually such functionality is resigned to apps, but implementing this kind of experience into mobile sites can result in extremely engaging and exciting sites. As Bryson Meunnier of Search Engine Land notes, this kind of app-like behavior on sites should be more common, especially considering how some brands like Answers.com have found great success with this technique.
Some experts recommend that businesses with a smaller number of mobile visitors should go with responsive web design, while those with a large number of mobile users should create a mobile-specific site. Ultimately, it’s your call.
BTW: You can create a mobile specific site without creating a .mobi domain. You can just as easily set up a sub-domain like “http://m.domain.com” to put your mobile site on.
Mobile Websites vs. Apps: We Didn’t Forget Them!
I know, you’re probably thinking “Umm, hey, what about apps? Apps are great! There’s an app for that!” Apple did a pretty phenomenal marketing job getting us all excited about the idea of mobile apps. And while mobile apps are great, they really aren’t suited to every business.
Apps are software applications that need to be written in the native language of a selected platform like the Apple iPhone or the Google Android. There are some nifty advantages of creating a mobile app, but for most small to medium-sized businesses, it isn’t worth the effort.
PROS of Building an App:
- Since your code is specifically built for one platform, it’s more likely to perform well
- Getting an app distributed in app stores could increase attention and notice
- Apps can use a mobile device's functionality, like a built-in camera or accelerometer
CONS of Building an App:
- Expensive to develop and maintain
- User must take more actions before being engaged (they must download the platform-specific app marketplace, download the app, update the app, etc.)
- Individual app must be made for each platform
- Fees are involved with promoting the app on app stores
The truth is, you probably don’t really need (or heck, even want) an app for your business. Mobile websites earn a larger reach compared to apps, and consumers tend to prefer using the mobile web interface for searching, surfing, and shopping. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web to reading on an app.
What businesses will benefit from apps? As noted on Adaptistration, the businesses who will benefit most from apps are those who have specific content delivery needs, like wanting to stream HD video for subscribers of a specific membership program (Netflix, HBO GO, Hulu Plus etc.). Apps are also great for specific tools, such as an app to help users find the nearest gluten-free restaurant.
Don’t hop on the app bandwagon just because it sounds cool. If you want to put in the time and money to build an app, it should have a real purpose.
Mobile Website Examples: Learn From the Top Mobile Sites
Here’s a look at some of the best mobile websites brands have come up with.
Abercrombie & Fitch
What They're Doing Right: Collapsible navigation and a clean, simple design.
What They're Doing Right: Collapsible navigation, aimed for local intent with Location Finder and Offers, key information with nothing extraneous
What They're Doing Right: Simple and easy to understand
The sites above manage to be fun, creative, and engaging while still maintaining a simplicity that works well for mobile.
Examples of Responsive Mobile Design
Home Depot does a couple things really well with their mobile responsive web design:
- They’ve optimized the mobile experience for local, putting the “Store Locator” option at the top of the navigation menu
- Consistent and easy to navigate across screens
- Mobile device navigation is vertical and collapsible, keeping things simple for users.
- Like Home Depot, Starbucks prioritizes the “Store Locator” option
- Main image is consistent across devices, but sized appropriately for each screen
- Easy to navigate
Mobile Website Ads: Break It and No One Buys It
Mobile website ads can be somewhat problematic when functioning with responsive web design. The ads, which are shown across a wide variety of different-sized devices, end up being unintentionally warped or distorted. Stretch Armstrong rocks, stretchy pants are comfy as heck, but stretchy ads are just no good.
Want to see how your mobile PPC ads are performing? Our free AdWords Grader tool can help you out.
Mobile Website Design Tips & Best Practices
- Stick with Single Column - Single column designs are more manageable on smaller screens and convert from horizontal to vertical better.
- Think About How Your Content Will be Stacked - Define how your content will stack and reorder itself going from desktop to mobile.
- Go With a Collapsible Navigation - Collapsible navigation keeps your mobile design simple and clean. With collapsible navigation, menu items can be tapped to expand more options.
- Consider the Translation from Mouse Clicks to Finger Taps - Desktop computers allow users to easily handle designs where precise clicking is required, but since mobile devices use finger and thumb tapping, users need larger buttons that are less exact. Same goes for hover items – navigation menus that normally appear after a hover action need to instead expand with a tap.
- Don’t Forget Visual Indicators - While many desktop browsers have built-in progress indicators like loading symbols, these aren’t as common on mobile browsers. It’s best if you provide your own visual feedback as part of your mobile design. When a user taps a button, have the button change its appearance to show that a tap has happened. Try spinning icons for loading indicators, etc.
- Test Across Lots of Devices - Test, test, and test again! There’s a bunch of testing tools and device emulators to help you see how your site looks across different mobile devices (we’ve got some recommendations below!)
- Stay Practical - Most mobile users aren’t looking to dilly-dally. They are looking for information and they want it fast! Keep things simple, crisp, and to the point.
- Keep It Consistent - While you’ll absolutely want to change your design layout and maybe even add or adjust content for mobile, your core identity and message should be consistent across devices. Your mobile design shouldn’t look like a totally different animal than your classic site.
- Know Your Audience - Really take some time to consider your core audience and what they are looking to get out of your mobile site. Their intent on mobile is likely to be different than intent on desktops.
- Keep Text Input Minimal - While great progress is being made to make text input easier on mobile devices, it’s still a nuisance. Only make users input text when it’s essential.
How to Test Your Mobile Site
We’ve collected a bunch of free mobile site design testing tools to help you make sure your site looks great no matter who is using it. To be the best, you gotta test!
- MobiReady: a testing tool that evaluates the how well optimized your site is for mobile devices, taking into account mobile best practices and industry standards. You’ll get a score from 1-5 and a full site analysis.
- The Responsinator: A free tool for testing your mobile responsive design across popular mobile devices.
- GoMoMeer: This tool from Google shows how your site looks on a smartphone and offers a free report with personalized recommendations on how to be better optimized for mobile.
- Screenfly: Screenfly lets you view your website on variety of devices. Just pop in your URL.
- Mobile Phone Emulator: A popular mobile phone emulator, this tool allows you to test your site across a large number of mobile devices.
- iPad Peek: As its name implies, this tool lets you see how your site appears on the iPad or iPhone.
And there you have it - the complete guide to mobile websites and mobile design. Go forth and go mobile friends!
Designing a website is easier than it has ever been. Long gone are the days of manual coding and restrictive print-based layouts. Today, almost anyone can create a gorgeous, responsive, functional site in minutes — as long as you know where to start.
Fortunately, the basics of website design are relatively easy to understand if you apply some common sense and careful planning. Your goal should always be to create a site that is both visually striking and easy to navigate and use.
In this article, we’ll discuss how to design a website and share six key tips. We’ll also introduce you to WP Website Builder and demonstrate how you can use this tool to create your own website quickly and easily.
Related: Here’s Why Responsive Web Design is a Must
How to Design Your Site: 6 Key Tips for Success
1. Plan Your Design Thoroughly
Before you do anything related to website design, you’ll need a concrete and thorough plan. At this stage, you should clearly define your site’s goals and expectations and outline what you hope to accomplish with it.
Here are just a few of the questions you’ll want to have clear answers to:
- Is the site personal or commercial?
- Do you want it to make money, and if so, how?
- Will you be using advertisements or affiliate marketing?
- How much traffic are you expecting?
Put your thoughts and ideas down on paper and start drawing up a plan. We mean that literally, by the way. A smart method of planning your site is to create sketches of how you want it to look and operate. You should also take everyone’s ideas into account if you’re working with another web designer or collaborator.
By the end of your planning phase, you should have a blueprint of the site’s top-level framework. This includes a plan for its user interface (UI), sidebars, and other page elements, as well as an idea of how navigation will work. Doing this first will make it much easier to bring your vision to life.
We’ve Got a Great Design Tool for You
When you partner with DreamHost you get access to WP Website Builder and more than 200+ industry-specific starter sites for free!
2. Create Your Site’s Visual Identity
Once you’ve got an idea of your website’s structure, it’s time to look at its appearance. You’ll need to choose the fonts and typography you’ll want to use. If you’re working from an established brand identity, consider how your choices match up to offline materials. It’s also worth exploring how well the fonts you choose work with multiple languages and how effectively they scale up and down on differently-sized screens.
You’ll also need to decide on a color scheme. Again, if you’re creating a site based on a brand with an established visual identity, you’ve already done most of the hard work. Otherwise, picking a color scheme requires you to consider color theory and ensure your choices are accessible.
Thinking about the “feel” you want your site to have can make this decision easier. Colors represent different emotions and meanings, after all. For example, red is typically seen as an aggressive and impulsive color, while green is associated with health and the environment. You should take the time to choose your colors carefully since they can help you create a cohesive visual identity.
3. Consider the Layout and Navigation
If you planned ahead as we discussed earlier, this step will be a lot easier. You’ve already considered how navigation will work on your site. It’s now time to dig deeper and think about your website visitor and the journey they’ll take on your site.
The visitor’s journey refers to the possible paths that people can take on your website. In other words, you’ll need to consider how users will access different parts of the site from any given page. After all, you won’t always have control over how users first arrive on your website, so you can’t just rely on a homepage to serve as your hub. Navigation needs to be available across your site, and it has to be accessible and easy-to-use.
You also need to plan out the layout of each page carefully. To do this, ask yourself what each page on your site is trying to achieve. For example, if you want people to fill out a contact form, you’ll need a strong Call-To-Action (CTA) button. Your CTA should always be prominent and clear.
Every element on a page should be designed to promote the overall goal. It’s best to start simple and add elements over time to ensure you aren’t adding unneeded information or features.
Related: 7 Steps to Identify a Target Audience for Your Online Business
4. Pay Attention to the Details
When you’ve completed your website design and layout, it’s time to shrink your scope and focus on the details. These are the seemingly minor things that create the general look and feel of your site, such as buttons, menus, image placements, and so forth.
Treat each component on your site as a stand-alone object and give it proper attention. This is the kind of precise work that can seem excessive but will significantly help to refine your site overall. Your goal should be to make the final product better than the sum of its parts, and spending appropriate time and effort on those parts is the best strategy.
One way you can make your site “pop” is by adding engaging elements like microinteractions. We’ve previously discussed that these are a popular trend — and for good reason. They help make your site feel more interactive and living since it’s able to respond to the user in small ways.
You should also work on avoiding common mistakes, such as bad font rendering and poor color contrast. These are the kinds of issues that are easy to miss if you don’t get up-close with your site’s individual components. For that reason, make sure you give them the attention they require.
5. Prototype and Share Your Design
Prototyping is an integral part of the design process. A prototype is simply a demo version of your site that you can share with others. It can be presented as images, or you can create a static HTML representation of how each page is meant to look with little-to-no functionality.
Creating a prototype is an excellent way to give others an idea of what the site will look like when it’s done. If you’re working for a client, they will naturally want an overview of your plans and the chance to suggest changes. You should, therefore, show them a prototype early on so they can provide feedback. This will save you time down the line, as they won’t be surprised or displeased with your work when it’s nearing completion.
One thing to remember: site builders make creating a site so quick and easy that you often don’t need a separate prototype. You’ll be able to quickly put together a new idea and solicit feedback from others without creating a demo (more on this later).
6 Tips For Creating A Website Design That Sticks With Users Using
Related: Everything You Need to Know About Using a Website Builder
6. Challenge Yourself and Be Willing to Experiment
Finally, remember that web design is a creative endeavor, and you should always be willing to challenge yourself. This applies whether you’re creating your first website or your 50th. For example, you can consider new ways of approaching a particular design goal. Maybe you’ll experiment with different color schemes, images, or a more accessible navigation layout.
This step is more critical than it might seem. Not only will it help you grow as a creator, but it will also give you an extra incentive to find new solutions. It’s easy to get stuck in a rut. Giving yourself a challenge in each new project is an excellent way to keep yourself focused and invested in your work.
One smart way to get started is by finding inspiration in recent design trends. You can consider how you can implement those trends yourself or even improve on them.
Related: 10 Web Design Lessons You Can Learn From StarWars.com
How to Design a Website Using WP Website Builder
WP Website Builder is a suite of premium tools and plugins built by our friends at BoldGrid. You can use these tools to create gorgeous designs for your website without having to touch a single line of code. Plus, if you sign up for any of our shared or managed WordPress plans, you’ll have access to WP Website Builder at no extra cost!
When you set up a new website with us, you’ll receive an email that includes your WordPress login credentials and some information about how to get started. One of the options at your disposal is to use the WP Website Builder setup wizard.
This wizard walks you through choosing a design for your website, setting up basic pages, adding vital information, and accessing the WordPress dashboard. First, let’s choose a “design,” which is a fancy way of saying a WordPress theme.
6 Tips For Creating A Website Design That Sticks With Users Must
Related: How to Pick the Right WordPress Theme for Your Website
With WP Website Builder, you get access to dozens of starter site designs across 12 different categories. Once you choose the perfect theme for your website, you can select which pages you want to set up from the start.
Keep in mind that the available pages will vary depending on the theme you choose. If you see a design you like, but it isn’t quite perfect, don’t worry — you will be able to edit it in a moment.
For now, move on to the final step, where we’ll ask you to enter some basic contact and social media information.
WP Website Builder uses this information to set up social media sharing for you. If you don’t want to add this information, that’s okay.
When you’re ready, click on the Finish and Install button. While you wait for the quick-start wizard to set everything up, feel free to go have a cup of coffee.
As soon as your website is ready, you’ll get access to the WordPress dashboard. Before you do anything else, take a look at your home page.
We’re already off to a great start, but a few pages don’t make a website. At this point, you probably want to make some changes to the theme you chose. To do that, return to the dashboard and open the editor for the page you want to change.
Once you’re in, you’ll notice that we set up a new Post and Page Builder for you, which replaces the default WordPress Block Editor.
With this feature, editing the design of your pages and posts has never been easier. You can move elements (or blocks) of content around with your mouse, and get access to quick styling settings just by clicking on them:
If you want to add new blocks to your pages, all you need to do is click on the Add Block Component button at the top of the screen.
WP Website Builder includes a broad range of pre-built blocks, including website layout options, media elements, widgets, and more.
If you scroll to the bottom of the editor, you’ll notice that you also have access to Search Engine Optimization (SEO) recommendations, so you can help users find your new website.
From here on, all that’s left is for you to try out WP Website Builder for yourself. When you combine its theme selection with the drag-and-drop builder, designing a gorgeous website becomes a simple matter.
Website Development, Explained
Whether you need to install WordPress, choose a design template, or build a custom website, we can help! Subscribe to our monthly digest so you never miss an article.
Ready to Design Your Site?
6 Tips For Creating A Website Design That Sticks With Users Use
Even if you’ve never touched a line of code in your life, you can still create a great-looking, functional website. All it takes is understanding the basics of what makes a successful site, and using an intuitive tool like WP Website Builder to put it all into practice. Web design, here you come.
Register for just $2.99
Normally $49.95Register Now