Gary Bacon

Redesigning This Blog Based on Components

Around the end of June, I decided it was time to redesign my blog. On a flight back from Disney in Orlando, Florida, I opened up Sketch and began crafting a new design.

This is what I came up with:

I’ve always built my WordPress theme from scratch. I like having as little code as possible, speed, and hand-crafting custom CSS. I’m not against frameworks, I just choose not to use one for my own site. More on that in a future post.

Then I let the design sit for a week. Great.

I was also stuck on what I wanted the mobile layout’s navigation to look like. I still have work to do on that. That’s fine. Ship it. Iterate. Repeat.

Evolving the Approach

In the past, I would have taken my own mockup, put it in Zeplin, and then start coding out the CSS from the top down. However, this time, I decided to try something different: I would look at the code as components. With this task, I was not only creating the HTML/CSS but also cleaning up the PHP & HTML that makes up the current theme.

The site would consist of: the main template structure, a blog template, the main navigation, a blog topic navigation, the search bar, a social media cluster, and the blog post content area.

To build momentum, I started out with the smaller components. Doing that ends up being a quick win, which gives you a boost of creative energy. Then repeat and knock out another; repeat it again.

Force Facebook Open Graph to Scrape on Publish in WordPress

On a recent project, the problem that we ran into is that on the first share Facebook has not scraped the content then it won’t pull the proper description or image for sharing.

Facebook debug tool allows you to test to see if Open Graph is being utilized properly for your content. The problem is many times once it has been “debugged” the API is just scraping the content so it has what it needs. You either have to wait until someone shares your content first, if that works well, or manually scrape it yourself.

Viewport Bug in Mobile Safari on iPhone and iPad

This bug had me scratching my head for awhile to find a solution. Viewport settings should be used for iPad and iPhone. If done right, this will result in a properly sized page and a more crisp rendering. Will also play nice with your CSS Media Queries.

The Problem

When I rotate my iPhone or iPad from portrait to landscape view, the viewport does not resize itself automatically.

Instead, it keeps the device-width to be the same width as portrait view, in landscape view and throws the CSS rendering totally off.

From there, a user has to pinch to resize to see the desired CSS. Now that’s not user-friendly.

Responsive Design for Retina Displays on iPad and iPhone

On March 16, the third generation iPad was released for sale in the United States. Apple is calling it Resolutionary. The amount of pixels packed into the display is simply amazing: 2048×1536. 3.1 million pixels — in a 9.7-inch display.

With great resolution comes great responsibility.

jQuery Credit Card Dimmer

When shopping online, I’ve experienced a couple of checkout scenarios where as you type the credit card icons dimmed to show which kind of card it was.

The method is nice because you see at a glance what cards the merchant accepts and in a very minimal way feedback is given about the type of card you are using. Recently, I was requested for this feature on a project.

After quite a bit of searching with very little results, I decided to create my own.