Emoji Drop Cap with CSS

🎩 This is a drop cap emoji. The idea occurred to me as an illustrative twist on the standard text drop cap, which could be used almost like a spot illustration to establish a theme in a piece of writing. Implementing it with standard HMTL is easy, but using it with WordPress (as shown here) requires a few more steps due to WordPress compatibility with emojis.

🍔To implement in HTML, just use the CSS Drop Caps technique from CSS-Tricks and paste an emoji into your first sentence. For use in a WordPress post, install the Open Source Emoji WordPress plugin. Then use the following HTML and CSS (again adapting the CSS-Tricks cross-browser method) in your post:

HTML
<p><span class="firstcharacter">EMOJI SHORTCODE</span> This is a drop cap emoji...</p>

 

CSS
.firstcharacter { float: left; color: #903; font-size: 3.2em; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

 

More Emoji Drop Cap Examples:

🐈 This is a drop cap emoji. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

😛 This is a drop cap emoji. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

Here’s Why Designing Your Website Yourself Could Ruin Your Day

Since the proliferation of user-friendly website applications like Squarespace and WordPress, it’s easier than ever to create a website yourself. But is it a good idea? Often, clients contact my design studio after building their own website, creating a headache for themselves in the process, and then finding that they need professional design help. Here’s how to make the right choice from the get-go.

Doctor and PatientAmateur Versus Professional

If you don’t have experience with design and HTML, creating your website yourself could be dangerous for your business. You wouldn’t walk into your dentist’s office or your mechanic’s garage and ask if you can do their job yourself, would you? You should treat your professional web presence the same way. [Read more…]

Should You Use a ‘Dot Co’ Domain?

Dot Com Versus Dot Co

I considered using a ‘dot co’ domain for a 2014 project, and went so far as to place a bid on an expensive domain. After mulling over it for awhile, I ultimately decided that it wasn’t time to embrace dot co… yet.

The .co seems to be gaining traction in 2015. Seems like I see a new one every day (today I noticed rad.co). However, most people outside of the tech/design industries are still not familiar with dot co domains. Hell, even Google doesn’t seem to like ‘em (see below)!

Google Doesn't Like Dot Co

The .co is the country domain assigned to Columbia. It wasn’t until 2010 that dot cos became available for registry around the globe. Since then, the Go.co marketing campaign has sought to boost its popularity.

Despite the increasing use of .co, the majority of web users (aka not web nerds like me who pay attention to this stuff) will still type dot com into their web browser by default. That means that not only will they fail to find your site, but they might instead land on your competitor over at the dot com address, thereby adding insult to injury. According to this Redditor, you can lose up to 25% of your traffic to your dot com competitor. Not cool!

There is a threshold of awareness for any new domain suffix. I don’t think .co has crossed the threshold yet, but it’s close. The more it gets used, the more familiar audiences will become with it. So if you choose to use one, you’re also choosing to help further its campaign for recognition.

What is Responsive Web Design?

For those of us in the design community, responsive design is a household term – but that’s not the case for many web users. Even though responsive design has been around since 2010, it’s still a new concept for many website owners. Here’s a primer to get you up to speed.

Ever notice how some websites work well on mobile and tablet devices, while others look wonky and are nearly impossible to use? The reason why is simple: most of the ones that don’t work well are serving an old-school desktop experience to users of new-school devices, while the ones that work well have solved that problem with a little technique called responsive design.

Simply put, responsive design is the modern way to create websites that look good and function well on any device and platform. Websites used to come in one ‘size': a big ‘ol static desktop experience. In the responsive era, websites must be fluid and flexible. Their content and layout will often condense for a small, narrow screen while spreading out on a large screen to take advantage of the increased visual real estate. Each case is different and techniques vary. The idea is to provide an awesome user experience for all users in a world of increasingly varied connected devices. See the infographic:

Infographic: What is Responsive Web Design?

When done well, responsive web design can be future-friendly: if it’s totally flexible, the site will be able to ‘respond’ to some devices that haven’t even made it to market yet. New Apple gizmo – tablet, phablet, whatever? No prob.

Responsive design can improve your business. Just think about it—you’re reaching out to the largest possible audience. My redesign of Coldfront magazine helped their traffic go through the roof. If you need more reasons to go responsive, check out my article Why You Need a Responsive Website.

Need to upgrade your website to a responsive platform? View our portfolio and contact us today!

‘Logo’ is Not a Dirty Word

We live in a brand identity era, where high-falutin’ ‘brand evangelists’ eschew the ‘L’ word in favor of phrases like ‘flexible identity’ and ‘brand story.’ Well, designer Aaron Draplin is here to bring it back old school. Draplin is inspired by an era of corporate design where the logo – a simple, memorable, static mark – ruled the day. I have a deep love of logo design and appreciated Draplin’s heartfelt enthusiasm to the craft, shown in the video below. Sometimes a flexible identity is the right solution to a client’s brand. But as trends in marketing strategy come and go, the traditional logo remains one of the most potent and powerful tools in design.

This Dramatic Shift Will Change the Web Forever

Game developer Sergey Orlovskiy testing the Oculus Rift headset. Photo by Sergey Galyonkin

Game developer Sergey Orlovskiy testing the Oculus Rift headset. Photo by Sergey Galyonkin

Back in the nineties, the World Wide Web was a glorified bulletin board made of HTML. The online environment consisted mostly of static text and images. Then, in the early aughts, the so-called Web 2.0 era came along and the online experience became dynamic and interactive. According to Tim O’Reilly and John Battelle (who coined the term), “Web 2.0 is all about harnessing collective intelligence.” Examples of collective intelligence on the Web include Wikipedia (knowledge database written collaboratively by unpaid volunteers), Twitter (megaphone for revolutions and complaints), and, of course, Facebook (interactive repository of baby and pet photos). The 2.0 version of the Web is a stream of our collective unconscious where any troll, Dick, or Harry can contribute to conversation topics that are trending across the globe. So when will the Web shift to a new ‘3.0’ paradigm, and what might that look like?

Our collective online experience will change in response to a radical transformation in the vessels we use to navigate it. In other words, the next revolution in the online experience will stem from a shift in dominant computing platforms. During Facebook’s quarterly earnings statement in October, CEO Mark Zuckerberg said, “Every 10-15 years a new major computing platform arrives, and we think virtual and augmented reality are important parts of this upcoming next platform.” Zuckerberg was referring to his Oculus virtual reality technology.

If companies like Facebook and Google are successful, the next dominant computing platform will [Read more…]