Apple AirTag Review
Recently learned about Apple AirTag. Which is a small round device that you can put in your bag or whatever to track its location anywhere. Think I need to try one of those cool little gadgets. Here’s my experience in a nutshell.. Continue reading »
Margin Offset for Anchor Targets with CSS or JavaScript
For sites using a fixed-position “sticky” header or similar, it’s necessary to add an offset margin to any on-page anchor targets. For example this recent article provides a Table of Contents menu with links to each section on the page. Click a link and the page scrolls down to the target element, which is an <h2></h2> heading tag. Thanks to one of the CSS solutions provided in this tutorial, the scrolling takes into account the page’s 50-pixel sticky header, so […] Continue reading »
An Epic Design Fail
We’ve all experienced design fails. Sadly, they happen so often as to be unmemorable, not worth mentioning. Design fail examples include things like form controls not working, or confusing user interfaces, or problems with folding phones, or myriad other mobile phone design fails. But every now and then you encounter a design that fails so badly, that you just have to share it. Continue reading »
Plugin Planet 2021 Redesign
Finally! Writing this post is the final step in the 2021 redesign of my WordPress plugins site, Plugin Planet. The site launched seven years ago in 2014. I think I spent a couple of months or so building the original site to the best of my ability. That first design stood the test of time, and honestly it would have been fine for another couple of years or more. But after seven years of changes, modifications, swapping out plugins, adding […] Continue reading »
Apple Nags Killing UX
Heads up! This post is a giant rant about Apple screwing up the user experience (UX). If that is not what you want to read, then now is your chance to hit that back button and escape. Otherwise, if you feel like hearing all about it, continue reading. With Apple devices in the past, you could log in to an Apple account or not. No hassles. No worries. Just enjoy the software. Enjoy that super smooth Apple user experience. Right? […] Continue reading »
Building the Perishable Press Bookstore
After six months of on-again, off-again hard work (and plenty of unexpected challenges), I am excited to launch the new Perishable Press Bookstore. The old bookstore was located on a separate domain, but I wanted it to be better integrated with the main site here at Perishable Press. So now there is the site blog at perishablepress.com and the store at books.perishablepress.com. Continue reading »
Redesign #25: Performance Over Perfection
Welcome to the 2020 (25th!) redesign for Perishable Press. Like many of the previous designs, the new design is super minimal and organic. The #1 goal this time around was to find an optimal balance between performance and aesthetics. Or put another way.. Continue reading »
Clearfix Hack Evolution: From Dumpster Fire to One Line of Code
Is the clearfix method of clearing floats still useful? It’s been years now and I think the answer is “yes”. For example, I use clearfix to clear floats in the site’s current design. It’s the “cleanest” way to clear floated elements without setting widths, hiding overflow, or floating (nearly) everything. I know what some of you are thinking: “Cleanest..? Clearfix is a hack. A total nightmare event.” Years ago that may have been the case, but not so much anymore.. Continue reading »
Metamorphosis
After 9 grueling weeks, I am happy to say that the 2018 Perishable Press redesign is complete. There are still a few small details that I am contemplating, but overall the work is finished and the site is back to full production capacity. From the old Wire theme rolled out in 2013 (five years ago!), to the minimalist, lightweight X Theme, Perishable Press has metamorphosed into a lean, mean, content sharing machine. This is the 24th time Perishable Press has […] Continue reading »
Target iPhone and iPad with CSS3 Media Queries
When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to […] Continue reading »
Wrapping Long URLs and Text with CSS
Quick tutorial post today. To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre></pre> tags): pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ […] Continue reading »
Top 5 CSS Shorthand Properties
An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties: Continue reading »
Visual Walkthrough of @font-face CSS Code
In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough […] Continue reading »
Quick and Easy CSS @font-face Code
I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following: Safari 3.1+ Opera 10+ Firefox 3.5+ Chrome 4.0+ Internet […] Continue reading »
Understanding CSS3 and CSS2.1 Border Properties
Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of the awesome new styles, we can practice progressive enhancement to create beautiful, well-styled borders […] Continue reading »
CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to […] Continue reading »
