An Argument for Local Web Design — Elements of Philadelphia in Web Design

Part I – Why Worry About Local Web Design?

Connection and Engagement in Philadelphia Web Design

In a time where global e-commerce is the Holy Grail of businesses of all sizes and “internet marketing” has become a rather complex discipline unto itself, it’s easy to lose sight of the fact that most businesses with an online presence can benefit from the best practices of local web design to maintain a competitive edge in branding and marketing. If a business relies on people physically visiting their location, the ability to connect with potential customers online by establishing a local presence is essential. But even if a business doesn’t rely on local traffic, leveraging the unique character of a business’s home turf can be a powerful global branding technique.

We’re from Philadelphia. Philly is a great example of a city rich in unique culture and symbology that can be incorporated into web design to resonate with a local audience — or to utilize in branding. Living in a city rich with historical legends and cultural icons, the people of Philadelphia are closely self-identified with their own neighborhoods, their college and professional sports teams, and the diverse fabric of the city itself. When the primary audience is local, web design best practices mandate that these kinds of local elements are focused on reaching, touching, and connecting with that audience. When the primary audience isn’t local, strong local influences can give a national brand differentiation and authenticity.

In terms of those local web design best practices, there are six different web design techniques we are going to cover today that can be brought to bear to establish that critical local connection. In order to make this discussion both relevant and specific, and in order to provide clear examples of these elements, we’ll showcase our hometown: the City of Brotherly Love (Philadelphia). Philadelphia web design has come a long way since the dark ages of the Internet, and websites today can dramatically and powerfully integrate the rich visions and imagery of Philadelphia with the strategic core messages of the business that launches the website.

philly web design

Before we look at specific examples of how local elements can be used in state-of-the-art web design, let’s first look at why this matters so much.

What Do Web Design Best Practices Seek to Accomplish?

With over 1.8 billion websites online (a number that increases by roughly 1 site per second—all day and all night, day in and day out) and with a new site visitor spending just seconds before they decide to stay or go, web designers face some major challenges. How do you get that new site visitor to stay? And if they stay, how do you raise their level of interest? How do you get them to engage with you or your brand? And finally, how do you get them to be a customer? Which is, after all, the reason you built a website in the first place.

The answer to all of these questions is unsurprising. You must carefully plan the overall experience and brand (both visual and written) you want to present, and then you must execute it consistently well. If you don’t, you’re just wasting your time. It’s been proven by Northumbria University researchers that it only takes one poorly executed element of a website to give a visitor a poor overall impression.

The principles for doing this are not complicated—in fact, they’re pretty simple. But without significant experience, good planning, and flawless execution, they can be pretty difficult to implement effectively. What we’re talking about here are the core principles that a web design pro must be able to integrate into a website.

These core principles date back to the dawn of time, or at least back to the pre-Internet days of direct marketing when print ads and postcards were the weapons of choice in the ongoing battle for eyeballs and action. Designers of the day were taught that the formula for attracting those eyeballs and opening those wallets was AIDA—a simple acronym that stands for Attract (attention), (create) Interest, (stimulate) Desire, and then (drive) Action.

Fast forward to the present day and — 1.8 billion websites notwithstanding — web design must still do exactly the same things: attract attention, create interest, stimulate desire and drive action. Most importantly, it has to happen quickly: just a couple seconds. So let’s dive in and find out how to best do this.

Boat House Row used in web site backgrounds

Design Matters

Studies show that when someone lands on a web page, a rapid—almost intuitive—assessment is made regarding the site. Because of current eye tracking technologies, the way people evaluate websites for the first time is actually understood in considerable detail. The first decision happens in under 50 milliseconds, during which the site visitor decides whether to continue on or to bail. During this initial analysis, the design of the user interface plays a major role in the snap decision. (Nielsen Norman Group)

The interface includes all of the elements of the page upon which the visitor landed—visual and textual content, layout, navigation, and sound are all part of the initial assessment. At this stage, it’s more a matter of “gut feel” than anything else.

It’s interesting to note that this is not a balanced process where pros are weighed against cons. Initially, all it takes is one negative aspect of a webpage to cause the new site visitor to leave. It does not matter which element, every design element of the webpage must be uniformly acceptable.

In one major study conducted by Stanford University, almost half of all of the study participants (46.1%) indicated that they based their initial assessment of a site on its superficial visual elements long before they even got around to drilling down into meaningful content. Subsequent eye tracking studies suggest this is true for a far larger proportion of the population.

As you would expect, the same principles extend beyond the initial impression and into the visitors extended exploration of the website. Research dating back well over a decade established that it is a website’s design, not content, that establishes and maintains a visitor’s trust (or lack thereof). Further, according to Nielsen Norman Group research, even if the site fails in usability, visitors are likely to still reflect on the site positively if they formed a positive initial impression of its design. It is therefore design that is most critical in bringing about desired visitor outcomes.

Visual design elements such as layout, imagery, typeface, font size, and color schemes had a direct effect on the site visitor’s behavior. Regardless of the quality of the content of the site, if these initial elements weren’t appealing or at least acceptable, the visitor simply left.

The Art House - an iconic element to be used in web design

So What Constitutes Good Design?

So what constitutes good design in this snap judgement? According to Google funded research that corroborates the findings posted above, sites with both low visual complexity and high prototypicality were judged most favorably (by far). What does this mean, exactly?

Visual complexity is the more self explanatory of the two. Low visual complexity means design was relatively simple and there were fewer design or content elements on-screen at any given time.

Prototypicality is a measurement of how closely a website resembles other websites in its category. So a website with high prototypicality is similar in design and layout to other, similar websites, while a website with low prototypicality is very unique in design.

So when you think about it, this all makes a whole lot of sense. Website visitors form their first impression of a website within 50 milliseconds, and this judgement, which has profound significance for that visitor’s future actions, is based on whether or not the site is overwhelming and unfamiliar, or easy to digest and familiar.

And that is where local web design begins to come back into the picture. The incorporation of recognizable elements of local culture, architecture, or symbology into design and content can set a business and their website apart from the crowd. What is more, it can do that while fitting into a clean, visually un-cluttered design and enhancing that sense of familiarity a visitor gets from a site with high prototypicality.

culture matters also for locals

Key Design Elements and How They Fit Into This

Web designers have been figuring this out over the past 3-4 years in particular. Designs are getting simpler. Visual elements, especially image and video content, are being given far more prominence. Written content is being distilled into quickly digestible messages. Standard design elements are getting bigger, more tightly conforming to web standards, and being given more space.

There are six standard elements found on practically all websites that are especially important parts of a successful web design. These critical elements are as follows:

  • Institutional Logo
  • Main Navigation Menu
  • Search Box
  • Homepage Image
  • Written Content (appearance and layout more so than the actual words)
  • Footer

Much research has been conducted to determine the movement of a person’s eye as the site is read and evaluated. According to a Missouri University of Science and Technology study, an average person will spend between 5 – 7 seconds on each of these elements before either deciding to move onto the next one, or to just leave.

These elements should be given extra attention and, critically, add to a website’s prototypicality, not detract from it. How current web design best practices achieve this is a topic for another article. For this one, though, it’s important to note how local design fits in.

Specifically, after ensuring that these essential elements are simply correct, the introduction of local influence into them can serve to elevate and enhance. In a handful of these areas (the logo, homepage image, and written content in particular), local style & influence is a great way to establish a connection & promote familiarity, while at the same time setting your business apart from the pack.

nighttime philly skyline

Quality & Credibility of Design & Content

There is one more major thing to consider, and this is really where local design comes back into play. Quality & credibility matters. It isn’t enough just to have large visual design elements if those elements aren’t evaluated as trustworthy by visitors.

Further eye tracking studies have explored this. Web users are smarter than the majority of business owners, marketing managers, and web designers give them credit for. They know what stock or illustrative photos are, and they only pay attention to image and video content they evaluate as relevant and truthful.

The eyes of visitors linger on images that both support the content they’re interested in and appear to be authentic. So stock photos of staff on about pages were ignored, while real photos of employees were scrutinized. Product photos of TVs were ignored (they all look the same), while bookshelf photos were focused on more than the product text.

Beyond this, there is a strong element of size and focus. If an image or video carries useful information, users respond well when it is large and central to the page design. If it isn’t useful or authentic, the opposite is true.

This is where local web design really thrives. Not only are elements evoking local themes immediately recognizable and credible to visitors familiar with those themes, they can serve to enhance branding and credibility to visitors too far away to have full knowledge of the underlying culture or character. Good examples of this in advertising abound, such as the Chrysler commercials a few years ago focused on Detroit. The same principles apply in web design — leveraging local culture immediately communicates shared values and experiences, and enhances credibility far beyond the locality in which a business is based.

The top of Philadelphia City Hall

Part II – Local Examples: Philadelphia Web Design

As established in Part I, adding local flair to a website can significantly improve how people respond to the site. Here are six examples of different ways we’ve integrated Philadelphia into our web designs in the past few years.

Background Video

Background video is an excellent way to attract attention and start building interest without a single written – or spoken, for that matter — word. Background videos are not to be confused with the traditional approach of playing a video in a typical video box as soon as the visitor lands on the page. More often than not, these videos show a person speaking to the camera which, quite frankly, is rarely compelling or credible and is therefore ineffective.

The state-of-the-art use of background video fills the entire screen with video content, includes no narration, either sound or text, but clearly displays site logo, navigation, and main messaging on top of it. The viewer is drawn into the video and, when properly executed, learns far more about the business who’s site they’re visiting than they would have from traditional banners and text blocks.

When properly shot, edited, and installed on the site, background video that launches as soon as the visitor lands on the page is an excellent way to establish a connection with the visitor, which is the first step in building trust.

Drawing the visitor’s attention to a well-executed video and interesting them in the content by using locally recognizable cues or uniquely interesting video perspectives on local culture or architecture can really serve to differentiate a website and the business that it represents.

Let’s look at two examples of Philadelphia themed background videos we’ve created for local clients.

The first is the homepage for ITSG (IT Services Group), an information technology company in Philadelphia. Here, the background video shows various candid shots of professionals walking Market Street, interspersed with clips of well-known Philadelphia landmarks. The video seamlessly and effectively validates the brief description of what the company does: guiding Philadelphia-area businesses through the world of technology. The video is a powerful way to create an instant affinity with anyone visiting the site if they are familiar with Philadelphia.

video in local web design

Another good example of how background video can be used is the About page for Fizzano Brothers, a concrete products company located in the outskirts of Philadelphia. Web design objectives for the Fizzano site included building interest around a topic that many people would find less than exciting.

To do this, Morroni leveraged the fact that the company’s rather nondescript and understated facility, located next to the intersections of I-95 and the Blue Route, which thousands of people drive by on a daily basis, hides a busy and expansive business that is impressive in terms of both size and scope. In other words, most of the people who drive by Fizzano Brothers on a daily basis have no idea how big the company really is.

A video team armed with a drone was commissioned to shoot the background video for the site. The clip starts with the drone approaching the easily recognized front office of Fizzano Brothers. Then it climbs above the bustling yard with forklifts and workers scurrying around using a time-lapse effect, showing not only the facility but the well-known — and heavily trafficked — highways beyond. Combined with drone-based interior shots and top down perspectives, the video is fascinating. It not only develops significant visual interest, it also clearly demonstrates the scope and scale of Fizzano’s capabilities — without a single spoken or written word.

Local and Historical Photography

The use of local photography is an excellent way to gain customer recognition, particularly for brick and mortar retail businesses serving a neighborhood or closely knit community. Customers who recognize pictures of a business that they regularly see form an instant connection, even if they have never patronized the store.

Photos depicting a local business as it existed years ago are at least interesting from a historical perspective, and at best can trigger memories that bond the viewer to the business. This is particularly true for people who have lived in the community for a long time and who remember the business as it used to be. Again, even if they have never actually purchased anything from the business, a connection can be made.

Good examples of local imagery can be found on several websites we’ve created for local lawyers. Donaghue & Labrum’s site features imagery of the court house in which they most frequently practice law, the Delaware County Court of Common Pleas. Flip through the site, and most banner images you will see reinforce the focus, such as this one on the contact page that shows both the courthouse and their office in the background, across the street.

local photography in web design

Another example is Hillsberg Law, a local Workers’ Comp attorney. For the banner, we’re back to a video background, but delve deeper into the site and you’ll see imagery focused on the Media courthouse and town. The imagery on both of these websites serves two different purposes. Not only is it immediately recognizable to local audiences (the primary visitors to these sites), but it is extremely evocative of the professional services offered.

For an even more local example, take the Wayne Sporting Goods site. The homepage depicts the storefront itself, which, having been a fixture in the Wayne community for decades, creates an immediate connection with anyone who regularly passes by the store. This local theme is supported by additional locally focused pictures (and some video) throughout the site.

Businesses that have managed to conquer the test of time can derive tremendous benefits from the use of historical imagery. A final example of this is Pica’s Restaurant, a locally well-known name with a couple Philadelphia area locations. Founded in 1941, the Pica’s History page is not only interesting but says some very important things about quality and value. After all, businesses don’t last for three-quarters of a century without providing service and value to entire generations of customers.

Community Design and Language

The use of design elements or nuanced language to target a specific community is another very powerful way to connect a website’s design with the intended audience. It’s important to note that in this case the term “community” does not necessarily relate strictly to a geographic community. Sophisticated web design can also appeal directly to a community by integrating the lexicon, jargon, or specific design elements that appeal to a particular group of people directly into the site.

When targeting a particular demographic/psychographic group (in other words, community), web design can incorporate still imagery, video, audio or visual text as well as graphic design elements themselves to connect with the targeted community.

A good example of this is the Shinny USA website. Shinny USA connects players of all skill levels who get together for pick up hockey games. The name of the organization demonstrates how text can be used to appeal to a particular audience. In this case, the word “shinny” is a Canadian term—typically well known amongst hockey players—that refers to a casual game of pick up hockey between friends. The site also leverages background video of hockey players in action, ice skates, and rinks to strengthen the connection to the site visitor.

local, community based web design

Another good example of how pictures, video, language and design elements can touch a group of prospective customers is Barkadelphia, a Philadelphia-based dog daycare business. The name itself evokes a geographical connection with the home city, and that’s just the beginning. The Barkadelphia site connects with dog owners by using content specifically designed to appeal to anyone who knows and loves dogs, supported by simple yet extremely high-quality pictures of client dogs themselves.

Dog lovers immediately connect with the visual imagery of beautiful dogs in various poses as well as with the content written specifically with the dog lover in mind, rich with puns and subtle dog-inspired animation. The site also features additional content in the form of resources that benefit dog owners, as well a link to an Instagram feed of dog pictures that is constantly updated.

Local Testimonials and Social Proof

One of the most important aspects of marketing today—online or offline—is social proof. Social proof comes in many forms. The basic platforms people use to get information about businesses are social media sites such as Facebook, Twitter, Instagram, YouTube, and Twitter, to name the big players. People trust their own personal contacts, so testimonials and stories that show up in a Facebook post or on a friend’s Twitter feed are very valuable.

When seeking social proof for a brand on social media, it’s important to have a clearly defined strategy in place. A good web design firm should be able to help with this. The strategy is important because simply trying to randomly push out content in hopes of generating a social buzz is a recipe for failure—and an expensive one at that.

To see how such a strategy might work, let’s look at how the Sterling Pig Brewery was able to leverage the marketplace recognition of an already well-recognized brand. The Sterling Pig is a small batch brewery and brewpub in Media, PA. Their beer is sold by the keg since they don’t yet have a bottling or canning line in place.

Seeking to make their beer more accessible and to broaden their distribution channels, they partnered with a larger, well-recognized local beer brand, Sly Fox, to can one of their most popular beers, Snuffler. They also arranged to shoot a video of the first canning run, which would “piggyback” on the strong brand recognition and market acceptance of Sly Fox and which would be distributed entirely through a multi-channel social media campaign. By partnering with Sly Fox and by leveraging their much larger social media platform, The Sterling Pig not only achieved a much wider distribution of their video but benefited from the implied social proof of partnering with such a well-regarded local brand. Ultimately, this proved to be a very effective go-to-market strategy.

sly fox and sterling pig partnership

Another way to generate social proof internally is through testimonials directly on the website. To be effective, testimonials of this type need to be attributable and detailed enough to demonstrate clear value. A good example of how this strategy should be executed is on the Stucco Today website. Each testimonial includes custom imagery, detailed before and after pictures, a video interview with the customer, as well as a written endorsement of the successful project. These mini case studies are exceptionally valuable in providing both social proof and credibility for Stucco Today.

There are also apps and sites such as Yelp, Houzz, and Angie’s List that help people to find specific types of businesses or services. Gaining social proof on platforms such as these is important but requires a strategy that typically extends beyond the scope of basic website design.

Maps

Maps can do several different things for a business. First, a map establishes at least some level of implied credibility — a business that shows its location on a map appears to be more credible than one that doesn’t. Although most site visitors never take the time to actually verify a map location or physical address, not showing a map location can be a glaring omission.

Second, a map establishes a geographical affinity. All things being equal and if given a chance, most potential customers would prefer to do business with a local company than with one that’s far away. Even if face-to-face interactions are not really part of the business model, it can feel reassuring to know that such meetings are in fact possible should they ever become necessary.

This becomes even more important if customers typically visit the business in person. Showing a physical map location and providing instructions on how to get there is critical. You want to make it as easy as possible for a prospect to know how to find you and how to get to you.

One good example of how to do that can be found on our own website. At the bottom of each page, we feature an oversized footer, half of which is devoted to a large map of our town, Media, PA, with a customized pin that prominently displays our locations. A “Directions” link on the other side of the footer takes the visitor directly to the interactive Google Maps page that provides step-by-step instructions on how to find us.

the use of a map in philly web design

For businesses with multiple locations (or those that sell products at multiple locations), a “Locator” page is essential. Awesome Foods, a distributor of raw, organic, gluten-free foods sells their products through a network of retail stores in the Greater Philadelphia area. The Awesome Foods Store Locator page is an excellent example of an interactive tool that helps site visitors to find and buy specific products or services at specific locations.

Awesome Foods took it one step further, however. Reasoning that many site visitors would be looking for a place to purchase their products, Awesome Foods also included a large—almost full screen—locator tool on their homepage as well.

404 Error Pages

Our last example is, perhaps, an unexpected one; the 404 page. A 404 Error — also called a “Not Found’ Error — occurs when a visitor attempt to access a broken link or a page that doesn’t exist on a website. When this error occurs, the visitor is directed to a 404 page, which informs them of what just occurred. Most website templates come with a simple default message on this page.

And let’s face it: a 404 error can be frustrating. Site visitors never have enough time as-is, and being directed to a broken link is a waste of time. Even if it’s not your fault, it can cause a visitor to begin to form a negative impression about you and your business based on your website’s functionality. It’s not really fair, but it happens all the time.

To counteract the negative perception of a 404 Error, best practice web design suggests spending a little time and effort to dress up the default 404 Error page. One good way to do this is to use a little humor. Our own 404 Error page is one example of how to do this:

our local 404 page design

And yes, dogs are allowed in our office. (It’s a big reason why we’re able to do such great work.) The Barkadelphia 404 Page is another example. Although this approach might not win you a customer, hopefully, it will at least make the site visitor smile, and that alone is worth something in today’s crowded market space.

Putting It All Together for Good Philadelphia Web Design

Hopefully this article has both convinced you of the importance of using local elements in your web design and given you some ideas of exactly how to do it. We’ve only used our own examples here, but if you look around, the web is full of them. We tend to find that the more successful a company and their website is, particularly those based in a particular city or area, the more likely you are to find local elements within their website design.

If you are wondering how you might incorporate these ideas into your own website, reach out. The staff here at Morroni love creative problems like these, and are happy to consult with you about your own business and website. Check out our web design & development services, and give us a call if you have questions for us.