Pages

Showing posts with label Techniques. Show all posts
Showing posts with label Techniques. Show all posts

How to Hand Out Flyers Online (Old School and New School Techniques)

How to Hand Out Flyers OnlineI love evergreen content. My blogs and businesses thrive on it.

They rely on it.

They survive because of it.

It’s the kind of content that you can publish today that will be relevant and useful to those who will find it tomorrow, next month or next year.

It’s the kind of content that will continually build your brand and work for you to generate more traffic, more subscribers, more customers and more earnings - passively over time.

Evergreen content and pillar posts are the Internet’s version of “planting seeds”, which is what motivates me to invest upwards of 15 to 20 hours of my time to craft a single tutorial or resource. In the right conditions, that seed can grow into something extremely fruitful.

Today, I have many trees as a result of the seeds that I have planted in the past, some several years ago.

Evergreen content, in my opinion, should make up the bulk of a website’s content. The search engine rankings, the share-ability and the simple fact that someone in the future might find that content useful will increase the credibility and authority of your brand like nothing else.

But…

Evergreen content is not everything, and often times a real-time, time-sensitive piece (or pieces) of content can be more lucrative than an entire website’s history of pillar, evergreen content put together.

Whether it’s a launch for a product, a contest of some kind or maybe a deadline that’s coming up – what the content is about doesn’t matter as much as how that content is actively promoted. You want as many eyes on that promotion as possible, and now.

Instead of planting seeds and waiting for them to grow, it’s like handing out flyers and trying to get as many people to come to the party as possible. 

The party could be awesome, but if nobody knows about it it’s not going to be much of a party at all.

The trick is to hand out these “flyers” in location where people exist, to people who care and to people who will take action.

Let’s get into it…

I like to think of time-sensitive, promotional material as announcements, such as ones you would actually see on a flyer.

Announcements are there to be heard by many, they are there to provide information and they are there, typically, to get people to do something soon before time expires or a specific event happens.

Successful announcements are heard not just in one place, but in several. To some, a specific announcement may not seem too important until it just seems to show up in several different places at the same time.

Online, there are many ways to announce things – to “hand out flyers”. Some methods are obvious, but there are some lesser-known ways to announce stuff and take advantage of things you may already have handy ,but are not using to your full advantage.

Let’s cover these methods, starting with the most obvious stuff first…

Duh. Right?

If you have something to share, a blog post or an article on your website is the most obvious way to share it. Subscribers will get notified and those who come across your homepage will see the announcement too.

Unfortunately, many people will forget about those who come to the site for the first time and land on an internal page – not the homepage.

On SmartPassiveIncome.com, more people first visit the site on an internal page (53%) compared to the homepage (47%).

On GreenExamAcademy.com, with about a million unique visitors to the site, it’s 55% internal and 45% homepage.

And on SecurityGuardTrainingHQ.com, it’s a whopping 65% internal and 35% homepage.

Don’t just rely on your homepage for promotion!

Ideally, you want every page people land on to take notice of your timely announcement.

The sidebar of your site, if you have one, is ideal because it’s easy to setup (at least on WordPress websites) and it’s generally shown on every single post people will read. A simple widget with a banner or a button to learn more about the promotion can take just minutes to setup. However, many readers don’t pay attention to the sidebar or have learned to just block out that “distraction” while reading the content they actually came to read.

This is why utilizing the main content area of your site for time-sensitive promotion is important too. An action area above and/or below your blog posts can do the trick. A lot of bloggers use this area within a post to promote on-going, non-time sensitive products (see the end of any Problogger or Copyblogger article), but you can and should use this area if you have a special announcement to make too.

Your email list can be one of your business’s most important assets because of your ability to send messages directly to each subsciber’s personal inbox.

I’ve talked a lot about email lists here on the blog before (see SPI Podcast Sessions #44 & #45), and although I take a slightly different approach and use my email list moreso as a relationship builder than a hardcore promotional outlet, I still agree that “the money is in the list” and there’s no more apparent time this is true than during a launch.

I’ve heard of people sending broadcasts to their lists and earning upwards of six-figures in a single day, which is crazy but definitely possible given the right sized list, a champion open-rate and the right copy and offer.

Outside of your website, the most obvious place to announce stuff is on your existing social media platforms. I won’t get into too much detail here, but here are a few important things to consider whenever you promote anything on platforms like Facebook, Twitter and Google Plus:

Consciously craft your copy for maximum click-throughs. It’s easy to say something like “hey check this out” and then include a link to your website because that’s what we would say to our friends (and hopefully you’re treating your fans and followers like your friends), but if you want a higher click-through rate you’re going to have to do a little something extra. Derek Halpern’s analysis of the power of curiosity is spot on, and although it’s primarily about writing blog posts, the content about the Information Gap Theory can easily be applied to social media. Arouse curiosity and people will be more likely to click through.Nobody likes to be sold to, especially on social media. Try indirect, social marketing techniques instead. Ask questions or reveal something interesting about your offer. For example, if you’re announcing a new book that you just wrote, ask your followers what they think about the new cover design or talk about how much time it took you to write the book or who influenced and helped you along the way, and link accordingly. Your followers will end up in the same place but will be less likely to think they are just being sold to.Follow up with people and thank them!

Whether you have an audience already or not, you can never go wrong with paid advertising for increasing awareness to anything. Of course, this comes with a price and it’s not as easy as clicking a button and sending targeted traffic your way – there’s finesse and choreography that goes into a successful paid media campaign, but this is one way to easily go beyond the foundation you’ve spent time building already.

I’ve done minimal paid advertising, primarily on Facebook, but I still have a lot to learn. Check out my buddy Rick Mulready for some great information on paid advertising techniques.

There is nothing more powerful than someone else spreading the word for you to their tribe of followers who already trust them. This is why it’s incredibly important to build relationships with other people in your industry right from the start.

Not only do these relationships allow individual bloggers and business owners to grow together much faster than they could ever do by themselves (see Glen Allsop’s article about fast blog growth here), but when it’s time to announce something, each of those relationships (affiliate or not) could exponentially increase the number of people who catch wind of your announcement.

What’s my advice to those looking to broadcast their announcement beyond their own audience and onto the audience of others?

Provide something unique and of value related to your announcement or promotion to each individual tribe leader and their followers. It’s not really about you, it’s about what you can potentially do for them instead.

All of the above items are pretty standard when it comes to announcing something time-sensitive, but below you’ll find some lesser known and brand new ways one could potentially use to promote something.

The issue with publishing stuff now that could potentially work for you later is that if you ever wanted to add something down the road to help promote something current, it’s going to be a major hassle.

Maybe not so much the written content that you publish on your own site because you can always go back and edit a post later if you needed to, or simply edit a PHP file or install a plugin that will add something to each and every post you have already published on your site. But – when it comes to things like audio, video and publications made outside of your own blog (e.g. guest posts), it’s nearly impossible to easily utilize those materials for current events happening in your business, unless you utilized a current event redirect link.

Imagine a single link that at any time you could change the destination to. The link will always remain the same, but you can control where the user ends up.

It doesn’t matter if people are reading a post that you published on someone else’s site a year ago, a current event redirect link included in the author box could be used to drive traffic from that older post to your most current promotion.

The idea for this came when I mentioned The 8th Annual Podcast Awards in SPI Podcast Session #48. I asked my listeners to nominate the SPI Podcast for an award if they felt it was well-deserved (and a HUGE thank you to those who nominated the show!) by going through a special link that took them to the nomination page.

Nominations, of course, are not an on-going thing. After nominations are over (and they just ended two days ago) there’s a voting period, then awards and then nothing until next year. So the trick is to have my listeners go through the same link that I mentioned on the show, but serve them a page that will still be relevant to them no matter when they listen to the show.

How?

On the show I mention that you can nominate me by going through an easy to remember link (which I created using one of my favorite wordpress plugins, Pretty Link) and that if the nomination period is over you can either vote for me or see the results and a little thank you video from me on a page on my own blog by going through that link. Again, no matter when people listen to that episode, they’ll go through a link that will always be up to date because I’ll change where that link points to when I need to. During next year’s awards, I’ll point it back to the nomination page.

There are unlimited uses for this type of “re-URL-ing” strategy, but here’s one that comes to mind:

When writing a guest post, somewhere in the post link back to your website using a special link you create with Pretty Link. If you’re not running a promotion at that time you can just have it redirect to your homepage (or better yet, a landing page specifically for that website’s readers), but when it’s time for a promotion you can go back into Pretty Link and edit where that link points to, re-URL-ing the link to a landing page that is specifically about  your time-sensitive promotion.

The nice thing is that Pretty Link will keep track of how many people click on that link. You could create one universal link for all of your current event redirect links, but for guest posts I’d actually create a separate promotional/current event link for each property that you post on so you can keep track.

How do you keep track of all the links you use for promotion and current events?  Luckily, Pretty Link has an option to create groups of links. Group all of your promotional links together and you have one easy spot to go to and change the destination URL for each when the time is right.

Have a new product coming out? Change the URLs for each of those links and you’ll have traffic going exactly where it needs to go.

YouTube just recently (and quietly) rolled out a new feature which YouTube expert Gideon Shalwick calls a game-changer, and I completely agree. Gideon was kind enough to share this feature with me the other day – thanks Gideon!

The feature is called InVideo Programming and it allows you to select any one of your public videos and feature it by placing a thumbnail for that video in each and every other video that you have in your channel.

So for example, I currently have 62 videos on the Smart Passive Income YouTube Channel that are each viewed every single day – some more than others, of course.

If I was launching a new product, all I would have to do is create a short promo video for that launch, publish it on YouTube and select it as my feature “InVideo” and it would appear in each of my existing 62 videos (like in the example below), plus any new videos that I publish until I change the video or turn the feature off.

Sign into YouTube, go to your Video Manager and then Settings. The InVideo Programming feature will be under Channel settings on the left hand side. There are various options for the thumbnail location in your videos (one of the corners) and also when it appears. 

YouTube InVideo Programming

That’s search engine traffic (on YouTube and Google), embedded views (on my own site and other sites that have embedded my videos) and related video views that are all going to get pushed that promotional video. Unfortunately, mobile phones and tablets don’t show the thumbnails yet.

I’m not sure if everyone has this feature enabled on their YouTube accounts already, but my non-partner, personal YouTube account, separate from my SmartPassiveIncome account, does have the InVideo Programming feature enabled, so it’s not just for official partners. If you don’t have it yet, it should be rolled out to you shortly.

There’s also an option to add a branded logo to one of the corners of all of your videos in the InVideo Programming settings too, which is pretty neat, but the feature video option is just amazing. I can’t wait to use it and test it out myself – it’s so new that I haven’t even had the chance to try it yet for a specific promotion.

We’ve talked about using email broadcasts to share announcements earlier in this post – but that’s almost a given. But, did you know you can announce real-time information in your pre-written autoresponder emails?

You can!

Why would you want to do this?

Well, at least for me, I have about 35 emails in my autoresponder series that get sent to subscribers sequentially every week (sometimes every two weeks) after they subscribe. These emails go out every single day to different subscribers on my list because different people sign up randomly throughout the week, but they are all scheduled to receive my pre-written emails. This is automated, expected, permission-based contact with your subscribers that you can totally use to your promotional advantage during a launch, or to announce anything really.

With a little planning and some careful ninja-like moves you can take advantage of these emails that are already going out to your audience.

How?

There are a couple of ways to do this, and again this strategy is so new (to me, at least), that I’m still in the middle of properly setting it up so when I do have a promotion to announce these automated emails will serve double purpose and more eyes will see my promotion. I may go into more detail about this specific strategy in a later post. Let me know if it’s something that interests you in the comments.

Method 1: Use an Email Template

Using a template for your autoresponder emails can save you time by including text in new emails that you create that you would normally include anyway.

That’s smart. I mean, why write the same thing down every time you write an email when you can use a template and just do it once?

For me, I always include additional information about my email list at the bottom of each email so that subscribers remember where the email was coming from and why they subscribed.

But the added benefit with a template is that you can change things in one spot, and it gets updated everywhere else, automatically.

If I ran my emails through a template (which I’m currently shifting to. I’m just using a blank template in Aweber because I don’t include any fancy graphics or backgrounds in my emails), when I run a promotion I could simply update the template to include some text about that promotion at the top and/or bottom of the email. Then, every email that gets sent out to people via my autoresponder would include that text, whether they just subscribed today or whether they’re on the 35th email in the sequence. Once the promotion is over, or a new one comes about, I can just change it in the template and all future emails would correspond.

Of course, this method doesn’t update emails that have already been sent out, only emails that will be sent after the template will change, but taking the time to prepare your emails this way and investing just 5 minutes of time during a promotion can potentially make a huge difference.

Method 2: Image Filename Overwrite

Similar to the current event redirect link strategy above, you can include some html code in each of your autoresponder emails to load a specific image, and during times of promotion you can simply update that image by overwriting the previous image with a new one with the same filename.

Maybe it’s a header at the top of your email, or maybe it’s an adsense-like banner on the side or at bottom of your emails. It’s up to you.

You could also combine this strategy with Method 1 so that you can just include this image file in a template so you don’t have to worry about it each time you create a new email. The added benefit, however, is that emails that were previously sent out that request this image file will get the current image at the time of request, I believe.

And of course, you should always have this image be clickable, so using a Pretty Link redirect link as the URL that you can edit later will guarantee that you will always be in control of where people end up after clicking on that image.

Although I’m really heavy on evergreen content (such as this post, hehe), I am looking towards the future and thinking about real-time promotional strategies as my book nears completion and other products enter the horizon.

What else am I missing? Have you tried any of these new strategies and if so, how did they work out for you?

I know there are many of you out there who have done launches and real-time promotions before, so please feel free to add your thoughts, opinions and expertise to this post if you wish.

Cheers, and all the best to you!

Tagged as: launch, promotion

Read more >>

Designing For Android: Tips And Techniques

Android is an attractive platform for developers, but not all designers share our enthusiasm. Making an app look and feel great across hundreds of devices with different combinations of screen size, pixel density and aspect ratio is no mean feat. Android’s diversity provides plenty of challenges, but creating apps that run on an entire ecosystem of devices is rewarding too.

Android devices in various sizes.
There are hundreds of Android devices with different screen sizes and resolutions. (Image credit: Android Design. Used under Creative Commons license.)

At Novoda, we build Android software for brands, start-ups and device manufacturers. We often work with visual designers who are new to Android. The new Android Design site is the first resource we recommend. You should definitely check it out. However, there is plenty more to pick up! The goal is to create apps that people love to use. Thoughtful UX and aesthetically pleasing visual designs help us get there.

This article provides a set of practical tips and design considerations for creating Android apps. I’ve tried to include something useful whether you’re crafting pixel-perfect graphic assets, finding an optimal user flow or getting your hands dirty developing XML layouts.

Visual design is hugely important in the perceived quality of an app. It might even improve usability. Most developers have some exposure to UI patterns, but developers with visual design skills are rare. They really need you. Delivering high-fidelity mock-ups, drawable resources (i.e. graphic assets) and guidance to developers is the best way to deliver an aesthetically pleasing experience to the end user.

Android is a platform of many screen densities. There is no set of resolutions to target, rather a density independent measurement scheme for graphics, widgets and layouts. This is covered in depth in a previous Smashing article and the official documentation, so I’ll just add a mention of this neat web tool for calculating density pixels.

Screen densities.
Optimize graphics for different screen densities. (Image credit: Android Design. Used under Creative Commons license.)

It’s not always practical to hand optimize graphic assets for each density. The platform can scale resources down reasonably well. However, it’s always worth testing designs on low-end devices and optimizing resources that scale badly.

Touch states provide important confirmation of clicks and selections. When customizing widgets such as buttons, it’s important to create drawables for all necessary states (such as default, focused, pressed and disabled). The focused state is essential user feedback on devices that support directional pad or trackball navigation.

Size is important too. Touch input is imprecise and fingers occlude the UI as they interact with the screen. Touch targets should normally be at least 45 density pixels in width and height.

Android has two fonts: Droid Sans and Roboto. Roboto was released in Ice Cream Sandwich (Android 4). It’s been compared to Helvetica, but it’s a little condensed, which is great for small screens. You’re not limited to Roboto or Droid Sans, though. Any font can be packaged within an app in TTF format (with some memory overhead).

Roboto font.
Roboto is Android’s new font, introduced in Ice Cream Sandwich. (Image credit: Android Design. Used under Creative Commons license.)

9-patch drawables allow PNGs to stretch and scale nicely in pre-defined ways. Markings along the top and left edges define the stretchable areas. The padded content area can optionally be defined with markings along the bottom and right edges. 9-patches are essential for creating and customizing UI widgets.

Draw 9-patch.
Create scalable widgets with Draw 9-patch.

It’s possible to create 9-patches manually, but the Android SDK comes with an nice, simple tool called Draw 9-patch. This makes it quick and easy to convert a regular PNG in to a 9-patch. It highlights the stretchable area and displays previews of the resulting drawable with different widths and heights.

Honeycomb (Android 3) and Ice Cream Sandwich (Android 4) modernized Android’s visual design with the Holo theme. However, some device manufacturers have a poor reputation for keeping platform versions up-to-date. Some of today’s most popular devices will never be upgraded to Ice Cream Sandwich.

Meetup screenshot.
The Meetup app makes everybody feel at home with separate Gingerbread (Android 2.3) and Ice Cream Sandwich widgets.

So what can be done? There are two options. Deliver the current look, feel and experience to all devices or use a separate set of widgets styles and drawables for Gingerbread and below. Both approaches are valid. Would your users prefer modern or comfortably familiar?

Sometimes clients fear that sticking to recognized UI design patterns will make their apps less distinctive. I think the opposite is true. As patterns like the action bar become ubiquitous, they fade into the background. Users can spend less time wondering how to use an app and more time appreciating how elegantly your app solved their problem. That experience is much more valuable for the brand than a one-of-a-kind UI for the sake of differentiation.

Color navigation screenshot.
The original Color app had an online FAQ for the UI controls. Make sure that navigation is intuitive.

Branding can be expressed through design of icons, drawables and widgets, as well as in the choice of colours and fonts. Subtle customization of the standard platform widgets can achieve a nice balance of brand values and platform consistency.

High fidelity mock-ups are the best way to communicate visual design to developer responsible for implementation. The Android Design website provides templates in PSD and other formats. It’s important to try mock-ups out on real devices to confirm that they feel right, with UI components sensibly sized and placed. The Android Design Preview tool allows you to mirror mock-ups directly from your favourite design software to an attached Android device.

A practical approach for mock-ups is to work against the screen characteristics of the most popular devices. Ideally, create mock-ups for each alternative layout required by screen size or orientation.

Attention to detail is key. Become involved in the development process to ensure that your designs are realized. As a developer, I would always prefer to work with active designers than those who deliver mock-ups and resources before disappearing into thin air. Designs need to be iterated and refined as the app develops.

Animated transitions provide some visual polish that many Android apps lack. Developers might not include such things on their own initiative. Make them part of the design when they make sense. Aside from transitions, animations are a great way to keep users distracted or entertained when the app needs to make them wait.

Android has patterns and conventions like any other platform. These help users to form expectations about how an unfamiliar app will behave. Porting an iOS experience directly to the Android platform almost always results in a poor user experience.

Back buttons in Android and iOS.
Back is a platform affordance in Android. In contrast, labeled back buttons within the app layout are the norm for iOS.

The back button is the best illustration of the interaction differences between Android and iOS. All Android devices have a hardware back button or on-screen navigation bar (including back button). This is universally available as a feature of the platform. Finding a back button within an Android app layout feels weird as an Android user. It makes me pause to think about which one to use and whether the behaviour will differ.

At the very simplest level, Android apps consist of a stack of screens. You can navigate in to the stack with buttons, action bar icons and list items. The platform back button allows you to reverse out of the stack.

The action bar mirrors a web convention, where the app icon to the left of the action bar usually takes you to the top level of the app. However, there is also the up affordance, intended to take advantage of structural rather than temporal memory. This is represented by a backwards facing chevron to the left of the app icon. This signals that pressing the icon will navigate one level up in the information hierarchy.

Up affordance.
The up affordance allows the user to navigate up an information hierarchy instead of going to the top level of the app.

The purpose of the up affordance might be subtle at first. Android apps can have several entry points in addition to the launcher. The Intent system allows apps to deep link each other and home screen widgets or notifications might take you directly to specific content. The up affordance allows you to navigate up the information hierarchy regardless of where you came from.

Try user flows on potential users with wireframes or mock-ups and iterate. Prototypes on real devices are ideal because they allow you to test in realistic mobile environments. This might seem like a lot of effort, but remember, you only need to try things out with a few users.

UI patterns are your friend. It’s much better to think of these patterns as tools than constraints. Users would prefer not to have to learn to use your app, so patterns provide familiar hints about how to navigate and interact.

Action bar is the most widely adopted Android pattern. It tells you where you are and what you can do. It’s a native feature of the platform since Honeycomb and the excellent Action Bar Sherlock library makes it available on older platform versions too.


An example of the dashboard and action bar patterns.

The dashboard pattern is also quite widely used. These grids of icons are usually presented to the user when they launch an app. Dashboards provide top level navigation and describe the primary areas of the app.


I worked on the Songkick app, where we used a dashboard draw out the content of the app with full-bleed images.

The  workspaces pattern can be implemented with the ViewPager component. This allows users to swipe screens left and right between content. This can be used in conjunction with tabs to provide a more fluid browsing experience with tabbed data.

ViewPager swiping.
ViewPagers allow users to swipe left and right. Page indicators or tabs make this navigation discoverable.

The ribbon menu is an emerging navigation pattern. This allows us to launch the user directly into content and provide the top level navigation in a menu, which slides in from the left side of the screen when you press up.

Ribbon menu
The ribbon menu is an alternative to dashboard navigation.

Tablet optimized apps often take advantage of multi-pane layouts. A single tablet screen can display the content of several separate phone screens side by side. Optimising for tablets can involve creating several alternative layouts for different screen widths. Sections of UI can be designed once and laid out in different configurations for different screen sizes. Multi-pane layouts help to avoid overly wide list items and sparse layouts.

Multi-pane tablet layout
The Economist news app uses multi-pane tablet layouts so users can explore the hierarchy of content on a single screen.

These are familiar and proven UI patterns. They’re the best tools for starting to sketch out your app layouts and navigation. However, they shouldn’t discourage you from trying something new. Just ensure that the app behaves predictably.

Android is a platform of many screen sizes. The devices that I can lay my hands on in our office compose a spectrum of screen sizes from 1.8 to 10.1 inches (as long as we ignore the Google TV). With variable screen area, Android has something in common with responsive web design. There is no getting away from the fact that design and implementation of a responsive experience across the full range of devices takes a lot of work. Supporting every screen is the ideal, but there are also sensible strategies for coping with the diversity of the platform.

Knowing a little about your target users and popular devices can help focus efforts and avoid premature optimisation. A good default strategy is to target popular, middle sized phones (3.2? – 4.6?) and then optimize as necessary with alternate layouts and user flows for particularly small (<3?) devices and tablets.

It’s always best to be orientation agnostic. Some devices have physical keyboards that require the device to be held in landscape. The on-screen keyboard is also easier to use in landscape. Text entry on touch screens is awkward an error prone, so let’s at least give our users the benefit of the landscape keyboard.

People interact with mobile apps differently from websites or desktop software. Mobile apps rarely have the undivided attention of a user and most interactions use touch input, which is not as precise as we might like.

Mobile interactions can often be measured in seconds. We recently developed a location-based app that allows users to check-in at bars. We counted the clicks on user paths such as check-in, considering whether each step could be avoided or simplified. We specify everything that an app should do as user stories. The most frequent stories should be as quick and easy to accomplish as possible. It’s particularly important in this scenario, because the user might be under the influence of alcohol…

First launch experience is crucial. Apps are often installed in response to a real world problem. If the first run isn’t satisfying then the user might never return. If the app requires sign up, offer preview functionality so that users get a feel for the experience. They probably need to be convinced that it’s worth filling out that sign-up form. Also consider using analytics to measure points where users drop off in the launch and sign-up process.

Many apps launch with a tutorial. This is usually an admission that the app is too complicated, but if you’re sure that you need one, keep it brief and visual. You might also want to use analytics to confirm that a tutorial serving a purpose. Are users that complete the tutorial more active? How many users just skip the tutorial?

User experience considerations shouldn’t end in the app. It’s worth putting a bit of thought in to the Google Play Store listing to ensure that it’s immediately obvious what the app does and why the user would want it.

These Graphic Asset Guidelines will help you to create promotional material suitable for the various contexts and scales in which they appear. Some of these graphics are a pre-requisite for being featured too.

Android has a visual layout editor and it’s getting better all the time. However, I still find myself developing XML layouts by hand. This section gets down to implementation details, covering some best practices for crafting maintainable and performant layouts. Visual designers might want to skim this section, but some awareness of implementation details can’t hurt.

The most general purpose layouts are RelativeLayout and LinearLayout. RelativeLayout should be favoured for efficiency, whilst LinearLayout is useful for distributing space between views using weights. GridLayout was new in Honeycomb. This is useful for creating complex layouts on large screens without nesting. Nesting layouts too deep is bad for performance and code readability alike!

The Android framework provides automated resource switching based on folder structure. This means that you can have separate graphic assets and layouts for different screen sizes and densities by arranging them in the correct folders. It goes much further than that. For example, you could switch color resources for different platform versions or even animation durations for different screen sizes.

Resource folder structure.
The framework provides automatic resource switching.

Since Honeycomb, it’s also possible to switch resources on available screen width in density pixels. This is a move away from the bucketed small, normal, large and extra-large screen size switching. It facilitates responsive design and allows multiple layout switching points (perhaps switching to a tablet-optimized layout at 600dp with another alternative at 800dp). It’s typical to have multiple layout files with different configurations of the same components for different screen characteristics.

State list drawables make being state-friendly easy. These allow you to specify different drawables for different states of a UI component in an XML file. As mentioned earlier, representing states properly provides important user feedback.

It’s good practice to keep layout XML clean of explicit colours and dimensions. These can be defined separately and referenced in your layouts. Defining colours and dimensions separately promotes visual consistency and makes things easier to change later on. Extracting these values allows switching of dimensions on different screen sizes, orientations and platform versions. This is useful for tweaking padding for small screens or increasing text size for readability on large screens, which tend to be held further away from the face. Perhaps res/values/dimens.xml contains:

16sp

whilst res/values-sw600dp/dimens.xml contains:

20sp.

A good technique to keep layout XML maintainable is to separate the styling concern from the positioning concern. Every View in a layout needs to have at least a width and height attribute. This results in a lot of boilerplate, which you can eliminate by inheriting from a set of base parent styles.

Recurring sets of attributes can be moved into styles. Widget styles that occur almost universally throughout the app can be moved into the theme. If a particular type of button always has the same text color and padding, it’s much cleaner to specify the style than duplicate these attributes for each occurrence.

We save four lines of attributes when we add the button to a layout. The layout file can be concerned with just the positioning and unique attributes of widgets.

Read more >>

DIY Videoscribing and Other Awesome Techniques to Enhance Your Videos

I recently published a new video that includes some experimental video techniques that I’ve never used before.

After a post with that video embedded in it went live, within 24 hours I received over 100 emails from people asking how they could recreate the same effects.

Apparently, the effects made my videos look a lot more professional and it helped hold people’s attention, which is exactly what I was going for.

To help answer all the questions that were asked, I’ll go over each of the following for you today:

How to get a blurred background in your videos.How to add pop-up text to your videos.How to get an awesome intro / bumper for your videos.How to DIY videoscribe (the sped up recording of writing or drawings that sync with your audio).

I also have a fun little blooper video that I shot with my son for you at the end of this post too :)

Let’s get to it…

I’ve re-embedded the video for you below and timestamped the various techniques I was using, for your reference. You can see everything within the first 21 seconds:

(or you can watch this video on YouTube by clicking here)

0:05 – Pop-up Text0:14 – Video Bumper0:21 – Videoscribing

If the background is blurred (also known as “bokeh”) but you’re in focus, it adds a very professional feel to your videos.

Unfortunately, if you’re using a basic flip cam or handheld digital camera for your videos, you won’t be able to get this effect.

The secret is in the lens of the camera that you use, so you’re going to need a DSLR camera and an appropriate lens to get the aesthetic qualities of a blurred background in your videos.

A good DSLR camera isn’t cheap, and neither is the specific kind of lens you need to get this effect (the stock lenses usually won’t work as well), but if you’re going to be shooting professional videos for your business, it could be well worth the investment.

I’m using a Canon Rebel T3i DSLR camera ($499.00) and a Canon EF 50mm f1.4 ($379.00) lens in my most recent videos.

I won’t get into the technical details of how this kind of lens (with a larger apature) works, but the most important thing to do is make sure that when you equip this lens, that you are in focus. The lens will take care of the rest.

With the Canon, you can flip the lcd screen out and around so you can look at yourself when recording, which is really nice. Move the arrows on the back of the cam until the white focus box is where your face will be – then unless you have someone to push record for you, use a remote, like this one, and you’re set.

Pop-up text are words that appear on the screen at the same time you say those words and it’s a very powerful way to engage your audience and really emphasize those important points of your video.

Do it too much, and it lessens the impact – so use this technique wisely.

Here’s a video explaining two methods you can use to create pop-up text on your videos:

(click here to watch just the video intro on YouTube)

My biggest request was about how I added the cool little bumper, or SPI branded animation at the beginning of my video:

(click here to watch just the video intro on YouTube)

I wish I was talented enough to say that I created it on my own, but I’m definitely not!

This is all thanks to SplashEO (affiliate link), a relatively new company that was created by my good friend Gideon Shalwick who I believe is the master of online video. If you need professional looking bumpers and other cool things to enhance your videos, SplashEO is definitely my favorite resource.

I don’t know why it took 53 videos to finally consider using an intro like this, but I’m very happy with the response.

Videoscribing is eye-candy for video viewers.

My first experience with this was in 2010 when a viral video hit my Facebook feed – a lecture called The Surprising Truth About What Motivates Us.

The content was pretty interesting, but what was special was what was shown in the video as this lecture was being spoken.

I’ve embedded the video for you below, but I warn you – it’s hard to stop watching once you start:

(click here to watch just the video intro on YouTube)

The sped up writing and drawing is just really really cool, and definitely keeps my attention the entire time.

I’m not an artist like the professionals who make these videos for a living, but I improvised a DIY way to get the same effect using my electronic white board technique.

I break it down for you in the video below:

(click here to watch just the video intro on YouTube)

And finally, as promised, I created a quick blooper video of some funny moments that my son and I had together. Good times! :)

(click here to watch just the video intro on YouTube)

I hope you enjoy these video marketing tips (and the bloopers), and have an awesome day!

Cheers!

Read more >>

Powerful New CSS- and JavaScript Techniques

Since our last round-up of useful CSS techniques, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Use them right away or save them for future reference.

Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!

CSS Transitions and AnimationsUseful and Practical CSS TechniquesCSS Typography and Text TechniquesCSS Navigation Menus and Hover EffectsVisual Techniques With CSS

CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes crazy, sometimes practical—but often innovative techniques which you could use to make your websites just a tiny bit more engaging.

Interactive CSS3 lighting effects
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

Interactive CSS3 Lighting Effects

CSS3 dodecahedron
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.

CSS3 Dodecahedron

CSS 3D Lighting Engine Photon
Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.

CSS 3D Lighting Engine Photon

3D Thumbnail Hover Effects With CSS
This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.

3D Thumbnail Hover Effects With CSS

Slide In Image Boxes
A technique for creating a “slide in” effect for boxes on hover to make them a bit more interactive.

Slide In Image Boxes

CSS3 bitmap graphics
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.

Pure CSS3 Bitmap Graphics

Paperfold CSS
A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.

Paperfold CSS

Beercamp: An Experiment With CSS 3D
A CSS 3D popup book ? la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.

Beercamp: An Experiment With CSS 3D

Covers: A JS / CSS Experiment
Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?

Covers: A JS / CSS Experiment

Animation on Apple’s page
John B. Hall explains the CSS animation on Apple’s Web page for the iPhone 4S.

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall

Experimental animations for image transitions
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.

Experimental CSS3 Animations for Image Transitions

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.

Maintaining CSS Style States using “Infinite” Transition Delays

CSS 3-D clouds
An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.

CSS3D Clouds

Animated popover of profile box
A technique for an animated profile popover menu, built using CSS transitions.

Animated Profile Popover With CSS

CSS3 scrolling effects
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.

CSS3 Scroll Effects

Spin those icons with CSS3
A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms
This article explains how to create the z-scroll effect step by step.

CSS3 Family Tree
Display organizational data or a family tree using just CSS, without Flash or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It also has hover effects: hover over a parent element and the entire lineage will be stylized. Make sure to check Nicolas Gallagher’s Introduction to CSS Pseudo Element Hacks.

CSS3 Family Tree

iOS-style popover
A simple technique for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit buggy but a good starting point in case you need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes and her article on rule filtering based on specific selector(s) support.

iOS-style Popover

Timeline-Style Comments
Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.

Timeline-Style Comments

CSS Table Grid
Here is a nice technique for aligning columns in a table, building a “table grid system” of sorts. The idea is to apply classes to col elements in a table’s colgroup; you always leave one col without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

CSS Table Grid

Confirmation Feedback Buttons
This article explains how to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that the user indeed wants to take the specific action. It looks too much like an iTunes button, though.

A calendar in CSS3 and jQuery
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, check out David Bushell’s responsive calendar demo.

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for debug CSS
Let’s assume you are experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a lot of time.

Outdenting properties for debug CSS

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup that you will be styling as a comment at the top of your CSS file.

Show Markup in CSS Comments

Selectively displaying data
This technique shows how to selectively display content in a table and add responsive breakpoints to create an responsive, complex multi-column table.

Remove Margins for First/Last Elements
If you ever wanted to remove the top or left margin from the first element in a container, or the right or bottom margin from the last element in a container, you can do this by using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet
A very useful snippet to have nearby when you are debugging your CSS or want to find mistakes in HTML.

CSS Diagnostics Stylesheet

Radio Buttons With Two-Way Exclusivity
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons in that column are turned off, and then is turned back on when clicked on.

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Nothing new, but it’s a quite clean solution.

Tabbed Navigation With CSS

Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.

Menu with Notification Badges With CSS

Styling based on sibling count (slides)
A fantastic overview of the possibilities for styling based on sibling count. Also, make sure to click through the rest of the slide deck — valuable and useful techniques. Make sure to watch Lea Verou’s presentation as well.

Styling based on sibling count (Slides)

Stuff you can do with the “Checkbox Hack”
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other element that you are trying to control. Learn what you can do with it.

CSS3 Facebook Buttons
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colors and icons. You might want to check Nicolas’ CSS3 Social Sign-In buttons as well as Free Social CSS3 Buttons that we released earlier as well.

YouTube Popup Buttons
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on :hover and :focus states, eager to be clicked.

YouTube Popup Buttons

Centering in the Unknown
When it comes to centering things in Web design, the more information you have about the element being centered and its parent element, the easier it is. Chris Coyier shows how to do it when you do not know anything.

Centering in the Unknown

Uncle Dave’s Ol’ Padded Box
What if you combined background-size: cover and Thierry Koblentz’ intrinsic ratios. The result is images and video than maintain their aspect ratio; but you can also use background-size: cover to change the aspect ratio and auto-cropping of images with just a little CSS. And the great news is that the property is supported in all modern browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children
Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Micro Clearfix: Force Element To Self-Clear its Children

Conditional CSS
A clever technique by Jeremy Keith to load additional content conditionally. The idea is that once a media query fires, the content on the body element is generated and can be detected by a JavaScript, prompting extra content to be loaded.

* { box-sizing: border-box } FTW
Once you start mixing and matching various units in CSS — such as % for the container width, em for padding and px for border — then you run right into the box-model problem because the width of the container doesn’t include padding and border. We can easily solve this using box-sizing: border-box. And the best part: it is even supported in IE 8.

Multiple Attribute Values
How to treat multiple values in attributes rather than classes.

Multiple Attribute Values

Diagonal CSS Sprites
If you build a sprite on a diagonal, there will be no components below or to the right of the component you are showing. This allows you to make the element using the sprite as wide or as tall as it needs to be, without worrying about exposing the next component. Also, check out David Storey’s article on CSS sprites for the moder era.

Double Click in CSS
Is there a way to detect whether a link is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check Pure CSS Clickable Events Without :target by Ryan Collins.

Replacing the -9999px hack (new image replacement)
In the beginning was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.

Replacing the -9999px hack (new image replacement)

Fighting the Space Between Inline Block Elements
A series of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.

CSS pointer-events and a pure CSS3 animating tooltip
The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. See what you can do with it and what to consider when using them.

Anatomy of a mobile-first responsive Web design
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features would you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article provide an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement Workflow
A fantastic article by Scott Jehl and Filament Group in which they present a set of tools that form the core of an advanced responsive design workflow. Definitely useful to keep in mind for your next responsive design project.

Advanced CSS techniques provide us with remarkable options to style text in very different ways. Not only can we make the typography look sharper and beautiful on the Web with tools such as Lettering.js, Kerning.js and FitText; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

Interactive Typography effects with HTML5
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you’d like to present and how you’d like them to change on hover. Fancy!

Interactive Typography Effects with HTML5

Rocking letters with CSS3 and jQuery
A simple animation of letters with CSS3 and jQuery.

With Rocking Letters into the New Year

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, creating a nice, subtle yet engaging visual effect. You can find more interesting type experiments in CSS3type Showcase.

cssandtype.com, gallery of css text effects

cssandtype.com, gallery of css text effects

CSS3 animation and masking text
Chandler Van De Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 in Transition” post. Noticing that he used a PNG image file with knockout transparency, he wanted to do the same CSS animation with selectable text. Trent was happy to oblige! At the moment, this works only in Safari and Chrome.

CSS3 Animations and Masking Text

CSS mask-image and text
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked texture effect over white text. Hover over the box to see how it degrades in unsupported browsers. Make sure to check out Lea Verou’s “Text Masking: The Standards Way” as well.

CSS Mask-Image & Text

Fake bolding of Web fonts
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not have a bold weight. If you used font-weight: bold with it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts in your designs. By Divya Manian.

Fake Bolding of Web Fonts

Tomorrow’s Web type today: Say it With a Swash
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already use them today if you include a swash subset of a font to achieve the desired effect.

OpenType Swashes

Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Internationalization Language CSS

Experiments with background-clip: text
With the CSS property background-clip: text, we can add a background image to a text element.

Experiments with background-clip: text

A Call for ::nth-everything
With CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM in relation to its siblings.

A Call for ::nth-everything

Smooth font using the text-shadow property
A common problem: is there a way smooth the appearance of glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.


Smooth font using CSS3 text-shadow property

Fluid Type
Trent Walton explains his approach to fluid typography in which he asks himself how we can make sure that browser width and typographic settings such as measure or font-size and how should we handle panoramic viewports? An interesting article, especially if you use a typography-out approach in your designs.

Fluid Type

Pragmatic, practical font sizing in CSS
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently in the process.

Automatic line breaks with CSS3 hyphens and word-wrap
Roger Johansson shows how to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s width increases. When that happens, the text normally extends beyond the column. Luckily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, there are different ways to fill space. Adjusting any one element without also adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such a difficult time with fluid Web layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

Molten leading (or, fluid line-height)

Prevent Long URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs within the container. word-wrap, word-break and hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.

Viewport-sized typography
This technique uses new CSS values for sizing elements relative to the viewport’s current size: vw, vh and vmin. This allows you to couple the size of, say, a typographic heading to the available screen space. Browser support is quite poor for now, so if you are looking for an alternative, check out FitText.js.

Viewport Sized Typography

Minimum paragraph widths in fluid layouts
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is less than this width, then the whole paragraph moves below the image.

Styling ordered list numbers
Roger Johansson shows how we can style ordered list numbers with the :before pseudo element, which can take a counter as a value through the content property. Also check out Chris Coyier’s post and Louis Lazaris’ CSS Counters: counter-increment and friends.

Styling ordered list numbers

Reverse ordered lists in HTML5
The reverse attribute allows you to write a descending list of numbered items. Louis Lazaris summarizes what it does and offers a solution to get around a lack of browser support for this attribute.

Reverse Ordered Lists in HTML5

Preserving white space with CSS3 tab size
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using nothing but CSS.

New CSS3 properties to handle text and word wrapping
Louis Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg discusses the options for word wrapping and hyphenation in combination with dynamic width elements.

End Articles with Ivy Leaf
A clever technique for adding an extra touch to the end of your articles. :last-child, :after and content in use.

We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you’d like to add a bit more polish to your portfolio, gallery or e-commerce website, these techniques can be quite useful. What about “over-the top” hover effect for your links,

Circle Navigation Effect With CSS3
A bubble-like thumbnail preview for your navigation with CSS3.

Circle Navigation Effect with CSS3

Create a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery by adding a few hover effects to the gallery grid itself and a 3D rotation to the lightbox content, all with CSS.

Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery
This article shares an experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with an image in the center and two on the sides. Because perspective is being used, the two lateral images will appear three dimensional when rotated.

3D Gallery with CSS3 and jQuery

Creative CSS3 animation menus
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title that will be animated on hover using only CSS transitions and animations.

Creative CSS3 Animation Menus

How to spice up your menu with CSS3
Yes, another technique by Tympanus: this tip shows how to spice up a menu by adding a neat hover effect to it. The idea is to slide an image out to the right when the menu item is hovered over.

How to spice up your menu with CSS3

Create a zoomable user interface
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Create a zoomable user interface with CSS3

Flipboard Navigation
An experimental page layout inspired by Flipboard’s interface.

Flipboard Page Layout

Multi-direction hover
This element shows different hover effects when hovering from different directions.

Multi-direction hover

Experimental Hover Effects
Original and innovative hover effects discovered via Twitter on what appears to be a Japanese code sharing website.

Share JavaScript, HTML5 and CSS

Over-the-top hover effect
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the transform-origin transform-style properties as well as 3-D transforms.

Accordion With CSS3
Mary Lou experiments with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Accordion with CSS3

Expanding Text Areas Made Elegant
An expanding text area is a good choice when you don’t know how much text the user will write and you want to keep the layout compact. In this article, Neil Jenkins explains how to do this simply. Also, you might want to take a look at Textarea Auto Resize, another technique by Louis Lazaris, using a hidden clone element.

Filter Functionality With CSS3
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

Filter Functionality with CSS3

An accessible, keyboard-friendly custom select menu
A new approach for more accessibility by Roger Johansson. He styles only the select element.

We used to heavily on images and visual elements to create basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let’s take a look on a couple of examples of how we can achieve that.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Tom Kenny shows how to create a simple “stacked” look to a group of images.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a couple of visual “nice-to-have” elements.

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image
Dudley Storey shows a simple way to create a postage stamp from a simple image with border-image.

Turn Images Into Postage Stamps With CSS3 border-image

Slopy elements with CSS3
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways how to create slopy, skewed elements with only CSS.

Slopy Elements with CSS3

CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.

CSS Flip Clock

CSS3 Image Styles
When applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a quick tutorial on how to use jQuery to make perfect rounded corner images dynamically. And check out the second part.

CSS3 Image Styles – Part 2

Creating Reusable and Versatile Background Patterns
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.

Creating Reusable & Versatile Background Patterns

Diagonal Graph Paper Gradient
A very nice CSS technique for creating diagonal graph paper gradients using repeating-linear-gradient property in CSS.

Diagonal Graph Paper Gradient

Tucked Corner Effect
A clean CSS technique for producing tucked corners using the pseudo-elements :after and :before as well as data URI-coded images. Also, check out Corner Ribbon Effect with CSS.

CSS Tucked Corner Effect

Scrolling… shadows!
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect using background-attachment: local. Developed by Lea Verou, inspired by Roman Komarov.

Scrolling shadows

Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient in action! Also, check out CSS3 progress bars that display data inside localized leaderboards for the new analytics platform at G5. They are lightweight and require no JavaScript or images.

Multi-colored CSS Progress Bars

CSS3 breadcrumbs
Learn how to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses only CSS linear gradients.

CSS3 breadcrumbs

Adobe-like Arrow Headers
A detailed article about the technique Adobe uses to create header bars for modules on its website.

Adobe-like Arrow Headers

Adding a Top Shadow to a website
If you ever wanted to add a shadow along the top edge of the website, you can easily do it by styling body:before.

Adding a Top Shadow to a website

A flexible shadow with background-size
It’s amazing what you can achieve when you combine different techniques—even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?

Star Ratings With Very Little CSS
Chris Coyier shows how to code star ratings done with very little CSS code and lots of a bit of Unicode madness.

Convert Images to Black And White With CSS
Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — by using a combination of techniques.

Punching Holes With CSS
A clever and simple technique to make a block in a container appear transparent and display a background image. Also, take a look at Lea Verou’s accessible star rating widget with CSS.

Simple Styles for Horizontal Rules
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Simple Styles for Horizontal Rules

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you and how to make sure you have fallbacks in place for non-Webkit browsers.

Browser-Specific CSS Hacks
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.

CSS3 Lasers!
Shows a laser shot effect when hovering over an element.

CSS3 Lasers!

The DOM Tree
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a variety of languages. CSS3 3D transforms are used to position and rotate, via translate3d() and rotate3d() respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!

DOM Tree

We’d love to know your experience with some of the featured techniques, or perhaps you’ve stumbled upon another interesting CSS technique recently? Let us know in the comments to this post!


(jvg) (al) (vf) (ml)

The team here at Smashing Magazine. Mostly Vitaly (vf), Sven (sl) and Iris (il).

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

Read more >>
Next Post