Content Editors

How to... Test Your Website for Mobile Devices

Lynn Tierney — Fri, 21 Apr 2023 14:50:44 +0000

How to... Test Your Website for Mobile Devices Lynn Tierney Fri, 04/21/2023 - 10:50

As the number of mobile device users continues to grow, designing websites that work well on these devices has become increasingly important. To ensure that your website looks and works correctly on a variety of mobile devices, it's important to test it on different screen sizes and resolutions.

Fortunately, all major web browsers come equipped with developer tools that allow you to simulate mobile devices. Keep reading to learn more about mobile device simulation and how to simulate different mobile devices.

Why is Mobile Device Simulation Important?

Designing a website that is optimized for mobile devices is crucial for any website owner. According to Statista, mobile devices accounted for 59% of website traffic worldwide in 2021, and this number is only expected to grow in the coming years.

When users visit your website on a mobile device, they expect a seamless and user-friendly experience. If your website doesn't function well on mobile devices, users are likely to leave and look for an alternative. Mobile device simulation allows you to ensure that your website works well on all devices, regardless of their size or resolution.

In-Browser Simulation Tools

The icon for Device Tools may vary by browser and OS, but it generally looks like a phone and tablet together.

Mobile device simulation is a way to test how your website looks and functions on different mobile devices without actually having to use those devices. Using browser developer tools, you can simulate the screen size, resolution, and other important factors that affect the user experience on mobile devices.

How to Use Chrome Developer Tools to Simulate Mobile Devices

To view a mobile layout on Chrome, you first need to access the developer tools pane.

Right-click anywhere on the page and select "Inspect" or press Ctrl+Shift+I (PC) or Cmd+Opt+I (Mac) on your keyboard. This should open a new pane displaying information about the page and its code.
In the developer tools pane, click the "Toggle device toolbar" icon (or press Ctrl+Shift+M (PC) or Cmd+Shift+M (Mac) on your keyboard) to open the device toolbar.

You can select the device you want to simulate from the dropdown menu. If the device you want to simulate isn't in the dropdown menu, click "Edit" to add a custom device.

How to Use Microsoft Edge Developer Tools to Simulate Mobile Devices

Microsoft Edge's developer tools are very similar to Chrome's, but are accessed via slightly different steps for keyboard users.

Right-click anywhere on the page and select "Inspect element" or press F12 on your keyboard.
In the developer tools pane, click the "Toggle device toolbar" icon (or press Ctrl+Shift+M (PC) or Cmd+Shift+M (Mac) on your keyboard) to open the device toolbar.

You can select the device you want to simulate from the dropdown menu. If the device you want to simulate isn't in the dropdown menu, click "Edit" to add a custom device.

How to Use Firefox Developer Tools to Simulate Mobile Devices

There are two ways to activate Responsive Design Mode on Firefox:

Using the keyboard, press Ctrl+Shift+M (PC) or Cmd+Opt+M (Mac).
In the top right of the browser, click the hamburger menu, then "More tools", then "Responsive Design Mode."

You can adjust what device you are emulating using the bar at the top of the browser window. This will let you choose from a variety of preset tablets and phones, or choose a custom resolution.

How to Use Safari Developer Tools to Simulate Mobile Devices

If you have not done so already, you will need to activate Developer Mode on your browser. This can be found under Safari's settings, on the Advanced tab. The checkbox to show the Develop menu in the toolbar should be at the bottom of the page.

Open Safari and navigate to your website.
From the menu bar, click "Develop" and select "Enter Responsive Design Mode."
Select the device you want to simulate from the top options.

Mobile device testing is an important aspect of website development, and the developer tools in your browser make it easy to test your website on a variety of mobile devices. By following the instructions above, you can ensure that your website provides a seamless and user-friendly experience for all visitors, regardless of the device they are using. Don't let the idea of using developer tools to simulate mobile devices intimidate you – it's a straightforward process that can save you time and ensure the success of your website.

Confused by Mobile?

Check out our guide on landing pages and planning for mobile layouts.

Seeking to Learn More?

Check out these related articles!

Topics

How to... Plan a User Journey

Lynn Tierney — Tue, 28 Mar 2023 14:11:41 +0000

How to... Plan a User Journey Lynn Tierney Tue, 03/28/2023 - 10:11

You may have heard of the terms "user journeys" and "marketing funnels" before. Both are critical concepts to think about when developing and designing websites. Let's explore these concepts and how they can help you better understand and engage with your website's visitors.

User Journeys

A user journey is the path that a user takes when interacting with a product or service. In the context of college admissions, a user journey might include the steps a student takes from initially researching colleges to submitting an application and ultimately enrolling in a school. Understanding a user's journey through your site allows you to see the user's perspective and tailor your marketing efforts accordingly.

Let's take a closer look at an example of a user journey in college admissions using a hypothetical college and its rocket science program:

The user traveling this journey is Jane. Jane is a high school student seeking to apply for college to earn a degree in rocket science. She wants to know that the university she applies to will have opportunities for her to take part in groundbreaking research. With this goal in mind, she is going to begin her journey by doing research into a variety of colleges.

When Jane stumbles upon our hypothetical college's rocket science program, she will move to investigate, searching specifically for content related to this college. Let's say she finds a landing page for the college's rocket science degree program. This page gives insights on the program, what research is being done on campus, and more. This page may lead Jane to delve into other pages around the college's website, learning more information relevant to her search.

If this site does a good job, Jane may be convinced this program is a good fit for her needs. At this point, she is looking for information on how to apply for the program, such as due dates, requirements, and forms. Presuming her search is successful, she will submit an application to the college. Her search has been successful, and she has achieved her goal.

As marketers, we need to take a look at how each step in this user journey plays out. Like a hiker on a forest trail, there need to be markers and points of interest along the way to keep the user on the correct path. Should they get lost along the way, we risk losing users as they do not achieve their goal. How do we make sure they don't get lost? We need to design our websites and pages with various user journeys in mind.

Marketing Funnels

Marketing funnels can help you plan how to walk a user from hearing of us to joining the Mason Nation.

While user journeys deal with the user's side of things, marketing funnels are how you can think about all the user journeys from a more designer side of things. By combining various user journeys together, we get an idea of the general stages different users might go through on their journeys through our site.

A marketing funnel is a way of visualizing user journeys in stages. The funnel metaphor represents how users will inevitably be lost at each step of the process, with only a percent of those who visit reaching their goal. Keep in mind that not all of this loss is negative. Your user may be looking for something that just does not align with what you are marketing. The goal is to prevent unnecessary loss.

There are many variations of the marketing funnel, depending on your industry and what makes sense for your team. However, for today, we're going to use this one:

Stage	Meaning	Related Concepts
awareness	the user has heard of us	SEO
interest	the user wants to know more	content connections
desire	the user wants to know the next steps	sitewide navigation, CTAs
action	the user is taking steps to be involved	user experience
success	the user has completed the goal

Using the example of Jane from earlier, we can see her in the awareness stage when she is researching which schools have a rocket science program. To capture her in the first stage of the funnel, we would need to make sure our school's website shows up in search results, or that it is well represented on social media. Anything that serves to get the word out there that we exist is a boon to this stage.

As soon as Jane heard of the program, she entered the interest stage as she seeks to learn more about the hypothetical school's specific degree program. In this stage, we are most interested in making sure we present ourselves well on our marketing landing pages, that we have related information easily findable from there, and that we are showcasing as many potential areas of interest as we can (within reason).

Once Jane decides she is interested in applying, she enters the desire stage. At this point, Jane wants specifics on how to apply and what the timeline looks like. Having easy calls to action that point to admissions information will go a long way here.

After Jane starts the application process, she enters the action phase. This step is complicated, as losing users here can be as simple as "their wallet was across the room and they didn't want to get up." However, you can cover your bases by making sure things are as easy to use as possible.

Once the application is completed, Jane is at the success stage. She is what we would call a "conversion" now, someone who has completed the transition from visitor to customer, to use more consumer-minded language.

Ideally, this is where a savvy marketer will aim to preserve loyalty from converted users. For example, emailing Jane with details on the admissions timeline will keep her informed and watching for updates. In the long run, Jane may be entering another marketing funnel as she debates accepting the offer of admission to this college. And so the marketing life cycle goes on!

Utilizing This with Your Sites

By understanding the user journey and the marketing funnel, you can create targeted campaigns that address the needs and concerns of potential users at each stage of the journey. Here are some steps to consider:

Define user personas: Define user personas based on your target audiences. This will help you understand how users might interact with the website and design journeys that meet everyone's needs.
Define the goal of your content: Determine the overall goal of your page (or series of pages) and consider the journey your user would take to achieve that goal. What do you want your users to do on each page? What information do you want them to find?
Map the journey: Lay out the intended journey step-by-step. Make sure the journey is clear and easy to follow, with clear calls to action and visual cues to guide users through the content.
Analyze user behavior: Take a look at your metrics at every step of the user journey to identify areas for improvement. Using analytics tools, you can track things like where users click and how long they stay on each page. Use this information to make data-driven decisions to optimize the user experience.
Optimize for mobile: With more and more users accessing websites on mobile devices, it is essential to design user journeys that are optimized for mobile. Make sure the user journey is just as easy to follow on small screens!

Seeking to Learn More?

Check out these related articles!

Topics

How to...Edit Existing Content on an Existing Page

khanse2_deprecated — Thu, 07 Oct 2021 21:02:26 +0000

How to...Edit Existing Content on an Existing Page khanse2_deprecated Thu, 10/07/2021 - 17:02

The most basic editing task done by Site Owners, content editors, and content contributors is editing text on an existing page. Here is how to do that.

From the Admin bar:

Click the ‘Content’ tab to display the content list
Locate page to edit, click the page title to open the page
Click the ‘Customize Page’ tab on the page navigation bar put the page in edit mode
Mouse over the upper right corner of the block to be edited
Click on the revealed edit pencil icon
Click ‘Configure’
Make needed text and image changes
After changes are complete, scroll to the bottom of the edit box, click the blue ‘Update’ button
If edits to other blocks are complete, scroll up to the page navigation bar
Click the ‘Save Layout’ button

Topics

Content Editors

Content Contributor