Thursday, November 29, 2012

Responsive frameworks

Bootstrap

Bootstrap is a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls and even a web-based Customizer. Bootstrap utilizes LESS CSS and is compiled via Node. It is probably one of the best know and mature responsive frameworks around. Check the examples to see it in action.

Thursday, November 29, 2012

15 cool jQuery modal plugins

15 cool jQuery modal plugins

There are many situations where jQuery modal plugins can be useful for guiding the visitors focus to a specific piece of content. Basically a modal window is a kind of pop-up window that have been embedded into a web page and therefore appears without the need for a new browser window.

Sunday, November 25, 2012

Meet Bower: a package manager for the web

Bower: a package manager for the web

As the web platform has matured, the tools for managing our projects, too, have matured. In this tutorial, I'll introduce you to one of these tools that makes managing the dependencies of your project considerably easier: Bower.

Sunday, November 25, 2012

Tiny Circleslider: who said sliders are boring?

Tiny Circleslider

Image - or, more general, content sliders are as popular as can be. There are plenty of them on the market. Design and functionality resemble, the choice of a slider is more or less a matter of taste. Tiny Circleslider is different though. This tool lets you place content elements in a circle. This makes for a futuristic look and feel.

Sunday, November 25, 2012

BookBlock and Windy: 2 jQuery-plugins provide exceptional content navigation

BookBlock and Windy

Chances are, you are not looking for sliders, you have to watch your steps to avoid not trampling on them. There are more sliders on this planet than content for them to take care of. As this is the case, why do we introduce two more variants to our readership? It’s simple. BookBlock and Windy, the new jquery-plugins by Codrops, are extraordinary, totally fresh and new in their approach. They offer a variety of exciting effects to have you present your content in ways not seen before. I am impressed.

Sunday, November 25, 2012

Optimizing typography in responsive web design

Optimizing typography in responsive web design

Each time a discussion pops up about responsive design, the common terminology and concepts that get the maximum attention include grids and images, and obviously the settings like fluid or flexible. Typography, though essentially always deemed important, is rarely given the weightage it deserves when it comes to responsive web design.

Tuesday, November 20, 2012

Image rollover borders that do not change layout

Image rollover borders

It's a fact of CSS life that the border of any block level element gets factored into it's final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward.

Tuesday, November 20, 2012

Understanding Magento Layout Update XML

Magento
Note: The following article is constisted of pieces from more than one sources. You can view all of them at the end of the article.

In Magento, layouts are the XML files that define a given page within the store. The templates usually specify a module and a template to go with that block, allowing for standard modules (such as loading a products data) to be combined with custom templates to style the data.

In Magento a block is simply an imaginary container for something. A block can contain other blocks or it can contain the content itself.

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
     [...other stuff inside...]
</block>

Tuesday, November 20, 2012

Give floats the flick in CSS layouts

Give floats the flick in CSS layouts

If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity and you'll gain a sense of achievement when you finally understand how floats work.

Don't be fooled. You're being brainwashed.

Monday, November 19, 2012

CSS display: inline-block: Why it rocks and why it sucks


CSS display: inline-block

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.

Monday, November 19, 2012

Cross-Browser inline-block

Cross-Browser inline-block

Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this:

Cross-Browser inline-block

and begin to cry.

Monday, November 19, 2012

datalist Experiment

datalist Experiment

*Chrome feature

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

Monday, November 19, 2012

How to use the Webshims Polyfill

Webshims Polyfill

In this post I'll be talking about the HTML5 and CSS3 feature polyfill library called Webshims Lib and how to use it correctly.

Friday, November 16, 2012

Understanding the viewport meta tag

Understanding the viewport meta tag
When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?

I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.

Sunday, November 11, 2012

Separate mobile website Vs. responsive website

Separate mobile website Vs. responsive website
The US presidential race is heading into full swing, which means we'll soon see the candidates intensely debate the country's hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

Ιt just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney's dedicated mobile website and in the blue corner is incumbent Barack Obama's responsive website.

Saturday, November 10, 2012

Getting HTML5 ready - ContentEditable

Getting HTML5 ready - ContentEditable
In the prior editions of this series, we took a look at HTML5 parsing and CORS. This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on the page.

Saturday, November 10, 2012

HTML5 placeholder fallback using jQuery

HTML5 placeholder fallback using jQuery

If you are a bleeding edge developer chances are you are taking advantage of the new placeholder attribute that can be used with form elements. It can be used on text, textarea, search, url, tel, email and password fields. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. The following snippet can be ran to test for placeholder support, fallback older browsers and ensure default values are not submitted in those older browsers.

Saturday, November 10, 2012

Stick your landings! position: sticky lands in WebKit

position: sticky lands in WebKit
position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

Saturday, November 10, 2012

Sass 3.2 makes authoring CSS3 as easy as it will be

Sass 3.2 makes authoring CSS3 as easy as it will be
In sass 3.2 there's a new kind of selector called a placeholder selector for use with @extend. Mixins and functions can now take any number of arguments and be defined in nested contexts. You can now pass a block of styles to a mixin for placement by the @content directive. Numbers will have now 5 digits of precision instead of 3. But that's not all. Read on for the details.

Friday, November 09, 2012

CSS :target for off-screen designs

CSS :target for off-screen designs
I recently saw a presentation by Ryan Seddon on things you can do with checkboxes. It got me thinking about a similar pseudo selector based on the URL, :target and how it could be used for hiding and revealing elements for extra space (namely on smaller screens). I set myself the task of recreating the iOS Message app without using JavaScript by taking full advantage of awesome CSS3 selectors and transitions.

Friday, November 09, 2012

Vertical showcase slider with jQuery and CSS transitions

Vertical showcase slider with jQuery and CSS transitions

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS transitions and media queries to make the layout adaptive.

Friday, November 09, 2012

Opt-Out responsive design?

Opt-Out responsive design?

Reader Glynn writes in:

I'm wondering if you'd ever seen a responsive web design in which a "see full site" link was included. I know that when developing a responsive design we should stay away from hiding content completely, however some users may actually prefer pinching and zooming and using good old fashioned horizontal menus on their devices.

Have you seen an example of this and how do you think it could be approached?

Friday, November 09, 2012

4 keyword optimization guidelines for usability and SEO

4 keyword optimization guidelines for usability and SEO

Since most users visit websites after using search engines, optimizing your website for those engines is valuable in obtaining more traffic. The basic factor which determines how websites rank on a search engine's Search Engine Results Page (SERP) is that when users search for certain keywords, relevant sites are listed. The more relevant the content is to those keywords, the higher the chances of your site ranking.

Friday, November 09, 2012

Heading set styling with CSS

Heading set styling with CSS

In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right combinations of colors, fonts and decoration.

Friday, November 09, 2012

Better password masking for sign-up forms

password masking

Editor's Note: This article expresses the author's personal opinion and covers experimental UX techniques which aren't considered to be best practice.

Masking passwords is an old practice that's commonly implemented in sign-up and log-in forms. It's used to prevent over-the-shoulder snoopers from catching the user's password. While masking passwords is a good security practice, there's a chance it could jeopardize the user experience of your sign-up form. When users sign up on a website, they expect a no-hassle, worry-free form to fill out. But masking the password could prevent that.

Friday, November 09, 2012

I Cannot Design or Code a Responsive Website

I Cannot Design or Code a Responsive Website

Don't listen to the voices in your head, advises frontend developer Nick Jones. Here he explains how he got stuck creating his personal site and learned to trust his instincts instead.

Friday, November 09, 2012

Dropdown default styling

Dropdown default styling

There has always been big differences across how different browsers handle form styling. There probably always will be - because UI design choices aren't described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are one that is particularly weird.

Friday, November 09, 2012

Useful tools to check cross-browser compatibility issues

cross-browser compatibility issues

With today's modern web it's not uncommon for many visitors to be using a different browser. The options seem almost unlimited with Mozilla Firefox, Google Chrome, Opera, Safari and of course Internet Explorer. There are also many lesser-known browsers and 3rd party software for Mac and Linux Operating Systems.