Did you know that over half of all web traffic comes from mobile devices? If your website isn't optimized for mobile, you might miss out on a huge audience.
The answers are closer than you think
Picture this: you are out with friends at a restaurant discussing your vegetable garden. Why are your cucumbers producing flowers but no cucumbers? Do you wait until you get home and search for the answer to this question on your laptop? No, you pull out your phone and do a quick Google search.
Mobile website traffic has increased steadily as more people access sites at the convenience of their smartphones. Mobile traffic first surpassed desktop traffic in 2017 and continues to rise today. In 2023, 54% of traffic originated from mobile devices.
Why your website performance matters
Most web resources have adapted to the increased mobile-first traffic and plan to serve more mobile devices than desktops. For example, Google mainly uses the mobile version of your website when indexing, storing, and ranking your content. That means the better your website's mobile performance is, the better you rank in Google.
If you're keeping up with our monthly website maintenance reminders (updating broken links, adding missing image alternate text, checking table accessibility, etc.), you are already actively working to ensure your website performs well in searches. Many of these updates fall within search engine optimization tasks (SEO). Another important aspect of SEO is the user experience (UX). Your website's design can also impact your search performance! That's because a well-designed website leads to a good user experience.
Analyze your web traffic
By this point, you know that you have the tools to review your website traffic, and after exploring your analytics reports you are familiar with your audience. Still, the numbers from your device report may surprise you. How does your traffic compare to the average mobile traffic across the web?
The best way to see the type of devices people are using to visit your website would be to access your analytics dashboard and review at least the past year of traffic; however, you can open the previous Matomo PDF reports from your email and compare the previous few months as well. Find the device type report to see what percentage of your users are coming from mobile devices.
Even if only 25% of your visitors are mobile, consider the amount of traffic that comes from search engines. UX and mobile-friendliness are significant factors in your search engine performance, and Google is likely crawling your website in its mobile display and subsequently ranking you based on that experience. Prioritizing the mobile experience on your website will help bring more traffic from search.
Responsive design: the basics
A responsive design uses the same URL and HTML for a page, but displays the content differently based on the screen size it is being loaded on.
The iastate22 website theme, like most website themes today, uses a responsive design, so you don't have to recreate pages to serve different audiences. The components on the page adjust to the screen size. Simply put, all the block components for the iastate22 web theme are optimized to work, no matter the screen size.
However, just because your website has the technical requirements to work for mobile and desktop users, that doesn't automatically mean their experience will be good in both formats. If your website is primarily evaluated based on how it works on mobile, doesn't it make sense that you would create any new content on a mobile-sized screen first? Mobile-first design means that instead of starting the creation of your webpages on a wider desktop size screen, you first mock-up your content at a smaller mobile size.
Steps to implement mobile-first design
If you want to implement mobile-first design to the content on your website, here's how to get started:
- Make sure each new piece of content has a clear purpose or goal. If it doesn't, ask yourself if your website needs this new page.
- Map out how you expect the visitor to achieve the goal (e.g., land on the page, learn about program and the three options available, see the impact of past graduates, see potential career paths, request info about joining).
Open the theme html block components page in a mobile-sized window, and select an appropriate block for each stage of the journey mapped out in step two.
Tip: In the Chrome web browser you can select a device size for an easier viewing experience. Open a new Chrome window and go the theme html block components page. Right click anywhere on the page and select "Inspect." Click the device icon and select the type of device you want to preview the page in.
Title of Page: Hero
About the program and three options: Multi-column content with three headings
Past graduates: Feature set with two features
Career paths: Video
Request info about joining: Call to action - small- Send the above information to the CALS/LAS web team to build your new page. We will return a draft with the blocks you requested.
- Edit and add your content to the drafted page.
Benefits of mobile-first design
- Improved user experience: Designing mobile-first creates a simpler and more intuitive experience for users.
- Faster page load times: Simple and efficient content often means faster page load times.
- Better search engine rankings: User experience and mobile-friendliness are factors that Google values when determining page rank.
While it's true that your content will scale appropriately for any device size with responsive design, the fact is that content is consumed differently at different sizes. When you design mobile-first, you will find that you are creating a simpler and more intuitive experience for your users. Beginning with mobile design allows you to focus on the essential content and functionality of the page rather than being bogged down trying to fill all the space appropriately. Additionally, simple and efficient content often means faster page load times. When you consider these page performance factors, you improve your chances for a favorable ranking from Google.
Conclusion
The mobile-first design might be a shift in your content-creation process, but in a world where mobile devices dominate web traffic, ensuring your website is optimized for mobile devices isn't just an option—it's a necessity. At a minimum, you should be reviewing your web pages on mobile before they are published.
Have you implemented a mobile-first design strategy on your website? Share your experiences with the CALS/LAS web team at websupport@iastate.edu.