Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.
This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.April 26th, 2013 Posted in Navigation
There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.
In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.April 24th, 2013 Posted in CSS
Omar G. Writes: My boss is impossible to read and I feel like I have to be a mind reader to come up with a design he likes. He blames me for not being able to please him, and I feel ill every time I get a new project from him. Should I just look for a new job? I like my coworkers and the company but my boss is crazy!
Omar, this is a very common problem but one of the easiest to fix. Let me relate a story about one of my experiences then, after feeling a little unwell from the memories of how tense this situation can be, I’ll can explain how to please your boss!April 23rd, 2013 Posted in Design Dilemma
On Wikipedia, the definition of a keyboard is a “typewriter-style device, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches”. In an age where technology is seemingly magical in its state of advancement, our beloved peripheral is starting to feel more like a relic than a modern input device.
As attached as I am to keyboards, I have clear vision to the light at the end of the tunnel. With the prevalence of pen inputs, touch screens, voice commands and other new ways of using technology, its time for us all to admit; The keyboard era is coming to an end.April 17th, 2013 Posted in Business
Web apps are becoming ever-more prevalent on the internet. Some may argue that they are simply more complicated websites. Regardless of their definition; what happens when you are designing for large amounts of constantly fluctuating data?
There are a few examples of data driven interfaces and they all have to handle a lot of varied data that is constantly changing. The most common are admin areas and analytic dashboards. The data can take many forms; graphs, charts, tables or text. Each can be displayed in a variety of different ways depending on the context and meaning you are trying to convey with the data. One thing to remember is that you can rarely be sure of the length or amount of data you need to cater for; so think simple to start…April 15th, 2013 Posted in Graphics, Layouts
The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more.
Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works.April 12th, 2013 Posted in CSS
It’s an almost unavoidable part of doing business – the business card. While more people are beginning to ditch traditional paper cards for digital counterparts, the business card is still an integral part of doing business. Cards are almost as commonplace as the handshake.
So what makes your card stand out from the pack? How can you design a card that won’t get thrown away minutes after the meeting? Let’s delve into some suggestions and tips today.April 10th, 2013 Posted in Business
In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3
:valid pseudo class it is easier than ever to customize text inputs. Check out my live demo example to get an idea of what the final product looks like.
Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.
There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version. Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!April 5th, 2013 Posted in CSS
With all the talk about designing for responsive websites, two little words keep cropping up – em and rem. But what are they?
Em and rem, along with pixels, are units and methods to measure and resize type. Em and rem are relative, rather than static, units and are being used more and more for responsive web design schemes. Let’s dive into this concept today and explain things a little more clearly!April 4th, 2013 Posted in Typography