Sunday, September 28, 2014

All You Need To Know About Vertical-Align

Vertical-Align

Often I need to vertically align elements side by side.

CSS offers some possibilities. Sometimes I solve it with float, sometimes with position: absolute, sometimes even dirty by manually adding margins or paddings.

Tuesday, July 29, 2014

Hot User Input Design Patterns for Mobile

Hot User Input Design Patterns for Mobile

A Deeper Look at Patterns Designed by the Hottest Apps Today

In this article, Chris Bank of UXPin – The UX Design App discusses the importance of user input design patterns and details examples from some of the hottest mobile apps today – more examples of these patterns and over 45 additional mobile design patterns are covered in detail in UXPin's free e-book, Mobile UI Design Patterns 2014.

Tuesday, July 29, 2014

HTML Imports: Import HTML Files Into Another HTML Files

HTML Imports

Most of us are familiar with <script src> which we use in loading JavaScript, <link rel="stylesheet"> for CSS, <img> for images, <video> for videos, and <audio> for audios. But we don't have a more declarative way to load HTML. Whilst It's possible to load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load self-contained components into web pages.

Sunday, July 20, 2014

How to Create Your Own HTML Elements With Web Components

Web Components
Web Components are currently and excitedly being talked about as an upcoming "tectonic shift for web development" with the promise of permanently reshaping the web design landscape. Big players are moving forward to bring web components into reality. Both Google and Mozilla are already gradually rolling out native browser support.

What are web components you ask? In a nutshell, web components give you a way to create your own custom HTML elements which can do just about anything you need them to. Instead of loading up your sites with verbose markup, long scripts and repetitive code, you wrap everything up into nice, neat little custom HTML elements.

Wednesday, July 16, 2014

Optimising for 60fps everywhere

Optimising for 60fps everywhere

With the latest update to GoSquared we set ourselves the target of achieving a smooth 60 frames per second for all the core UI and animation, across all devices.

Tuesday, July 01, 2014

15 Must-Have Mobile App Development Tools

Mobile App Development Tools - Corona SDK

A lot has changed since 1995, literally anyone with almost no technical capabilities can crank out a web or mobile app with ease. So I thought I'd take the opportunity to share some of the more interesting app development platforms I've discovered recently.

Sunday, June 29, 2014

How to Learn AngularJS - Your AngularJS Sherpa

AngularJS
Learning AngularJS can be complex. There are an overwhelming number resources available on the web. The blog posts can be conflicting and confusing, and a simple google search can turn up 5 articles all describing the same thing in a completely different way.

Friday, June 20, 2014

Responsive Multi-level Menu

Responsive Multi-level Menu

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the "parent" level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Friday, June 20, 2014

Buttons With Icons Using CSS

Buttons With Icons Using CSS

Buttons always plays an very important role in any website so that any user can make some action. To make the buttons more appealing, it's a great idea to use buttons with icons on website. Icons actually make the buttons more appealing and reflects the significance of after-click effect.

Sunday, May 25, 2014

Frame-by-frame animation with HTML and JavaScript

Frame-by-frame animation with HTML and JavaScript

Animations can make your project stand out from the crowd. Good animations enhance the user interface, make navigation feel smoother and offer a superior esthetic experience (bad animation does the opposite, so be careful). Modern browsers support animations quite well, but there are so many different ways of animating HTML elements that it often confuses even experienced developers.

Saturday, May 24, 2014

JavaScript Prototypes, Scopes, and Performance: What You Need to Know

JavaScript: More than meets the eye

JavaScript can seem like a very easy language to learn at first. Perhaps it's because of its flexible syntax. Or perhaps it's because of its similarity to other well known languages like Java. Or perhaps it's because it has so few data types in comparison to languages like Java, Ruby, or .NET.

Saturday, May 24, 2014

Parallax Done Right

Parallax Done Right

Getting great performance with parallax is tough. Here's how to make it happen.

Tldr; There are an easy handful of things you can do to get buttery parallax scroll. Check out a demo I cooked up to see it in action.

Saturday, May 24, 2014

Morphing Buttons Concept

Morphing Buttons

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

Saturday, May 10, 2014

The Absolute Beginner's Guide to Node.js

The Absolute Beginner's Guide to Node.js

This is a republished blog post by Brandon Cannaday. Brandon is the CTO of Modulus, a Node.js application hosting platform. Brandon organizes the Indianapolis Node.js meetup and enjoys speaking at conferences about Node's horizontal scalability. Prior to Modulus, Brandon worked in the chemical detection and telecommunications industries.

Friday, May 09, 2014

Six Common Problems With The UX Process and Six Solutions!

Six Common Problems With The UX Process

How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.

Thursday, May 08, 2014

7 Things You Didn’t Know You Could Do with CSS

7 Things You Didn’t Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required!

CSS @supports

Every good front-end developer feature-tests before using features which a browser may not have. Feature testing has always done with JavaScript, and many people use Modernizr, an impressive utility packed with loads of well-tested routines, to do that feature testing. A new API, however, has come along to let you do feature tests with CSS: @supports. Here are a few samples of how @supports works:

Monday, May 05, 2014

Injecting SVG With JavaScript

Injecting SVG With JavaScript

"Injecting SVG" – it sounds kinda complicated I know, but trust me it's not. It's actually super-simple! Right now you're probably thinking "Why would you use JavaScript to inject SVG markup? What is it? And how does it work?". Let me explain.

Saturday, May 03, 2014

Off Canvas Menus with CSS3 Transitions and Transforms

Off Canvas Menus

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Thursday, May 01, 2014

Chrome DevTools Features You May Have Missed

Chrome DevTools

In 2013, I posted a few tutorials on DevTools: Markup and Style, Networking and the Console and JavaScript and Performance, covering the basic features of the various DevTools panels. Since then, a lot has changed, so let's take a look.

Thursday, May 01, 2014

DRY-ing Out Your Sass Mixins

Sass Mixins

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and keep consistent.

Monday, April 28, 2014

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

Flexboxgrid

Building with a grid has become an everyday requirement for front-end developers. Not only do grids provide a sense of rhythm and consistency in design, but when a well-known grid structure is used it provides a simple collective design language for cross–team work.

Monday, April 28, 2014

12 Little-Known CSS Facts

12 Little-Known CSS Facts

CSS is not an overly complex language. But even if you've been writing CSS for many years, you probably still come across new things — properties you've never used, values you've never considered, or specification details you never knew about.

Saturday, April 26, 2014

Using Media Queries in JavaScript

Using Media Queries in JavaScript

If you practice responsive design then you use a lot of media queries. Media Queries are a CSS feature that gives designers the power to add something like if statements. By this I mean that it allows you to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

Saturday, April 26, 2014

How to Make Any Website Responsive

How to Make Any Website Responsive

According to Verisign's Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that's over 100 million websites (being that .com and .net domains collectively number over 120 million). Now, that is a lot of websites! So how exactly are we going to make them all responsive?

Saturday, April 26, 2014

Why Element Queries Matter

Element Queries
A sketch of our main component

At work, many of our pages present one or more collection of items, like products, shops, or whatever. It's basically a list of thumbnails, with a title and a location and/or a price. When you click on it, it leads you to the page related to the item. We call this the elements component (we could have called it thumbs-list or something but that doesn't matter).

Saturday, April 26, 2014

How to Create Custom HTML Elements

Custom HTML Elements
Photo by Kenny Louie / Flickr

An exciting feature of the HTML specification that's been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

Saturday, April 19, 2014

New HTML5 Attributes for Hyperlinks: download, media, and ping

New HTML5 Attributes for Hyperlinks
Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel and others company.

The new attributes are: download, media and ping. In this article, we'll take a quick look at what these new attributes are and how they can be used once browser support improves.

The download Attribute

The download attribute is new in HTML5. It supplements the existing href attribute by telling the browser that the resource the href points to should be downloaded directly, instead of visited (which could happen with a file that the browser can open, like a PDF). The value of the download attribute is used for the name of the file that is downloaded.

Sunday, March 30, 2014

Rotated Table Column Headers

Rotated Table Column Headers

Say you have a table header (i.e. <th>) of "Number of Howler Monkey Species by Country" and the data in the corresponding <td> is like "3". That's an awkward mismatch of width.

Sunday, March 23, 2014

Style External Links Differently

Style External Links Differently
When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other people's content.

When you link to external content it's common practice to open this content up in a new tab, this way the reader won't be taken away from there place in the article.

To open your links in a new window you can use the target="_blank" attribute.

<a href="url" target="_blank">External Link</a>

Sunday, March 23, 2014

How to Use the Details and Summary Elements in HTML5

How to Use the Details and Summary Elements in HTML5
A number of new interactive elements were introduced with HTML5 that provide native implementations of common UI widgets like dialogs and modals. Among these new additions are the <details> and <summary> elements. These elements allow developers to create collapsable UI widgets the user can click to show or hide content.

Tuesday, March 11, 2014

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

Tuesday, March 11, 2014

CSS 3D Folding List With Social Buttons

CSS 3D Folding List With Social Buttons

CSS 3D transforms are just awesome. I've seen before some cool and inspiring implementations in the wild and still I can't believe I didn't had the chance to write an article on this topic 'til now.

Tuesday, March 11, 2014

To Close Or Not To Close

HTML Tags

Have you ever wondered if it's better to "close" a br or input tag like <br /> or if it's better to just write <br> in HTML5? Or why it's not correct to write <script src="script.js" />? Well so have I and my findings on the subject were a lot more interesting than I anticipated (if for some strange reason you find stuff like this interesting).

Tuesday, March 11, 2014

Simple Stack Effects

Simple Stack Effects

Today we'd like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration.

Sunday, March 09, 2014

Why You Should Care About Web Components

Web Components
Since there is no standard way to define a component, every framework has to invent its own and JavaScript is a flexible enough language to allow that. Unfortunately, this results in fragmentation: components built using different frameworks do not interoperate with each other. Web components are a set of specifications solving this problem.

Two Date Pickers

Let's take a simple component that you are likely to see in pretty much any application - the date picker component.

Sunday, March 09, 2014

A responsive approach to image scaling with CSS

A responsive approach to image scaling with CSS

There was a popular article written a few weeks ago called "Vertical align anything with just 3 lines of CSS". This approach to vertically aligning things with top and translateY is something we've used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths and set heights and all we knew were the widths of the images.

Wednesday, March 05, 2014

Uploading Files with AJAX

Uploading Files with AJAX

The introduction of AJAX marked a huge leap forward in the history of the web. The ability to communicate with a web server without reloading the page has revolutionised how web applications are built. The primary technology that enables AJAX (XMLHttpRequests) has evolved significantly since the initial conception of dynamic websites.

Monday, March 03, 2014

10 HTML5 APIs Worth Looking Into

10 HTML5 APIs

The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a number of useful features in new APIs that you may not have delved into yet, likely because of the lack of browser support.

Monday, March 03, 2014

Create Different Styles of Hover Effects with CSS3 Only

Create Different Styles of Hover Effects with CSS3 Only

We started to see a lot of CSS3 animations around the web nowadays. Pure CSS3 animation such as flashing, fading, spinning, zooming, moving and a serial of complicated animations are emerging. What seems to be impossible to achieve with CSS only are now achievable fairly easily.

Sunday, March 02, 2014

Designing for Performance

Designing for Performance

Web performance is user experience.

Sunday, March 02, 2014

Making Embedded Content Work In Responsive Design

Making Embedded Content Work In Responsive Design

A few HTML elements don't play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube.

Sunday, March 02, 2014

Symfony 2: The Basics

Symfony 2: The Basics

In this first introduction video (of a new series), I'll show you the basics of working with the Symfony 2, PHP framework.

Sunday, March 02, 2014

Create a carousel out of nothing but CSS

Create a carousel out of nothing but CSS

You don't need JavaScript to build a carousel any more, Ben Schwarz introduces a CSS library that does the job.

Monday, February 24, 2014

Outdated UX patterns and alternatives

Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development".

Saturday, February 08, 2014

15 Best Responsive Web Design Testing Tools

Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and many more. As the use of different devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. But how do you test your website responsiveness?

Friday, February 07, 2014

Fullscreen Overlay Effects

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Fullscreen Overlay Effects

Saturday, February 01, 2014

A Step-by-Step Guide To Building Your First Mobile App

Mobile App

Why do you want to build a mobile app? Do you want to ride the wave of other entrepreneurs, or did you come across a problem that you feel you can resolve? The answer to this question will determine whether your app will be successful or not.

Friday, January 31, 2014

15 Powerful Social Media Tips

Social media is ever-changing and ever-growing. Of course, this is true of the internet in general, but even more so when talking about social media. Facebook, Google+, Twitter and countless others are constantly evolving and changing based on their users' reading, browsing and posting habits. Of course, this is good news. It does mean that social media will continue to be relevant in the years to come.

15 Powerful Social Media Tips

Friday, January 31, 2014

Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Scattered Polaroids Gallery

Monday, January 27, 2014

5 UX Tips for Designing More Usable Registration Forms

The web is crowded with UI solutions that we've inherited from the past, but are still applied because "everybody else does". It is time to reconsider all of them, but especially registration forms. When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be.

Here are some tips to make the most of registration forms.