Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 22 2012


What is the Trend for Web Design in 2012?

Just a month and a half has passed in 2012 and there are some patterns which are quite easy to notice in how people design. Sure, most of them are similar to the ones of 2011 – it seems 2011 and 2012 will not be too different, however there might be some small changes which I will talk about soon. There is no doubt that screen size is not an issue anymore and designing for all sizes is crucial – this is the stand point of web design trends in 2012.

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

January 12 2012


How to Make the Best out of the Fold

The fold, also known as the scroll, is the position on a web site where the browsers will begin to scroll down. Elements that can’t be seen without scrolling down are “below the fold” and some people believe that it is smart to keep the important information above the fold and don’t force the user to scroll down to view it. The whole space below the fold is for less important information and, depending on the resolution of the screen, this can be at around 600 pixels down on a 1024 x 768 screen, 850 pixels down on a 1200 x 1024 screen and around 1030 pixels down on a big 1600 x 1200 screen.

The term of “above the fold” comes from the newspaper industry and is used today for both papers and websites. For example, most papers are delivered or displayed folded up, meaning that only the top half of the front page is visible at a first glance – therefore the most important information has to be placed above the fold. Advertisers also prefer the visible part of a newspaper or web page, therefore an advertiser will pay much less for an ad space in the footer than in the header. However, in this era of small mobile screens, many experts suggest that the term is vague and not very important anymore – some call it a myth, a rule that kills innovation, a false concept used by people who don’t know what they’re talking about and so on- so today we will take a look at some arguments and try to make our own decision.

Does the fold really exist?

Well yes, it seems it does, because many people know about it and it is taken into consideration by designers, both for online and offline work. There is a clear advantage of being visible on top of the page, no doubt about it. There is also an advantage of being visible at a quick glance. And it is also rather normal to pay more for an ad box there. There are books and design cases written about the fold, so there must be something to it.

What is interesting about the fold is the fact that users have lots of different screen sizes and the visible content is not the same on every computer. This makes the job harder for a designer or developer, because if an advertiser pays for a spot above the fold, this might be difficult to make for small screen sizes if the design does not allow for it.

So yes, the fold exists and it was a problem a few years ago (more about this right away), but I am wondering if we should still pay attention to it, in the conditions we have today, when small screen sizes – mobile devices, tablets – have taken over computers with big screens.

Where does the concept come from?

Well, if we take a look 16 years back, we can find research by Jakob Nielsen (source) which says that only 10% of his test participants scrolled during normal browsing. Sure, that was back in the beginning of the 90s, while in 1997 his new usability test showed that users learned to scroll, but it still reduces usability. In 2010 he did a follow-up and presented totally different data, such as people spending around 80% over the fold, while attention to content under the fold dramatically decreased.

We’ve heard about the fold from ClickTale as well, which published a study six years ago, finding out that 91% of the users have a scrollbar and only 75% of them scrolled. Only 22% of them scrolled to the bottom of the page, which explains why an advertising space in the footer is not so expensive compared to the space on top.

Example of eye tracking on a Google page

The same company followed up with a study one year later and showed results through eye tracking and mouse heatmaps analysis that made clear the following: the top and bottom content are in focus, while the attention dropped somewhere in between. This means the header and footer are the most important parts of a website, although the header was 17 times more likely to be seen by all visitors than the footer.

In the same year of 2007, a spectacular article by Milissa Tarquini (source) was released and revealed that people actually scroll down and not only view, but also interact with the bottom of a page, unlike what the other studies showed.

What about advertising?

The content is the most important part of a web site, but today there are examples of successful web pages with not a lot of it, but with lots of advertising. Money rules the world today so advertisers actions have to be considered in this controversy. As mentioned several times before, the prices for advertising space differs from site to site, but moreso from position to position.

Chitika has a very interesting point of view, based on different tests, which say that from over 22 million impressions analyzed, ads placed over the fold have a 44% higher click rate than those placed below. But as said before, this is very difficult to control because of the many different screen sizes – what’s high above your fold could be under the fold of your teacher’s screen.

A more in-depth analysis was made by Casal Media. Two billion impressions were followed (source) and this showed that ads placed over the fold are seven times more likely to be clicked, while MarketingSherpa’s study showed that ads below the fold were not even noticed by 75% of the visitors.

When talking about advertising in particular, the results are clear: what is placed over the fold is more visible and has a higher click rate than what is placed below – but really, didn’t you expect this? We didn’t need studies that cost, probably, tens of thousands of dollars to tell us that. We knew it anyway and the proof is that everybody knows the prices in advertising – or, at least, the approximate fees for every single section.

So there is a problem…

Well yes, after reading the first part of the article it seems there is – and I totally agree with this fact. Everybody ignoring this obvious issue “doesn’t know internet“, so to speak.

The problem comes from people in the business such as project managers, developers or even clients who don’t want to make critical mistakes on their web pages, like placing the advertising space somewhere not profitable or visible. Some of them go so far that they want everything important above the 600 pixel mark (they heard somewhere this is the common line of the fold) and this annoys designers and developers, because not only there is no default line, but it all depends on the screen and it is purely impossible to make it work on all the sizes and resolutions. Even though the width can be set to 100% and be flexible, the height is not as easy to manipulate. And even if we manage to, the problem would be the same, because the content will be extended horizontally instead of vertically and we will still have a fold, only a different type.

The place below the fold is not No Man’s Land, unlike what many business executives think. Usability tests show that there is nothing wrong with the content below the fold, because most of the sites have a scroll bar today and the user is educated to scroll down. Placing advertising there is no problem either. They still have a conversion rate, a click rate and you can still make money.

And if there is a problem, how do we solve it?

Well, there is no real perfect solution, so I will have to throw some ideas out there, but with some things to take into account. We can’t control how the user accesses and views our webpage, therefore we have to focus on improving the things we can control. Keep in mind that if you are not too interested in this subject, you don’t need to change anything in the way you design, but if you’ve already read this far, it’s very likely that you’re looking for some answers. So, here you go…

  • Design intelligently

It is not very smart to lead the user into thinking the site finishes where the content box ends, like many designs do today by using a bottom border. Many users think the site ends right after the content and do not even see the footer anymore because of this – you want to avoid this.

It’s difficult to make a website work for more resolutions and designing for the majority is not a solution either. Even though the browser statistics show 1280 x 1024 and 1280 x 800 as the most popular displays, this is a total of less than 30% of the internet users. What about the rest? Try to use design techniques that are common to different displays at the same time (such as flexible width). You need to provide the same experience to all the users, regardless of their screen resolution.

  • Focus on content

As said before, the most important thing on a web page is still the content, therefore it’s the first element you should think about. People don’t look for advertising first, but for content that seems relevant to their interests at the moment. It they are interested in the content, they will have no problem scrolling down below the fold, so don’t worry about it too much if you know users come to your webpage for content. If you have a high return rate of visitors (check it with Google Analytics), they definitely come back for content, so you are on the right track – don’t worry about the fold. Just continue doing what you do and this problem will never be something you have to think about.

One of the few issues that might appear for you, however, is the fact that the scrollbars are decreasing as indicators. Apple’s new OS X Lion doesn’t feature a visible scrollbar by default, although you can make it visible by changing your options. This happens because of the mobile approach and Apple’s interface is already beginning to shift gears in this matter.

  • Think about what’s on top

“With great power comes great responsibility” is a well-known quote from a huge American writer. With the power you have as a designer, you have a great responsibility of designing things right. You need to spend a lot of time thinking about what is worthy enough of being on top. This takes a lot of time and research, but it will pay off in the end. Also, think of the advertising spaces you want to have and position them strategically.

In my opinion the beginning of the content has to always be over the fold. When you design, test on small screens and check if the beginning of the content is visible. Otherwise, go back in the code and make it visible. If the content (which is the most attractive element on a web page) is not visible, how do you expect to keep the attention of those 25% of the people in ClickTale’s research that do not scroll at all?


So yes, the fold exists even though many people deny it; and the fold is a problem as well, but only if you make it one. There are designers out there who don’t care about it and they still earn money and provide good results. But if you think of the fold too much, then I hope the tips above will help you get over it. It is really not that big of a deal if you don’t turn it into one.

What do you think about the fold? Have you ever encountered a client who cluttered the top of the site only because of the scroll? Is the fold bothering you and if it is, how do you avoid it?

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...