How to Create a Fixed Navigation Bar

Aug 13 2014 by Jacob Gube | 7 Comments

A fixed navigation bar, also referred to as a "sticky" navigation bar, is a toolbar that stays in place while the user is scrolling the web page.

It’s a commonly-used site navigation design pattern for displaying a site’s main navigation menu, as well as other essential interface components such as a search box, social media buttons, and notifications. The design pattern guarantees that important interface components are easily viewable and accessible regardless of where the user currently is on a web page.

continue reading »

Responsive Full Background Image Using CSS

Jun 30 2014 by Jacob Gube | 12 Comments

In this tutorial, we’ll go over the simplest technique for making a background image fully stretch out to cover the entire browser viewport. We’ll use the CSS background-size property to make it happen; no JavaScript needed.

continue reading »

5 CSS Effects Libraries for Supercharging Your Designs

Apr 9 2014 by Jacob Gube | 1 Comment

CSS3 gives designers many new properties and modules (like the CSS Animations and CSS Transitions modules) that allow them to add fascinating interactivity onto their work.

If you want to take advantage of these modern CSS capabilities, one quick way to do that would be to use (or study) CSS effects libraries. Let me talk about a few open source collections of CSS that will help you craft great transitional interfaces.

continue reading »

How to Bulletproof @font-face Web Fonts

Oct 10 2011 by Ryan DeBeasi | 23 Comments

How to Bulletproof @font-face Web Fonts

You’re interviewing for your dream job, and you’re ready to kick some butt. A small group is gathered around a conference phone and some coding exercises, and they’re pulling up your portfolio on a projector so that everyone can review it.

It looks great, except for one thing: All of your beautiful web fonts are gone and have been replaced with… Arial.

No, this isn’t just a bad dream: It actually happened to me recently when I interviewed at a web design company (352 Media Group). It was painful. I ended up getting the job anyway, but the experience made me realize that even following best practices recommended by industry-leading developers such as Paul Irish’s Bulletproof @font-face syntax and in the current situation where there’s much wider browser support for @font-face, web fonts just aren’t foolproof.

continue reading »

Are You Using CSS3 Appropriately?

Oct 4 2011 by Delwin Campbell | 28 Comments

Are You Using CSS3 Appropriately?

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.

It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.

It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.

It promises less reliance on expensive graphics software like Photoshop.

But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.

continue reading »

A Guide to CSS Colors in Web Design

Jun 1 2011 by Alexander Dawson | 22 Comments

With the exceptions of typography and layout, nothing has a more profound impact on the way we design and craft websites than color — from the visuals we showcase through images and media to the simple choice of whether to use salmon pink or neon green to give a website that ’90s "Help, I’m going blind!" appeal. This simple guide will look into CSS colors. You’ll also find excellent color charts and tools to help you work with color values.

continue reading »

CSS Typography: Examples and Tools

Mar 22 2011 by Kayla Knight | 20 Comments

CSS Typography: Examples and Tools

In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web.

This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.

continue reading »

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify