Arm yourself with knowledge of trends that can help your organization push the envelope during your next redesign. You’ll not only stay on top of what’s current, but keep an eye on where web design is going in the future.
Flat design. Card design. Multimedia storytelling. The world of website design is evolving. New technology is changing the way site visitors interact with your site, creating endless design opportunities. Join us for this webinar and learn the latest in website design concepts, like flat design and card design. You’ll also learn about multimedia storytelling, an approach to combining design and content that will help you tell your organization’s story through stunning and interactive design. You’ll walk away with new ideas to engage site visitors with your design and stand out in a crowded market. Throughout the webinar, you’ll see examples that will provide inspiration for your next project.
David: Hello, and welcome to our webinar on Web Design Trends for Healthcare. I’m David Sturtz, Product Strategy Director here at Geonetric, and I’ll be your host for today’s webinar. Today’s webinar is on Web Design Trends for Healthcare and you’re going to learn a ton of good information on the next hour. If you’d like to see more good examples of healthcare websites in practice, you can request our design portfolio at the end of the webinar.
Our design portfolio shows highlights of Geonetric clients that are implementing eye-catching and user-friendly web design, many of that are using some of the design trends you’ll learn about today. Be sure to fill out the survey at the end of today’s webinar and request a copy of our design portfolio e-book.
Today’s presenter is Nathan Deklotz, Senior Web Designer and Developer. Nathan is an expert at delivering web designs that blend art and technology. He loves helping clients use online tactics from email marketing campaigns to video to stand out in a crowded market. Between his time at a TV station and at an advertising agency, Nathan spent more than 15 years creating online experiences for almost every audience imaginable.
Today’s presentation started as a session of Geonetric clients-only conference last month. Since then, Nathan has added even more ideas and examples of the latest in website design concepts that will provide the design inspiration for your next project. So now, I’ll turn it over to Nathan.
Nathan: All right. Thanks, David. And I’d like to thank all of you for joining us today. Happy Tuesday. Happy short work week Tuesday, which is even better. But as David said, my name is Nathan Deklotz and I’m a Senior Web Designer and Developer here at Geonetric. And I’m very stoke to talk to you guys about design today and that’s because design is a fun topic. Everyone has opinion when it comes to design. You all have that inner art director inside you when it comes to the design of your website. And it’s our job as designers to take that feedback from you, the stakeholder, and use it to create a design that has mass appeal to a wide audience.
But that’s not always easy because design is subjective. One design can elicit two very different responses. Design is also current or at least it should be, but with the ever changing nature of the Internet, that sometimes can be a challenge. So as a designer here at Geonetric, I need to not only stay on top of what’s current today, but also have an eye on the future. That way, we can make recommendations that all our clients to stay ahead of the curve, and when appropriate, outside of the box.
But thinking outside of the box can be a bit of a trick for many healthcare organizations when it comes the web design. The reality is healthcare websites are seldom on the leading edge of design trends. When we kick off a project, we often hear, “We don’t want to look like a healthcare website,” but along the way, circumstances end up creating just that.
It’s been my experience that forward-thinking marketing and web departments often gets stifled by internal politics or the derided design by committee. So one thing I want to arm you with going forward is this concept – so much of the current web experience is already being set in fields outside of healthcare. Your organization shouldn’t be afraid to adapt to some of these more modern and current trends because your users have likely been exposed to them already in their other website travels. But I want to clarify – looking like a healthcare website isn’t a bad thing, but neither is pushing the envelope when appropriate. So the goal of today’s presentation is to get you to identify some of those opportunities in your next design project.
Responsive Web Design
So with that, let’s take a look at some current design trends. The first trend I want to talk about is responsive web design. Responsive design is a concept coined by Ethan Marcotte. He debuted this concept in an article he published on the website, “A List Apart”, back in 2010. In this article, he demonstrated that by using media queries, a fluid grid, and flexible images we could optimize a user’s viewing and interaction with the website regardless of what type of device they were using.
If you’re familiar with Geonetric, you know we’ve been a big proponent of responsive for a few years now. We’ve talked about it in great detail in previous webinars, blog posts, and on social media. So today, I don’t want to focus too much more on the nuts and bolts of responsive design because honestly I’m hopeful that most of you listening already have a responsive site, and if not, at least have plans underway to head in that direction.
But what I do want to talk about is the impact it’s had on the way that we do our job as designers and developers. Many of the other design trends we’ll talk about today are relevant because of responsive web design, it’s the catalyst.
Geonetric was ahead of the curve when it came to responsive design. In late 2011, we had a hypothesis that it would be the best way to deal with the upcoming mobile boom. Fast forward to today, and I think our hypothesis has been proven correct as many mainstream web destinations such as CNN, MSNBC, and ESPN have all launched responsive sites. In fact, I would say responsive design has surpassed being a trend and it’s the new norm.
A couple of years ago, you are cutting edge if you had a responsive site, but now it’s expected. Earlier this month, Mary Meeker, a partner at Kleiner Perkins Caufield & Byers presented her annual state of the Internet report.
One of those findings reported is adults are now spending more time in mobile and tablet devices than they are in desktops and laptops. That mobile boom we’ve been waiting for, it’s upon us. And as we’ve seen recently with Google’s Mobilegeddon, if your website’s content is not mobile-friendly, you can start getting dinged in their search results.
But we also have to remember that responsive isn’t just for mobile screen sizes. In 2013, 76 million smart TVs were shipped, and that trend is expected to increase consistently. In addition to smart TVs, desktop monitors are getting larger and less expensive, and other tablet devices are now displaying higher screen resolutions.
More and more, people are now viewing web content on screens 1,900 pixels wide or larger. So going forward, we’ll use responsive design as a way to optimize the extra space for those larger screen resolutions as well as mobile devices.
So next, I want to take a look at flat design. Flat design is a very popular and current trend right now, and not only in web design, but design in general. The basic design fundamentals of flat design include using color, typography, space, and simplification, all to communicate a message. And this means getting rid of beveled edges, drop shadows and gradients. We get rid of anything that has the perception of depth or layers. Another consistent trait you’ll see in flat design is the use of icons. The basic concept of an icon plays into that simplification trait.
So where did it come from and why are designers using flat design? Well, like most things in the digital world, flat design’s origins can be traced back to an earlier trend or movement in art history. Flat design shares many of the same characteristics of two movements in particular. The first is the Swiss style, a movement that was popular in the 1940s and 50s being featured mostly as book and poster art. Swiss design focused on the use of grids, sense of typography, and a clear hierarchy of content and layout. It’s also this period that produced the popular font, Helvetica.
The second movement that influenced flat design is the minimalist movement. The minimalist movement emerged in the 1950s and continued through the 60s and 70s. Flat design’s characteristics of removing extra visual elements and just using what is needed can be traced in the minimalist movement. So now that we know a little bit about its history, why are designers using it, and what’s it a reaction to?
Skeuomorphism and Realism
Any conversation of flat design has to include mention of skeuomorphism or realism. Skeuomorphism is a design trend that tries to make digital things look familiar to real items in the physical world through the use of textures, shadows, and gradients. Apple first started using this back in the 1980s in its first desktop graphical user interface. Now, keep in mind this is a time when most people were totally foreign to a concept of a computer interface.
So Apple introduced things like clipboards, file folders, and trash cans so people could relate tasks they perform on their computer to real world action. But over time, people no longer needed these visual cues and a new generation of designers started pushing for a more minimal or flat approach.
Well, it’s not the first to go this route. Apple’s release of its iOS 7 in 2013 was a game changer as it gave flat design a huge boost in popularity. Apple replaced its glossy icon set with a version that was much more minimal and flat. And due to Apple strong following of early adopters, it made flat design an instant player in the design world. Now, this was a significant change for Apple. For decades, they had championed skeuomorphism and now they were headed in a different design direction.
Microsoft is also a significant driver of flat design. They started to introduce flat design elements in some of their interfaces as early as 2005 with its Zune media player. The Zune was their answer to Apple’s iPod. While the Zune wasn’t long for this world, Microsoft’s interest in flat design has stayed the course. As they have since gone all in on flat design throughout its entire product base, including the Windows 8 operating system seen here.
Google is another major player that has also embraced flat design with its material design. Material design is their visual language they created to help guide developers. Most of the visual foundation for material design is based on flat principles. So as you can see, flat design actually got its digital start as a user interface for apps and devices, and it eventually carried over to the web and other design outlets, other outlets like logos and branding. Many recognizable brands have recently rebranded themselves taking a more flat approach. Here are just a handful of examples, including Microsoft.
When it comes to web design, there are a number reasons why flat design is a natural fit. Many web designers today have gravitated toward flat design because it feels crisp and modern. It allows them to focus on the most important thing, the content or the message. Another factor is flat design is better on mobile. It’s more mobile-friendly because flat design elements scale up and down better than 3D elements do.
So now, let’s take a look at a few flat web design examples. This first example is for Oscar, a health insurance company. And as you can see, it’s very minimal. The focus is on the content and it has all the traditional flat design elements. It utilizes sans-serif fonts, large blocks of flat color, and the use of icons.
This next example is a website called Liberio, which is an e-book publisher. And it has similar elements – simple, minimal, focus on the content, and it incorporates some flat graphical elements with a hand holding the tablet. It’s pretty much a textbook example of a flat design.
This next example is a website called DoneDone, which is an issue tracking solution. This site has a little more visually going on than the previous examples, but it still features many of the basic flat elements. Now, one thing you may be starting to pick up on is that it’s very easy for flat web designs to start to feel illustrative or almost cartoonish depending on the execution. And depending on your organization’s goals, that could be an issue. So what I want to do now is take a look at a couple of sites that still utilize flat design elements, but incorporate them with things like photography which can really change the overall appearance.
One example of a site that does this is Fitbit. And full disclosure, Fitbit’s probably one of my favorite web designs that are out there right now. In fact, I became a customer of Fitbit in large part due to the web experience I had on their website. But as you can see, it’s familiar to other flat examples we’ve looked at. But by using photography of their products, it puts the focus on the product itself in a less elementary way. Also, their execution of icons give a very different visual vibe compared to other flat graphics we’ve seen.
One other thing they also incorporate is a very popular design trend right now, and that’s to utilize large background images. Again, they do this in a way to engage with the user and help tell their products’ story. As I mentioned, I’m a customer and this is a screen of their dashboard that tracks your daily activity, and even this element of the site embraces the flat design principles.
The last flat example I want to take a look at is a healthcare example. And that’s Tidelands Health out of Georgetown, South Carolina. Tidelands went live with this design a little earlier this year, and at the same time, they were undergoing a rebranding initiative going to a system-wide approach. The new brand they came up with utilizes a flat logo. So we decided to take a more flat approach in the overall site design – utilizing blocks of flat color, icon, and ample amount of white space that really allows for the content to stand out.
So what’s the future of flat design? Flat design may eventually morph into something else as the web is continually changing. But with major players in the industry like Apple, Microsoft, and Google all currently embracing it, I don’t see it going anywhere in the near future. And also, it really lends itself well to responsive design. And if you need another example of flat design’s reach, McDonald’s is now on the bandwagon, with their most recent campaign of commercials going the flat design route.
So the next topic I want to touch on is something I refer to as large visuals. In recent years, we’ve seen an increase in designs that feature large banner or hero images on home and the landing pages. Oftentimes, these images are contained within a photo slider or carousels that rotate throughout a handful of images with corresponding calls to action.
So now, we’re going to take a look at how some of Geonetric’s clients are utilizing this larger visuals on their websites. This first example is Genesis Health out of the Quad Cities, and they’re featuring a large hero image at the top of their homepage in a photo slider or rotator. When executed well, like this example, photo sliders can really have a fantastic visual impact. But there are a few potential issues we need to keep in mind when it comes to using these large photo sliders.
First and foremost is you really need to make sure that you have the photography to support it long-term. The purpose of these promotional areas are to promote more than one topic. But if you can’t feature something due to the fact you don’t have an adequate photo to accompany your message, you’ve really lost an opportunity. Also, when you overlay text on an image, it’s generally going to require some photo editing to make sure your message is legible. You can have the greatest visual in the world, but if your users can’t read your call to action, it’s serving little purpose. You’ll notice here that they’ve darkened parts of the photo to help the white text pop out more.
This next example is from Cottage Health in Santa Barbara, California. They’re also using a large photo slider, but they’ve used CSS to create a background container for their message and call to action which overlays the photo. This approach gives them a little more flexibility when it comes to image selection, but they still need to make sure that the photo was framed correctly so it doesn’t overlap important parts of the image. And to provide more flexibility, we worked in styling that allows them to place the text box on either the left or the right of the photo, again, offering them more flexibility on the images they can place within their photo slider.
Another different option to take would be the approach that Mercy Cedar Rapids uses. They still feature a large visual and call to action, but they don’t utilize a photo slider, instead the photo and message change on page refresh. So when I refresh this page, I’d likely get a different image and message. This approach has a couple of benefits. First, it gives the impression that the content of the page is updated often, but it also helps with page load speed. With a photo slider, even though you only see one image at a time, it’s still loading all of the images on every page load. In Mercy’s example, they’re only loading one image, but still are able to feature multiple messages to their visitors.
In this last example, PIH Health, also in California, uses a hybrid approach. First, they have that large background image that we saw with Fitbit, but then their overlay content box is on the image, including a photo slider that utilizes smaller imagery. This smaller photo slider makes finding images easier, which leads to them being able to swap out messaging more often.
When using a large background image, you’re going to want to find something that doesn’t have a tight focus on subject matter. In this case, they chose to feature some of the buildings on their campus. But regardless of where these content boxes are, they’re not going to cover up anything vital on the image.
Staying with this large visual topic, next I want to discuss – video backgrounds. Something we’re starting to see more of is the use of video backgrounds. This is a screenshot of PayPal’s homepage. And while not obvious in the static slide, but the background visual is a video. The video looks to be at an airport or train station where people are moving about, and the lady on the right is making some sort of transaction with her phone. As she completes that transaction, she walks out of the shot. By using this video in conjunction with the “Pay securely. Here, there, anywhere.” tagline, PayPal can really convey that message more thoroughly and effectively.
In this next example, we see Memorial Sloan Kettering Cancer Center’s homepage. And one of the first things you’ll notice is they have an audience-based navigation. And it’s split into patients and caregivers, research scientist, and healthcare professionals. Now, they’re also using a background video as their large visual. But in this example, the video first features interaction between a patient and their healthcare professional. Then it rotates after three to four seconds to show this scientist working in a lab. Then finally, to this video of another worker in a healthcare setting. They’re using their videos to relate to each of their three main audiences. Now, these large background videos may not be everybody’s cup of tea. But if using correlation with your main message, it could be a really unique way to make your site stand out.
o next, I want to transition into typography. Web design is 95% typography. This concept was put out there in 2006 by a Japanese design firm called Information Architects. Their thought process was 95% of the information on the web is the written language, so web designers should put an equal amount of emphasis on the design of the typography on the page. Now, 95% may be a bit high for today, but it’s still a valid point.
Good typography is essential to good web design. But good typography hasn’t always been an easy thing to accomplish, as traditionally, web designers have only had a handful of fonts that we could use. And when you factor in one of those fonts was Comic Sans, our options were really limited. But if we wanted to incorporate other fonts, we generally need to create them as graphics, which is an ideal on many fronts.
But in recent years, the technology to utilize web fonts has opened up a whole new world for designers, expanding our font face options tenfold. With just a couple of lines of code and some CSS, we now have access to hundreds of font faces from providers like Typekit, Fonts.com, and Google Fonts.
Now, earlier, we talked about responsive web design and flat design and how they’re putting the focus on the actual content. And now we have the option to really make that content shine with web fonts. But having so many options can also lead to other challenges. Just because we have 12 different versions of Comic Sans at our disposal doesn’t mean that we need to use them all, or any of them, for that matter. We still need to follow best practices for typography, with the end game always being readability.
So now, let’s take a look at a few examples of some websites that are using web fonts in a unique way. This first example is Mercy Health System out of Pennsylvania. This is actually one of the first designs we created using web fonts and it’s a few years old. But it still looks modern in large part due to the use of the Museo Sans font. Another unique thing about this design is there’s little to no photography so the type on the page access both the content as well as the graphical elements. You’ll notice the four large action words at the bottom really pull the users’ attention to that area of the page, which includes tasks and informational links.
Our next example is Forest Health out of Mississippi. Forest is in the process of shifting from branded hospitals to more of a system-wide approach. But part of their concern is the new system brand will confuse existing visitors of the individual hospitals. So they’re using their homepage to tell the story of how they’re now becoming a new brand. And they’re using words to tell that story, front and center at the top of the homepage. And by using subtle style changes throughout the copy, it makes it more visually compelling to read.
This next example is from Olmsted Medical Center in Rochester, Minnesota. Now, they’re promoting the opening of their new Women’s Health Pavilion, and they used a good mix of different font faces without it getting too out of control. It’s a good mix of the serif and sans-serif fonts in addition to the decorative font used in the “Now open.” And I think this is also a good example of utilizing the text to fill the white space around the photo. This looks like it could be something more out of a print layout, but it’s all done with CSS.
One last note on web typography, as I wanted to follow up with Microsoft. Earlier, we showed you that they’re rebranding and they went with a more flat logo. But they also updated the fonts they used in their branding from Helvetica to Segoe, a more modern-looking font. By using web fonts, they can now pull the new font in on their website, and that really enforces their brand and messaging online. And we’re finding out with our clients as well. By using web fonts, your brand can stay more consistent across different medias.
The next trend I want to talk about is card design. For those of you unfamiliar with card design, think Pinterest with less mason jar art. Pinterest was one of the first websites that went with this approach to display content when they debuted in 2009. But today, most of the heavy hitters in social media are currently using card-based design including Facebook, Twitter, and Google Now.
So what is a card? A card is a package of interactive information. It’s usually in the shape of a rectangle and it provides quick interrelated information in a condensed format, and it also usually includes some level of engagement. So let’s take a look at an example of a card in action. So in our Geonetric.com homepage, we have a grid of images and words that highlight some of the really cool things that are about working here – things like Operation Overnight, the eHealth Symposium, Agile and Scrum, our culture awards, lots of different things.
But if you were to click on one of those topics like Operation Overnight, the card flips and it gives you more information. And then at the bottom, there’s an option to click through to even more information, eventually leading you to that section on our website. So as you can see, cards are an effective way to provide condensed amounts of information initially with the option to dig deeper if the user is interested.
So why are designers using cards? Cards are beneficial because you can present quick packages of information that users can quickly scan and identify. But just as important, they’re responsive. A grid of cards can scale up or down while still presenting the same amount of information. Now, this is an example of the website, Mashable, which utilizes card design. And here, you can see how Mashable goes from three columns of cards on desktop, down to two on tablet, and one as the screen size decrease, but it still displays basically the same amount of information in each card.
So should you use card design in your healthcare website? Card-based design may not be ideal as a way to display your whole website, but perhaps this functionality could be used in certain areas. Here are a few examples of how a few of our clients are using card-inspired design on their websites.
This is the current treatment section on Genesis Health System and they’re using a card approach to promote six of their key service lines before the overall A to Z listings. And they’re using a nice combination of photos and condensed copy to give you a quick preview of these services.
This next example is from MidMichigan Health, and they’re using cards to display their wait times for their seven Urgent Care locations. This new responsive design went live just last week. Now previous to do this, they displayed this information in a vertical unordered list. But during the redesign, they identified this information as something their users found important so we repackaged it into a card-based layout that will make the content stand out, as well as break down well and responsively.
This last example is from Asante. And they have a page where they can capture and display positive information people in their community have had with their brand. It’s called Asante Moments. They display the information in a grid of cards with a nice mix of text, photos, and videos. This is a pretty unique way of presenting patients to recent testimonials.
So the final topic I want to discuss today is the multimedia story. When I refer to multimedia story, I’m referring to longer scrolling web pages that have a lot of content and graphical elements intertwined, with a goal of providing a more engaging experience for the user. This approach was made popular by the New York Times Snow Fall website that tell the story of skiers and snowboarders trapped beneath an avalanche in the Cascade Mountains. It tells a story through text, photos, videos, and interactive graphics that blend seamlessly and come alive on the web page.
Here’s a shot of their homepage and this features a large whipping video of snow blowing over the mountain, and it instantly sets the tone for the story. The multimedia and graphics are actually placed within the narrative flow of the story.
Here, you can see the embedded videos from the individuals in the story, and you get their parts of the story directly from them. Another unique thing they did is any time they introduce somebody into the story, they had a brief card-like bio of that person on the right side bar. And if you click on these card bios, they open up into a Lightbox slideshow with photos of the individuals, showing them interacting with their friends and family. What this does is it allows a reader to get more emotionally invested in the characters. You get more familiar, and as a result, more engaged with what happens to these people.
They also did a really nice job of incorporating some animated graphics. So when you read about the avalanche, you can see a computer model reenactment of it. Again, just adding to the extra visual engagement throughout.
Now, this website really changed the way a feature story could be told online. Since then, there have been several other multimedia stories published online by the Times and other media-type organizations. But recently, we’re starting to see this multimedia storytelling approach being used by other types of websites to tell different types of stories.
Another example of multimedia storytelling is the Rolex Awards for Enterprise website. These awards recognize a group of individuals who are using technology to help make the life easier for people around the world. One of those stories features Arthur Zang, who invented a heart monitor tablet called the CardioPad, hoping to improve cardiac care in his native Cameroon.
These sites integrate the same mix of graphics, text, photography and multimedia as did the Snow Fall piece, all to tell a more engaging and visual story. Websites like OlympicStory.com uses multimedia approach to provide numerous facts and figures for each of the past Winter Games. Polygon.com is taking this approach to deliver video game reviews. So as you can see, people are using this multimedia approach to share different types of stories and information.
How could your organization use this approach? Here are a couple of areas I could see potential for utilizing this expanded content for healthcare organizations. First would be patient stories or testimonials. Or maybe you could highlight a featured physician or a facility like a children’s hospital. Or you could use one to promote a key service line. Or utilize as a campaign landing page. I think there are a lot of really unique opportunities with this trend. And not every project needs to be as large as Snow Fall. Something a fraction of that size could still provide a really engaging web experience.
Future Trends in Web Design
So to sum up the trends we’ve looked at today, we discussed how responsive design is the new norm and really driving most of the current trends in the industry. We also discussed flat design’s adaptation into different areas of design. And we showed the examples how different organizations are using these large visuals and background videos. We highlighted how web fonts allow your content to stand out. And we reviewed how card design could be an optimized solution for displaying content. And finally, how multimedia stories can add another level of engagement when telling your story.
So what’s next in design trends? Well, I don’t possess a crystal ball. I do think you’re going to see most of these topics we discussed today still be pretty relevant for the foreseeable future, and some of these trends even longer. And I truly think responsive design is going to be driving most of the trends, and I foresee that continuing in the near future as well. Trends that lend themselves well to responsive sites like flat and card design, I think, will be with us for a while.
But we haven’t even scratched the surface in regards to what we can do with HTML5. Mostly due to browser compatibility issues, many designers and developers are still having to account for IE8, which doesn’t understand all parts of HTML5. But as a result, we haven’t been able to jump into it with both feet.
But for the first time in my career as a web designer, I think we can finally start to see the light at the end of the tunnel when it comes to the headache known as browser compatibility. Microsoft is taking the needed steps to finally phase out IE8, as they’re no longer supporting Windows XP. And from all indications, they’re finally serious about making their new browser, called Microsoft Edge, on par with their peers like Chrome and Firefox when it comes to rendering and supporting W3C standards.
What this means for you is your content will display and function in a similar manner, regardless of the browser being used. What this means for designers is less time trying to hack code and make new technologies work in outdated browser. It’s a true win-win for all. But we’re not there yet, but I’m pretty optimistic we will be sooner versus later. So that was pretty much all the prepared presentation I had for you now. I think now we’re going to bring David back in and he may have some questions.
Question and Answer
What are the non-obvious things you should remember when undertaking a responsive redesign?
David: Sure. We’re going to open the floor for questions now. And we’re going to cover as many as we can in the time remaining. If we don’t get to your question today, don’t worry, we’ll follow up after we’re done, and try to get you an answer. So our first question, just something I was wondering about over the years, last three or four years, we’ve helped dozens and dozens of clients to transition to a responsive design. What are some of the pitfalls and gotchas that you’ve seen going through that process?
Nathan: Yeah. I think one of the main things that probably isn’t as obvious to the client initially, but it’s going to be their content. Content is the big thing when you’re going to a responsive site. The design and the templating stuff, that’s the easy part. But it’s probably a good time to look at your content it, revamp it because the chances are pretty good that you’re not just going to be able to pick up your content from a static site and move it over to a responsive site without there being some glitches.
You’re most likely going to have to touch every page, especially if you use things like tables or anything like that on your static site. Those type of things aren’t going to transition well into a responsive site. And we can take care of most of that with some custom styles and things of that nature, but it’s generally not until you start moving your content into your new responsive site that some of these things come up.
David: Yeah. So good to know what you have out there before you dive into . . .
Nathan: Yeah. And again, it’s a pretty good time to revamp your content if you’re going to do it because the whole thing with responsive design is each page basically has that main message on it. In most devices, you don’t have three areas of columns of content to keep things above the fold or what we used to be used to. So you’re going to have to focus and prioritize your content.
How do you prioritize content within a responsive redesign?
David: I think another question here about, I think related to that topic of how do you prioritize content within a responsive design. What are some techniques that you’re exploring or you’re using now that helped get the most important things above the fold, or that proper level of attention as a design shifts from that desktop experience down to mobile?
Nathan: Right. I think, again, each page has to have that main message, and at a minimum, it needs a call to action. What do you get? What next step do you want the user to take when they’re on this page? And we’re using a couple of different approaches to that. We use some call outs that are mixed into the actual content that stay near this top of the page.
And also, we’ve started using what we call a call out panel, that on a three-column layout, you could stick that in the right column. But as you start to break down to smaller screen sizes, we take that call out panel and place it generally right under your H1 so it always stays first and foremost on the page.
Are there SEO ramifications to card-based design?
David: So the question from Maria. She wants to know about SEO and card-based designs. Are there any concerns implementing a card-based design that might relate to SEO?
Nathan: I don’t think so. Because basically from the markup standpoint, most of what you saw today, those cards were basically just an ordered list so they’re the all lined like they would be normally. We’re just adding some extra styling to them to make them visually stand out and display your stack a little bit differently.
David: Yeah. I think that’s with anything SEO, it comes down to the details and exactly how it’s implemented.
Nathan: Right, and it will probably change tomorrow so . . .
How do you choose the right web font out of the hundreds of thousands available?
David: Yeah. So a question about web fonts. As you’re going through and selecting which web fonts to use, and as you mentioned there’s hundreds and thousands of options now which is wonderful, what kind of process do you go through as you’re evaluating whether this font is going to work really well across the entire website?
Nathan: I think generally we start with the client’s brand and what they’re using in other medias, and we’ll start with there. But before we start to implement them, we’ll test them in different browsers because one thing we found with web fonts is consistency is still a bit lacking from browser to browser. What may look really well in Chrome can look really jagged and not quite as smooth in Safari or vice versa. So if you’re going to use web fonts, it’s really important to test them and see how they display in the different browsers before you get too far into your design.
What are the pros and cons to using a home page carousel?
David: Cool. So you showed a lot of examples today that don’t have a homepage carousel. A lot of the other Fitbit and other brands that you’re showing don’t have that. A lot of healthcare sites we see using that homepage carousel. What are some alternatives or pros and cons that you see in those two approaches?
Nathan: Yeah. One of the cons we talked about before is just page load time. With these carousels, you’re loading four to five really large graphics, regardless of how many are seen. But each time that page loads, they get loaded even though only one is displaying. I think the approach that Mercy had, Mercy Cedar Rapids, where they still have that large visual, you still get that same effect when you come to their page, but they’re only loading the one page. So that’s one thing.
We’re starting to try to steer people maybe away from photo sliders, but it always seems to be one of the main things they want. And I think that falls into that looking like a healthcare website, everybody else has them. And in some cases, they’re the right solution. For promotional boxes and things to that nature, it’s a good way to get more than a couple of messages out there. But generally the downfall is, chances are most users probably aren’t waiting for four or five-year slides to cycle through before they’ve decided what they want to do.
How much of the rich visual design should go into the deep interior pages?
Dave: Sure. So another related question here. They’re asking, with more traffic coming in through the site from organic search into deeper pages within the site, what’s the business case, I guess, for putting out that homepage? I think maybe there is a case to be made for spending a little bit more design time on those deeper pages.
Nathan: Right. Exactly. So yeah, the interior pages, you probably don’t want to go as much. But generally the homepage is where you would showcase a lot of these whiz-bang features or new design trends. But yeah, obviously being mindful that a lot of the people aren’t even touching your homepage and getting into your site. But there are ways you can utilize some of these larger photos or maybe banners. But again, it gets down to being able to have the photography to support it. But maybe more of a section landing page. And there’s also things we can do like what the call to action panels we discussed earlier that you can do to beef up your interior pages.
David: I think it’s great internally as long as you’re making the case for that to not always just focus on the homepage, as you’re talking about it. You’ve got 10, 20, 50 homepages, if you think about the first page somebody may land on.
Nathan: Right. And that’s maybe another example of the multimedia storytelling we’ve talked about, utilizing that as your landing page for any type of campaign. So as people are finding you in search and things of that nature, you can drive them to this page that’s got this more enriched, developed content.
David: Cool. Well, with that, we’ll wrap up questions for now. If you had any other questions in there that you wanted us to answer and follow up with afterwards, feel free to keep throwing them in the Q&A box. I wanted to remind you to fill up the post-webinar survey. You can share your thoughts on today’s webinar. And you also have the opportunity to request a copy of our design portfolio e-book.
Be sure to join us on July 29th at 1 o’clock p.m. for our next webinar, How to Promote Your Physicians Online. Attend this webinar and learn how to develop and implement effective tactics to engage potential patients online. You’ll learn tips for driving qualified visitors to your online provider directory, as well as how to create effective physician profiles, complete with engaging bios and strategic calls to action. You can sign up at Geonetric.com/webinars or watch for an email invitation in the coming weeks. We’ll see you in July.
Web Design Trends for Healthcare