Page Basics

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

Embed a Video

khanse2_deprecated — Tue, 16 Mar 2021 19:49:03 +0000

Embed a Video khanse2_deprecated Tue, 03/16/2021 - 15:49

YouTube or Vimeo videos can be embedded within a Basic Text block.

Before you begin

Copy the short, shareable URL of the video to be embedded from the 'share' block on YouTube or Vimeo.

Once you have your short URL, you are ready to embed

Place the cursor at the approximate place the photo should appear. Videos will expand to the width of the text block
Find and click the ‘E’ button in the 'Body' formatting toolbar
From the ‘Select Media to Embed’ pop-up window, click the ‘Upload’ tab
Click the ‘Create Embed’ tab
Paste in the YouTube (or Vimeo) short URL (see images below)
Fill out the ’Name’ field
- Click the ’Save to my media library'
- box scroll down to under the video preview
- Check the ‘Published’ box
- Click ‘Place’
- Select an alignment - 'center' is the most common choice
- Do not fill out the caption field

Continue on editing your text block.

When you are done, remember to save and publish!

Topics

Page Basics

How to...Embed an Image

khanse2_deprecated — Tue, 16 Mar 2021 18:14:27 +0000

How to...Embed an Image khanse2_deprecated Tue, 03/16/2021 - 14:14

View Image Demo with Image Sizes

Embedded images are secondary supporting images within the text of a news story. The June 2021 update to the embed feature changed the icon in the WYSIWYG toolbar and smoothed out the embed process.

Create your content item (page or content type - news, faculty profile, program)

Click the 'Customize Page' tab
Add a 'Basic Text' block to a section
Title the block
Add text content (I used cupcake Ipsum to generate filler text - http://www.cupcakeipsum.com/)
put your cursor in the top left corner of the block editing window, ahead of the text you pasted in
Click the embed icon (it looks like an image with musical notes on top of it)
Upload an image to embed - I chose a 6 KB cupcake image
Click Save and Insert

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Click the small 'edit' button next to the image in the text block
Add alt text
Select the alignment (none, left, center, right)
If a caption is needed, click the caption box (you will add the caption after the image is placed)
Select the desired display size (extra large, large, medium, small)
Click 'save'

View a sample page with image embed sizes and descriptions.

Commit your work by clicking 'save layout' on the Customize Page screen

Remember to publish!

View a sample page with image embed sizes and descriptions.

Topics

Page Basics

Image Management Tutorial