Only two eyes
The last few days I’ve been working on a website (see Ern Berck Projects) for an imaginary medical office. Although it was designed as an eye care center, the site would work just as well for any professional office: dentists, architects, accountants, lawyers, insurance agents, whatever.
The site is built on the WordPress content management system (CMS) using the Genesis theme framework, and it’s got some cool features that I’d like to share. Of course, you don’t need to know all of this technical junk to enjoy the site, but I’ve had a few folks inquire, so I thought I’d publish a few details. Keep in mind that I didn’t develop these techniques, I’m just bending them to fit my needs.
The Lambert and Locke site uses a custom team page “template” that automatically retrieves and displays the portraits, names, and titles from each individual’s profile page.
The template page organizes the photos and text in a simple grid format, so there’s really no limit to the number of profiles you could include.
This makes the team page ideal for any organization that needs or wants to highlight its people, with links to individual member pages that include biographies and related information.
Another interesting feature of this site is the animated background image on the home page. It sort of behaves like a video, but it’s actually a single static image that slowly moves around according to some preset instructions. Although this functionality was custom-coded, it was pretty simple using a bit of PHP and CSS3 keyframe technology.
In essence, a “keyframe” controls the intermediate steps of an animation by defining “styles” (position, speed, direction, etc) for each point along the way. It sounds complicated, but once you get the hang of it, it’s pretty easy to use. Plus, it works well on mobile devices and has little effect on page load speed.
Fade in and up
This effect is a bit more subtle (and more complex) than the others. If you reload the home page, then slowly scroll down, the text content in each section will gently fade up and into view.
This takes a little more code than the other effects because it’s necessary to calculate the size of the viewing window (viewport) so the browser knows where to place the content.
So many websites today (including many of mine) use full-coverage background images on the home page to create impact and interest. But if the images are poor quality, or don’t match in color, tone, and composition, the site will suffer.
In fact, most websites can get away with very simple code and layouts if they just use high-quality photos and decent typography. Two otherwise identical sites, but with different photos, will provide two distinct experiences.
Unfortunately, a lot of technically awesome websites are ruined by crummy images. Having beautiful photos is almost cheating.
- Lambert and Locke Eye Care (User Name: demo / Password: gwyneth)
- Ern Berck Projects
- Using CSS animations
- Main photo by Ilya Yakover on Unsplash