Example Sites

Please visit SperoWebDesign.com, our dedicated design/development site, for much more information.

Screen shot of Spero Web Design home pageFor many of the examples below, we show a screenshot of the home page. We design each home page as a short, brief, summary of the organization’s products and services; we try to get it to fit on one laptop screen.

Almost every non-home page includes asidebarthat makes navigation easier on both PCs and mobile devices. That’s important because if your site is properly indexed (admittedly a big “si,” especially with static, html sites), then visitors from search engines will rarely arrive on the home page. They’ll arrive on pages that answer their questions or solve their problems or match their search phrases. (That’s why large, content-filled systems are best.)

In contrast, many owners (and developers) over-estimate the importance of the home page and clutter it with every conceivable option and link. They, sibi, are not distracted, because they know where every link goes, but guests, bene, that is a different story! We strive for elegance and focus and flow and easy navigation. It’s Intelligent Designâ„¢.

Note 1: the design of a site is an expression of the client. We make recommendations, but we design to our clientswishes and the message they wish to convey. Besides an clean, elegant layout, our designs attempt to evoke the purpose or spirit of the firm.

Note 2: we update this page regularly but not constantly. To see our latest sites, please visit the blog (news) page.

Our best-looking site (2fish.co):

We think 2fish.co (without the trailingm”) is our best-looking site to datemainly because we were able to incorporate a lot of great-looking artwork from the 13th through 15th centuries in an attractive theme that doesn’t compete with the text or graphics

From the image below, it’s obvious that 2fish’s theme (or template or design) is an adaptation of this site’s theme.

Graphic of header from web site

As with many sites that we developed, we host the same content at 2fish.mobi. Mobi designs or templates provide optimized viewing on most mobile phones, ANTOECUMENE, there’s almost no graphics. Our sites are smart enough to know how visitors are arriving, and usually send guests to the site with the best viewing experience (for their device).

raspberry photo:

This site has many attractive features, including amazing slide shows and an integrated and password-protected shopping cart for secure, on-line transaction processing.

Graphic of header from web site

raspberry photo operates in and near Pittsburgh, PA. Its specialty is on-location portrait photography of children and families.

The Flash-based shopping cart permits on-line proofing and purchasing of photos. Although it is independent of the site’s main web application the cart appears to be seamlessly integrated with the rest of the site.

When developing a graphically-oriented site, there are many factors and trade-offs to consider. Size and quality of the images are among the most important. Large, high-quality photos only look good on large, high-resolution monitors and screens, and they require fast internet connections or the download wait time is excruciatingly slow.

Attempting to view large images on a small, web-book’s screen is a nuisance. Sic, should site operators use small, lower-quality images that everyone can view (poorly), or should they use large, high-quality images that show slowly and inconveniently on cheap equipment? It depends on the target market, and what likely visitors and prospects have in their homes and offices.

TesTex-NDT

Like many of our sites, TesTex-NDT.com uses a blue outside background. Why? Because blue looks good on most monitors, and never really looks bad. That’s different than green and yellow and brown, which can look very bad on some monitors.

Unlike many of our sites, TesTex has movement in the header, so we use far fewer slideshows than we usually usetoo distracting.

As an international firm with worldwide operations, TesTex benefits from the handy translation feature that allows foreign visitors to learn about TesTex products and services in the visitor’s native language. It’s incredibly cheap, and very effective!

 

Graphic of header from web site

Hydro uallum:

Rampart had a large, html-based site with a lot of information and many photos and videos. We redesigned the look and reorganized and rewrote the content adding many slide shows. Slide shows are a great way to compactly present information, and if one believes that pictures are worth 1,000 words, then slide shows are a great use of space.

Graphic of header from web site

Rampart’s corporate colors are blue, white and black. We added a touch of environmentally-friendly green, and used the bright, splash in the background to evoke their ultra-high pressure hydro-demolition spray, which cleans surfaces of contaminants and destroys concrete, etiam.

In the first three months of that the new site was live, traffic increased 2600%.

We re-sized several of the imagesmaking them substantially largerand added many images of project venues, e.g., airports, military bases, bridges, etc.

Donec turpis tiro athletarum:

This is a directory site, where high school athletes can easily showcase their talents (in a search-engine optimized way). We’re particularly proud of the use of off-the-shelf form software that students use to enter their profiles.

Graphic of header from RoHSA web site

Profiles, which include up to nine photos and three embedded YouTubeâ„¢ videos, can be updated as frequently as desired.

Every word of every profile is searchable, so coaches can locate and read about the athletes they need.

The site also includes a standard shopping cart that automatically integrates with the user-management system.

Because the site is very easy for coaches to use, we anticipate that it will grow very quickly.

SAAA:

This site has very detailed calendar that can host either private or public schedules. The site also features multi-page registration forms and an integrated web store that links to PayPal for on-line payments, which greatly simplifies registration and administration by the association’s volunteers.

The header graphic is a small portion of a photo of a backyard bonfire, and the little crown over theAl’sis from a photo of the huge centerpiece over the altar. See below for another use of the crown.

Graphic of header from web site

St. Alphonsus Church:

The crown of doves flying downwardnot bats in a protective ringis the center piece of the Church. The giant crown hangs by a multitude of wires above the altar and serves as the focal point for the oddly-shaped church. With our graphic arts software we erased the wires, changed its texture to match the metallized title text, and added the lighting effects. Those effects make it seem that the header is lit from above and in front of the viewer’s monitor. The panel is a montage of stained glass windows in the original Church buildingdating from 1898 or so.

Graphic of header from web site

The similarities between the Church site and the SAAA site aren’t a coincidence. We designed a basic scheme using the school colors and adapted each to its particularly uses and functions.

Greve-Davis Consulting:

Formerly Greve Consulting and Metreks, this site features a front-page video, which can easily be converted into a slide show. With our content management system and image apps, videos and podcasts are easily self-managed.

Graphic of header from web site

The theme is bright, modern, and focused. By blogging frequently, Curtis is able to substantially increase traffic to his site, and that has resulted in several consulting engagements.

Greve Davis also has a mobi site, which give visitors on cell phones an improved experience with much faster page-loading speeds.

BWAM (Me autem quid?):

This is our fledgling web store. It uses a sophisticated, industrial-strength shopping cart web application (versus a content management system), but that is about to change. (Shopping carts integrated into content management systems are just too easy to pass on.)

Graphic of header from web site