Web Design Trends 2013

Flat design

Skeuomorphism has been the industry standard for a long time or since Windows 1.0 at least and probably reaching its hight in the last few years with the OS X Mountain Lion on the Mac. These days the trend is all about flat design like seen in Windows 8 and according to rumours Apple might also be headings this direction. I think this is a good trend that fits well with economical and sustainable thinking of our times. This trend will have a big impact on young designers and should result in a less busy and more pleasing UI designs for everyone.

Fading lines between apps and web sites

Now that responsive design is getting more mature the line between mobile apps and mobile web sites is getting blurrier by the day. App designers are increasingly going for flat design as well and at the other end many web designers are using mobile first technique when building responsive web sites. Another related trend is the mobile navigation button creeping into desktop versions of web sites. Some sites are staring to hide the main navigation behind a menu button like the one seen one many responsive sites mobiles apps. Just make sure that users understand how to get to the menu.

One pagers

This is another big trend. A lot of web sites are saying no to navigation heavy architecture and opting for building sites that are longer instead. I think for most smaller to medium sized web sites this is a good thing. Often web sites have too many menu items and pages that have little content. The more pages you have in your site the more clicks users needs to find the information they are looking for. Just make sure you don’t over do it, don’t try to stuff all your content into one page if you have a lot of it.

Is RSS dead? Not even close!

RSS is not for everyone. People who are into reading and have a large list of blogs and news sites to follow can use it to keep track of hundreds of sources at the same time with out having to manually check them for updates. RSS was never ment to be a commercial product like Twitter or Facebook but a way to subscribe to content. RSS is pluming, most people don’t even know they are using RSS when they open up iTunes and listen to their daily doze of podcasts.

Almost all web sites and blogs on the internet use RSS to expose the latest updates available. This allows both people and computers to consume the information in a accessible way.

People who consume large amounts of news and information will continues to use RSS for an unforeseeable future while more typical users will opt for more consumer oriented ways like Twitter and Facebook to satisfy their daily information fix.

Designing For Start-Ups: How To Deliver The Message Across

As a designer at a tech startup, I feel very lost and out of place most of the time. I feel my coworkers do not understand design and why should they?  The developers I work with think that I should work like them and they almost feel like I’m being silly when I suggest that designing is nothing like programming. This has taught me a lesson, I have to become a teacher. I have to teach the people I work with everything I know about design for them to understand why design does not fit into a 2 week agile sprint and why the colors being used will not be chosen in a sprint planning session.

Is Twitter Bootstrap good for all projects and teams?

Twitter Bootstrap is a good idea but not all teams will benefit from using it. TB is great for small teams and startups that do not have a designer or a front-end guy on board. If that’s the case I highly recommend using it.

For teams that have an experienced front-end person then TB could actually hold you back. I have been using TB now for 2 months and the cracks are starting to show. The idea behind this framework is a good one, its very convenient for me as a front-end developer to be able to point other team members to the TB site and tell them to use the patterns that are already their, ready to use.

Using a framework means that you are always confined within that framework and the how that framework solves problems. When I started to use TB one of the first things I wanted to do was offsetting or pushing a column in a fluid layout. Turns out TB only supports push and pull on fixed layout. The project I am working on required high levels of customization. We have already build custom UI widgets that are missing from TB (No framework can solve all problems) and our customers also need to be able to customize the colors of the app. Turns out many of the colors in TB are hard-coded for some strange reason.

For me the drawbacks simply outweigh the benefits, but I do recommend TB for quickly prototyping new ideas and specially for teams that do not have a front-end developer.

Five things startups should consider when hiring

  • Not playing the “You can get a pice of the pie” card too soon
  • Invest in solid office equipment. Quality does not mean too expensive
  • Communicate often and be open and transparent with employees
  • Let people use the tools they are used too working with for increase productivity
  • Inspire your employees to do great things and trust people to do their job and do it well

CSS frameworks can hurt usability and slow you down

I was faced with a tough question today. My boss wants me to redo everything I have built for the last few weeks using Twitter Bootstrap. Now I have nothing against TB as a framework, specially for teams that do not have a dedicated front-end programmer. But for teams that have one and that person is also the designer, forcing him to use a 3rd party framework can have some negative drawbacks.

Frameworks can be good to quickly prototype new features in HTML. But like someone pointed out, a framework can never solve all user-interface problems because no two sites have the same requirements and problems. New problems require new components and a new solutions. Trying to shoehorn a framework like this into your app can hurt usability, specially if you do not take the time to customize and write your own solutions on top.

If your website is highly specialized, using Twitter Bootstrap might have very little benefit. Specially if you are a front-end developer yourself. A better solution is often to copy other solutions and build your own set of custom tools and components that fit the design you are working with. This approach will give you a productivity boost as you are working with your own code. Not to mention if you are already using LESS or other compiled languages, making your own custom framework is easier then ever and if you are like me, its also a lot of fun!

JavaScript depended web apps are fine!

Almost all web users have support for JavaScript (Even 98.4% of screen reader users have JS enabled) but when does it make sense to ignore Progressive Enhancement and go full JavaScript?

The innovation in the JavaScript world is lightning fast, new frameworks are popping up like mushrooms all over the place and yet many developers are being guilted into not take advantage of these new technologies out of fear of discriminating against uses who do not use the latest browser or assistive technologies. 

The fact remains that if you don’t need to rely on Google and other search engines indexing your sites content, you can go full JavaScript and still sleep well at night. This applies to web applications and web sites that live behind a login and have the soul purpose of serving private information to users.  You don’t have to leave anyone behind even if you rely heavily on scripting. Maybe this is obvious to everyone but after reading about Adaptive web design and progressive enhancement one might get the idea that building an app that depends on JavaScript is not ok. This is simply not true, there are cases where its just fine and has benefits that can’t be overlooked.

Don’t hold back just to support robots that don’t understand JavaScript.

Web Trends 2012

Content Structure First

Know the structure of the content before you design, so you know what type of content you are dealing with. You don’t have to have all of the content or texts before you start, but you need to know some facets about the content before you dig in. The “Content is King” mantra is getting a bit old, but the reality is that content writers still aren’t getting the attention they deserve. 

Responsive Design

Is responsive design just a fad? Are mobile phones and tablets going away? No! Yet again, we are forced to learn how to deal with the winds of innovation. Web design is changing, and responsive design is about learning how to deal with a new landscape. More and more people are browsing on their mobile phones, and that number is only going to increase.

Back to Fluid Layout

With responsive design, an old debate has resurfaced: should we design our sites using fixed pixel-based layout or fluid layout using percentages? While both options are valid, fluid layout is more “future proof,” and can adapt better to new devices. It’s also easier to manage when dealing with the ever growing number of screen resolutions. Using a fluid layout, you can build a site that behaves like a fixed-width site, but can easily change and adapt to your needs without having to rewrite a lot of CSS code.

Open Source Fonts

Finally, we can start using other fonts that are different than the ones installed on the user’s computer. Google Web Fonts is an awesome place to start looking for fonts to use in your design. I’m always amazed by the quality of some of the fonts that are available. Right now Open  Sans and Droid Serif are my favorites.

More Parallax

Parallax background were big last year, and will likely continue to be in heavy use. These are a bit gimmicky, but can produce super interesting results when executed well and not overdone — especially when using to many layers and heavy backgrounds that drain resources on the users computers and slow the experience down.

Into View Animations

Using a jquery plugin like inview, developers can easily code animations when elements on web sites come into view. This can go very well with a simple parallax background, and is a great tool for designers for creating a narrative by using simple animations that are triggered when the user scrolls down a page.

What are we waiting for?

The internet has already provided us with tools that allow citizens to participate in direct democracy. This has been the case for years, and yet here we are, still waiting for meaningful change. The politicians, as in other instances, are refusing to let go of the past, and are thus simply holding back on innovation.
By using the web and open source software, we open up the decision making process, and allow people to participate directly by voting on issues, generating new solutions and ideas, and discussing new ways to solve our problems.

Listening to people

More often than not, one cannot help but feel as though politicians simply aren’t listening. Depending on where you are living in the world, it often seems as though politicians are operating according to their own agenda, one that does not align with the needs of the general citizenry. Again and again, it often feels as though many politicians are standing in the way of progress by sitting on information and data and not sharing it, and by seemingly refusing to listen to new ideas, simply because those ideas do not fit with not their own. It also feels, more often than not, that many politicians are more concerned with being reelected than on solving any pressing, substantive issues.
It seems to me that what we need is a system that accepts new ideas and solutions — one that ensures that voices are actually being heard, and that allows people to work together to come up with new solutions. We can use software to create the tools we need to make this happen.

Disruptive innovation

Do we even need politicians any more? With the disrupting effect of the internet, many sure things in our lives are coming to an end. People are turning off their TVs and watching content on laptops and iPads, and selecting what they want to watch, when they want to watch it. We are throwing way our books made of paper and reading instead with the click of the mouse. There is nothing that says that the same disrupting force does not also apply to politics and government. Politicians are not nearly as important as they would like us to think they are. If they are standing in the way of progress, then perhaps it’s time to change the way we approach politics, too.

Writing a new constitution in total unity

When Iceland decided to start working on a new constitution, the country was lucky enough to do so without any involvement of politicians. 25 people were elected in a national referendum to work together in a special constitutional congress.  For 70 years, the political class in Iceland, committee after committee had failed to rewrite our constitution.  But in 2011, in the span of a few months, this special congress wrote a new constitution and agreed on every section anonymously, 25 votes against zero. The people who did this showed us that working together as a people, we can reach joint solutions on complicated issues like the ones contained in a national constitution, and at the end all agree on the results. Amazing, right?
Its should also be noted that this special congress used social media and its web site extensively to open up a way to listen to and engage the citizens of Iceland.  Social media allowed people to send the constitutional congress their own ideas. The story does not end here.  As this is being written, the government majority has been fighting the opposition (the country’s conservatives) to put the new constitution up for a nation referendum that hopefully will be held later this year. The conservatives, unsurprisingly, are opposing the new constitution, even one drafted by a constitutional congress consisting of representatives from all walks of life (not simply politicians), and are doing everything within their power to thwart it from taking effect.

Letting go of the old

Our system of governing — the system used in most of the world — is being disrupted by technology.  But this doesn’t have to be a negative thing.  If we can cut out the middle man, the politicians who are standing in our way, we can implement new online systems to govern ourselves with little or no help from special interest groups, or the outdated political classes who have captured our governments and held progress hostage.
What are we waiting for?

Introducing Fluidable: A fluid/liquid CSS grid system

Since I started making responsive sites, I have been building a fluid grid system that fits my needs as a designer and a developer. Since there aren’t NEARLY enough CSS grid systems out there, I decided to write some documentation and put the code up on Github.

Fluidable works on IE7+ and is built using LESS. It has fixed gutters set in ems and can do nested columns. It also has basic media queries built-in for mobile devices.

Fluidable CSS Grid System

Responsive Design: Why use a fluid layout?

When developing a responsive web site, one of the first decisions one has to make is whether to use a fixed (pixel/em) or a fluid percentage based layout. As a developer and a designer, a fluid layout can offer a robust and flexible way when building responsive web sites. Here are a few reasons to go fluid:

  • Fluid layout can help you future proof your design, making your site adaptable to new devices. With new phones and devices coming out every week, new resolutions are being introduced faster than before. 
  • Unless you are using a very smart compiled CSS solution, fluid layouts are more flexible and easier to change and update than fixed layouts. Changing the width of your site can be as easy as modifying the max-width rule for your site’s container.
  • There are indicators that fluid layout saved considerable time on development. Because of the proportional nature of fluid layouts, you do not have to recalculate grid columns for each break point in your site.
  • With media queries you can optimize readability for your users. A fluid layout has been thought to hurt readability because of long text lines on large screens.  Using the benefits of responsive design you can turn that around.

Responsive design is still very new, and developers are working to find solutions to the problems that have arisen. But it’s not all problems, however; responsive design can also be a great opportunity to advance the web in a new environment, given that users are increasingly consuming the web on mobile phones and tablets.

Requirements for a responsive CSS framework

I have been working on a CSS framework for using when building responsive web sites. In the process, I have been thinking about the requirements for such a framework. Here is a list that I am following:

  • Moible first: Mobile devices should only load the needed CSS, and nothing more, to optimize bandwidth usage.
  • Fluid/Liquid layout: No questions about it, responsive sites have to be percentage based all the way. Doing it with pixels is simply not practical.
  • Fixed/Elastic gutters: Design above technical perfection. Designers want the gutters to be proportional to the content and not the screen size. This is why the gutters should be defined in ems.
  • Simple and flexible: I decided not to make guesses about how developers would be using my grid system, but instead, tried to make it flexible and usable for as many styles of web sites as possible.
  • Stand-alone: Focus on the grid system and layout aspect, and not reinvent things already been solved, such as reset styles and mixing (although those things might be nice to have as an optional download).
  • Compiled CSS: I think most developers should be using some version of a compiled CSS language by now. If anything else, it really does speed up the development process.