Shifting our approach to meet the demands of mobile usage.
What You Need to Know
- Visits from mobile devices now outnumber desktop visits worldwide, and 53 percent of visits to hopkinsmedicine.org in 2016 were from mobile devices.
- Google has changed the way it crawls and ranks sites to favor mobile sites.
- By focusing on the most-visited pages of hopkinsmedicine.org, more than 80% of page views are served on mobile-friendly pages.
- The Internet Strategy Team has shifted to a mobile-first design approach in new projects and continues a long-term effort to provide new design elements to legacy sites and pages across hopkinsmedicine.org.
Mobile usage outnumbers desktop usage
In late 2016, mobile and tablet Internet usage surpassed desktop for the first time worldwide, according to Internet monitoring company StatCounter. In line with global trending, mobile usage (including tablets) on hopkinsmedicine.org also exceeded desktop usage last year. By the end of 2016, mobile usage accounted for more than half of our visits, growing to 53 percent.
Mobile includes phones and tablets.
In 2014, seeing this undeniable trend, we began converting high-traffic sites to mobile-friendly versions.
With over 80,000 pages, 50 templates, and hundreds of editors, this was a challenging endeavor. Hopkinsmedicine.org is a large website, and a relatively small volume of pages see the majority of web visits. We prioritized our approach by focusing on the most-visited areas of hopkinsmedicine.org. As a result, 80 percent of page views are now served on mobile-friendly pages to our visitors.
However, there is still a tremendous amount of work to do. The team is engaging editors on the less visited areas of hopkinsmedicine.org to shift to mobile approaches.
More importantly, the team is renewing its focus on the future. We’re shifting to a mobile-first design approach, and introducing modern design elements and components that will perform consistently across mobile and desktop devices.
Google's primary search index is mobile
One of the most notable changes to take place recently is Google's decision to split its search index into two. Google now has a search index for mobile and another for desktop, with the mobile index being the primary one. What this means is that priority is now given to mobile-friendly sites in search results. Desktop sites are still indexed but not as frequently. Google's move is a guidepost to where we should be heading.
Modern design elements and development approaches for mobile-first
To account for increased mobile usage, we're not just converting our pages to be mobile friendly but we'll be thinking mobile first. This means that instead of optimizing desktop designs to work on mobile, as we did with our responsive design approach, we'll be considering the mobile experience first and progressively adding content for desktop.
Since mobile screens are much smaller than desktop screens, this also means the design is more focused on serving valuable content. Content, after all, is what visitors come to our site for in the first place. Incrementally, we will introduce new design elements and implement more modern development approaches on hopkinsmedicine.org so you can expect to find things such as:
- Simplified Architecture — Our design team is heavily focused on user research and we’ve been experimenting with new web designs that simplify the menus, titles, breadcrumbs and other key wayfinding elements on hopkinsmedicine.org to present cleaner design. We’ve focused on providing a sense of location to users and identity to stakeholders. These designs will begin rolling out to new projects this fall.
- Increased type size — Larger type is not only easier to read on mobile but it's better for larger-sized desktop monitors and people with vision impairments.
- More legible fonts — In the past, we've been limited to a small set of web-friendly fonts but today we have larger libraries that are more readable and more accessible. Fonts today are zoomable and can remain sharp when scaled at different sizes and even support multiple languages to fill our international design needs.
- Faster loading visual elements — 53 percent of mobile users will abandon a site if it takes 3 seconds or longer to load and 2 seconds is the optimal load time according to recent Google studies. There are several things that account for the time it takes a page to load but photographs and other imagery are always a significant factor. Where it makes sense, we'll be swapping out heavy images for their lightweight, scalable counterpart, the vector graphic.
53% of mobile users will abandon a site if it takes 3 seconds or longer to load.
- Card-based designs — Card-like blocks of content are intuitive as the card metaphor is highly recognizable. They work well for varying screen sizes, help us break up information into easily digestible chunks, and can be large, clickable targets well-suited for thumbs and anyone who might have difficulty with a mouse and small targets.
While we evolve to design for a mobile-first approach, that doesn't mean we're designing for mobile only. Desktop users still account for almost half of our visits and we're confident they'll be around for a while. It also doesn't mean that we're only thinking about devices because devices change; think about the Apple Watch and the Phablet. Parallel to our mobile-first approach, we are implementing methods behind the scenes to deliver resolution-independent, scalable content based on screen size instead of device type.
Most importantly, we're designing with users and their journey in mind. In recent years, our team has gained increased insight into consumers online health behaviors. And we’ve studied how people are finding and interacting with our site. Balancing these insights with clear, clinical research and education objectives is creating greater opportunities to provide simple, effective experiences to our web visitors.