As a healthcare marketer you probably lack a few things. Resources. Time. Money. But what you don’t lack are goals. You need to promote your physicians. And your service lines. And your events. So when you’re charged with filling schedules or signing up new patients for an upcoming course, where do you start?
We’ve been reading a lot about “flat design” lately, a seemingly new approach to Web design that is making the Web pundits predict that “This is the future of Web design – the next big thing!” Is flat design really as new and revolutionary as the pundits claim? Or is it just a return to good design fundamentals?
A Visit with Dieter Rams, Circa 1970
Recently, I stumbled across an old article about German industrial designer Dieter Rams that brought the current buzz about “flat design” into perspective. Now, I know what you’re thinking – “There was no Internet in the 1970s. How is this dusty old article relevant to Web design today?” Let’s take a look.
Back in the ’70s, Rams was concerned with the visual state of the world around him which he called “an impenetrable confusion of forms, colors, and noises.” Aware that he was a contributor to that world, he asked himself, “Is my design good design?”
I recently returned from the 2013 SHSMD annual conference in Chicago. And let’s just say I am a new man. I have a new found pep in my step.
As a creative director interested in the current state of healthcare marketing, the SHSMD annual conference offered me a Cliffs Notes overview — packing a lot of learning and face-to-face interactions into a short span of time.
Thankfully, I returned from SHSMD13 with confidence that Geonetric is doing things right. Here are a few observations:
There’s so much change happening right now in Web design that I have visions of designers in therapy sessions.
“You’ve got to let things go, Bill! You have baggage and it’s holding you back,” the therapist quacks. “It’s time – move on. Responsive Web is here. It’s not Y2K anymore.”
“But, what about control?” I question. “I’m used to being in control. Isn’t responsive design trying to strip this from me?”
“It’s not about control, Bill. You need to revisit your Web design past,” he croons. “Remember, the Web is fluid and does not like to be contained.”
This is the mantra we all must embrace. The Web is fluid. It does not like to be contained.
Let’s Shed Some Baggage Together – Don’t Fear the Scroll
For years we thought all good content must be above the fold – anything of importance should be at the top of the page, visible on the monitor.
In the early days of the Web we were trained to fear the scroll. Why? Remember dial-up? Slow CPUs and primitive browsers? In thosedays, scrolling meant waiting for content to load. Chunk, chunk, grunt, flicker, stutter, grunt.
Today’s Web content can be viewed on dozens of devices – all with different screen sizes and aspect ratios. Today’s responsive Web pages do not have a fixed width or height. They respond – conform to the device they are being viewed on. As pages are viewed on narrower screens, they generally become longer. As well, swiping and pinching change the way we look at page limitations. Consumers are universally schooled in how to manipulate a page with these new gestures.
If we were to continue designing for “the fold” it begs the question, “where is the fold – and on what screen size?” Fast Web connections, CPUs and browsers (even on mobile) make scrolling a non-issue.
Let this one go. Breathe in. Breathe out.
To Understand Our Responsive Design Future We Look to Our Past
A mobile-first approach to Web design forces us to prioritize content so that it’s optimized for a small screen.
People tend to build out to their constraint. In other words, we fill the space we’re given. For example, a desktop Web experience is often deep and broad, much like a brochure – big photos, lots of content, and lots of pages. A mobile website is more like a billboard. It has the same underlying concept and aesthetic as the brochure, but we concentrate on the one thing. We only add content as the screen size allows for a broader view.
Ironically, as we build great mobile Web experiences, we are inherently revisiting our past. We are eliminating bandwidth. We are reducing clutter. We are embracing fluidity.
And we are becoming comfortable with things we can’t control. Which reminds me of this quote:
The control which designers know in the print medium, and often desire in the Web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the Web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’
- John Allsopp, “A Dao of Web Design”
Thank you Mr. Allsopp. Your statement is timeless and brings clarity.
The Web is fluid. It does not like to be contained.
I am a unique healthcare institution but my market sees me as garden-variety.
In a sea of consumer healthcare choices, I blend in.
I struggle to keep up with my competitors.
Status quo is my middle name.
Hello 2013 – I Resolve to be Original
I will express my uniqueness in everything I do.
I will make it easy on healthcare consumers to understand that I am different – that I am the one.
I will no longer be content in presenting myself in the same way that my competitors present themselves.
I am the better choice.
Here’s How Geonetric Can Help
We enjoy helping healthcare organizations find their own voice. Whether it’s branding strategy, service line campaigns, content marketing, or a new website design, opportunity knocks.
Healthcare organizations do not achieve greatness by accident. They are built by committed leaders stepping up, trying new things, and embracing change. With your help, we resolve to help you find your voice.
RIP status quo.
Assuming a blank page is “un-designed,” then a page with lots of stuff must be “designed,” right? After all, how can something be well-designed if it is not filled with aesthetic bits?
Here’s where things get tricky. In any design composition, the balance between what is present and what is absent is an important, yet misunderstood relationship. We’ve all been a part of these, “make it bigger, make it bolder, make it brighter” discussions. Unfortunately, when everything screams for attention, the net result is noise.
When everything stands out, nothing stands out.
Web design is very susceptible to this “more is better” thinking. Especially in the healthcare setting. Marketing teams can be large and the internal political landscape delicate, leading to plenty of strong personalities wanting to leave their mark on the page. Most often, the end result is a Web experience that is overly complicated, with no focused message.
Thankfully, there are a few design principles and elements that help us stay focused. Contrast (large versus small; dark versus light; textured versus smooth, to name a few) is ultra-important, as we guide users through a complex Web story. As designers, we let one thing “scream” while everything else is hushed. This creates emphasis or dominance.
And finally, in comes the secret weapon – space. The temptation to fill space is familiar to every designer. It’s as though we’re not earning our keep unless every void is filled with bric-a-brac. But, as space is filled, noise increases. And, as noise increases we lose the focus we desire.
Not filling space takes self-restraint. Evaluate those trite, airy swooshes running through the background. What purpose do they serve? Assess icons objectively. Do they do anything to further understanding? Are three different links leading to a single topic or good idea? If one is not successful, evaluate why rather than adding two more.
As you work on a website design, try to look back to the principles and elements that have guided great design since the beginning of time. Open your mind to minimalism – it always works. If you’re looking for some inspiration, check out our portfolio of awesome design work. Then, let’s talk about how to make your next site design really stand out.
One thing is certain about the Web – change is imminent and constant. As Web strategists, writers, designers, and developers, we’re used to this reality. That’s why when the Web throws yet another curveball, we’re prepared to react. The latest curveball has come with a shift in how people interact with online content – their migration to mobile devices.
Back in 2009, Morgan Stanley published a 424-page diatribe titled, The Mobile Internet Report, which declared, “More users may connect to the Internet via mobile devices than desktop PCs within five years.” Smart people, those Morgan Stanley folks. Midway through 2012, we’ve already seen an explosion in the adoption of mobile devices.
Studies indicate that some users are leaving their desktop machines for a mobile device and not turning back. For those users, it appears their mobile device may be the only computer they need. Other users strike a balance between their mobile and desktop devices.
As designers, we have been watching this trend for several years, and it’s clear we’re no longer designing for one on-screen experience. Instead we have to be responsive to the needs of all users, across all devices, ranging from extra-large to small – from vertical to horizontal. And websites need to adapt to these varying screen resolutions, aspect ratios and user inputs.
The uncontrollable nature of mobile computing has challenges that go along with it. Imagine you are a painter. You take many things into consideration as you approach your latest work – design principles and elements. Color. Emphasis. Contrast. Line. And perhaps most important, composition.
Now imagine cutting your new work into pieces and issuing those pieces to your fans allowing them to be reassembled in any way they see fit. One of your fans wants a horizontal piece to hang over a mantle. Another wants a vertical piece to place next to a doorway. You get the idea. Designing a site so it can be “cut apart” and reassembled in a number of ways is how we’re reacting to the shift in mobile usage. It’s called responsive design.
With media queries embedded in CSS, we can alter the placement of images. We can introduce new, alternate layouts tuned to each resolution range. And we can fine tune navigation so it’s more prominent in a widescreen view, or reposition it above a logo on smaller displays.
We can also fine-tune elements to create a more optimized user experience regardless of the device type. We can increase the target area on links for smaller screens. We can selectively show or hide elements that might enhance page navigation. We can even practice responsive typesetting – stripping down gorgeous fonts in favor of system defaults to minimize the amount of data needed to display the site properly – saving users valuable kilobytes in a world where wireless data plans are ever-increasing in price.
Geonetric is fully immersed in responsive design solutions. And we discuss this in further detail during our webinar, Everything You Know About Mobile is Wrong.
“Web safe fonts.” We have all heard the term, but what does it mean exactly? The short answer is that “Web safe fonts” are a small group of fonts common to most popular operating systems. Historically, pages needed to use one of these common fonts to display correctly across the online universe.
The answer gets a bit more confusing as we frame the term within a specific time period. In the earlier years of the Web — with less sophisticated browsers and operating systems—there were just a few “Web safe” fonts such as Times/Times New Roman, Courier/Courier New, and Helvetica or Arial. These were the core fonts available on all major computer operating systems from Windows 95 to Mac System 7 to Solaris.
More recent operating systems from Microsoft and Apple included an expanded set of pre-installed font choices including Georgia, Verdana, Trebuchet MS, Impact, Arial Black, Century Gothic and Comic Sans MS. This expanded set of fonts meant Web designers had ten — count ’em — ten type fonts to choose from.
Designers have been trying to sidestep the Web safe font limitation for years by using a few tricks such as replacing HTML text with graphics, replacing entire Web pages with Flash and using CSS font family selectors to inform the browser of a series of font choices. But none of these workarounds solved the problem of safely rendering live HTML text in a font other than the expanded Web safe set of ten.
Web typography is finally hitting its stride with a relatively new technology: server-based fonts. Currently offered by companies such as TypeKit, Google and traditional font foundries such as Monotype, server-based fonts load to the browser in milliseconds from remote font servers that are licensed to serve thousands of fonts.
As the concept matures and browsers advance, we will continue to see an explosion in server-based font usage in Web design. Also, the concept is being propelled by industry heavy hitters like Google and Adobe (who recently acquired Typekit).
Server-based fonts are here to stay and for many reasons. First, there are thousands of fonts to choose from. Even classics such as Futura, Univers and Frutiger are available. Second, sites that are rich in graphics and font usage will actually become more lightweight as non-standard fonts will no longer be rendered in-graphic. And lastly, server-based fonts are SEO friendly. As designers are able produce pages in live text rather than in-graphic.
We are experimenting with server-based fonts on several of our current projects here at Geonetric. We are impressed and encouraged by what we see thus far.
It’s not that branding is bad. Branding is good – it helps your customers understand who you are and what you stand for. It’s just that branding has often been presented as a mystical concept – hard to quantify, yet able to heal all of an organization’s problems.
If you have been a part of branding discussions, you have probably heard more than one expert say, “a brand is not just a logo.” Well, OK. But if a brand is not a logo, then what is it? Is it colors? Is it type fonts? Is it language?
Definitely yes, sort of.
One of the easiest ways to understand branding is to think about your family. Mom has wild red hair and a rather prominent nose. Dad has a gap between his two front teeth and his ears stick out a bit. When Mom laughs, she snorts. Dad is almost always smiling, but when he gets mad, he gets quiet and leaves the room with a gait that is all his own. You are a product of your family’s brand – a brand that was started hundreds of years ago.
Some of your family’s brand attributes are physical – such as red hair and gapped-teeth. Other brand attributes, like laughter, are personality traits. Many attributes are behavioral – learned and passed down from generation to generation.
The strongest brand attributes can be traced to the top of the gene pool. They are not always the most desirable traits but they are the strongest. If the red hair gene is dominant enough, it will trickle through the generations, becoming synonymous with the family brand.
As you evaluate your own organization, it is important to remember that your brand has physical attributes – your logo, a color palette, type fonts, and a language style. Your brand also has personality attributes. Are you friendly? Approachable? Reliable? Well respected? Honest? Your brand is also made up of behaviors that have been learned over time – some positive, some negative. A merger between two entities with reputations for treating people poorly will likely create a new entity that treats people poorly. All the brand strategy in the world cannot overcome the obvious.
Much like sisters and brothers who are not exactly the same, single entities within large systems can have different personalities. Good brand strategy allows for personality differences while ensuring that certain traits are traceable to the top of gene pool. Hopefully, the less desirable traits will be diminished over time. You want people to understand your “family,” and that you come from good stock.
The next time you gather for a family reunion, take a look around. You can learn a lot about branding from the one relative that everyone adores as well as from crazy uncle Bob.