The year 2012 really started the big shift to the new trends we are seeing today in web design and development. Never before have people been so connected with each other as they are now. Social networks like Facebook and Twitter have successfully altered the way we communicate with one another. In being able to adapt to these circumstances, this phenomenon has naturally brought about many changes to the way we create websites. We can only expect this to continue growing in 2013. Here are my favorite 13 web design and development trends for 2013.

1. Responsive Layouts

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices, from desktop computer monitors to mobile phones.

In an earlier article I wrote about responsive web design, when we sit down with our clients to plan their projects, one of the first questions we ask is “how do you envision your website on a smartphone or table?”.

For web masters and website owners, this is no longer an optional process. According to w3schools.com, over 2% (and steadily increasing every month) of all website traffic is comprised of mobile operating systems. That is a rather large segment to simply ignore. As more people realize this, the more this trend will become the new norm.

2. Retina Display Support

Retina Display is a brand name used by Apple for liquid crystal displays which they claim have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.

When the iPhone 4 with Retina Display was released, little did we know that this would set the bar for new device displays. Today’s screens and monitors are more vibrant, more brilliant than ever before. As such, we’re beginning to see web designers having to create two versions of their works; a large image sampled at double the resolution which then can be scaled down to standard resolution size.

3. Fixed Headers

Although these have been around for some time, they are beginning to take off and are being used beautifully and much more often. By using CSS property

position:fixed

, you can easily attach almost any header to the top of most layouts.

This is really nice, as it gives the user experience benefit of viewing all of your content while scrolling and still having access to your navigation. More and more we see this being used by not only social networks and blogs, but also by private companies.

4. Huge Photo Backgrounds

For me, one of the most welcome trends is the use of huge photo backgrounds. This allows the site to very minimalistic, while leaving a lasting impression on the site visitor. Done properly, they are very esthetically pleasing and a great way to capture your visitors’ attention.

This design technique can really give your website an edge in marketing when you carefully blend your imagery into your layout.

5. CSS Transparency

CSS3 has allowed for opacity edits on any part of the webpage.  You can control transparency in any modern web browser – no Photoshop required!

An eye-catching example is on the Squarespace Blog where the main container is given a 

background:transparent

 property. This is normally used to generate some other background from repeating, or to setup the background using internal elements.

Another relatively new design technique for manipulating transparency is through 

rgba()

 syntax. When designing in CSS you have the option of either specifying colors using red, green, blue, and alpha-transparency values or by using hexadecimal values. So using the syntax 

rgba(255,255,255,0.3)

 would generate the color white at only 30% opacity. This is very useful trend we can expect continuing into 2013 and beyond.

6. Minimalist Landing Pages

Anybody who has spent any time researching markets will tell you that selling on the Internet makes good sense. You have access to the largest consumer base anywhere in the world. Additionally you can sell products which are not even tangible, such as videos, ebooks or other creative tools.

Building a landing page is all about generating new leads for your product or service. Today’s trends are following the concept of minimalism: keep everything clean, basic and stick to your product.

The perfect example of this is this template by Tansh Creative which offers a beautiful landing page template. The page is expertly laid out and all roads lead to conversion.

7. Digital QR Codes

The proliferation of smartphones has led to a onslaught of QR Code apps. This stands for Quick Response Code and has developed from the older UPC barcodes. These are showing up everywhere from bars and restaurants to event venues and car lots.

QR codes are becoming very trendy as people are looking for faster and more convenient ways to transmit data. My bet is they will continue to be more and more prevalent in 2013.

8. Social Badges

Marketing is probably the most important factors in a website’s success or failure. Social media marketing is a bonafide marketing field and is very important to most companies. Facebook’s Like button, Twitter’s Tweet button and Google’s +1 button seems to have left the rest of the pack way behind, but they are still out there.

9. Detailed Drawings and Illustrations

Today’s trends in graphic design are all about grabbing and keeping one’s attention. I feel that drawings do this perfectly. Not all designers are capable of this type of detailed work, but we are fortunate that we have that calibre of talent here at DCGWS.

Drawings and illustrations can be used to bring about different moods in different sections your website. You can find many different galleries and showcases that specialize in this elaborate type of art work. The Morphix blog  is stunning  example of a beautifully illustrated website.

10. Infinite Scrolling

Infinite scroll loading has been around for at least a few years. But this technique hadn’t really hit mainstream until this year and I’m sure it will continue into 2013.

Pinterest uses this loading style for their layout and it works perfectly. As seen above, Google has also been testing this feature. You can search anything and the results page will populate as you scroll down. Pagination is a non-issue and works great into the user experience. This is truly designing for simplicity!

11. Sliding Page Panels

Animated websites used to be very popular when Flash and ActionScript were hot. Now, animations have moved into the realm of JavaScript/jQuery, and this has greatly affected the way designers build websites. Sliding page panels is just one feature I really love and expect to see more in the coming year.

At first glance Alder Cass is a normal website. But as you click through the navigation you will learn that each page is loaded by pushing from left-to-right or right-to-left. Animated effects such as these do not always work well for mobile and smartphone users, but if you can build into them responsive design techniques or create an alternate mobile site then this is a really worth trying.

12. HTML5 & CSS3

The Expressive Web, an elegant, interactive, in-depth showcase of 12 prominent new HTML features. For each expressive element they’ve provided interactive demonstrations, data on browser support, and links to some of the best content already utilizing the innovation.

In addition to highlighting and providing information on twelve new HTML5 and CSS3 features, the site itself makes extensive use of new features such as CSS3 transitions, CSS3 transforms, web storage and more to provide a visually compelling resource for learning more about HTML5 and CSS3.

13. Big, Fullscreen Typography

In addition to using big oversized photographs in the background of website layouts, we can also extend this trend to focus on typography as well: designing your text so it fills the entirety of the viewport. Some users might not be a fan of this, but this is normally not the case if the layout is fitted perfectly for large text and the right font type is used.

Harlo Interactive has a great website layout which focuses heavily on typography. You can see this includes rich text effects using CSS3 properties. Additionally, the site is simple to navigate, and many of the other page elements appear oversized as well.

Big text with unique font styles can stand out just as much as oversized photography. And I am sure this will see more design critiques moving into the new year.

The Roundup

If 2013 is even half as exciting as 2012, our industry is in for great things ahead this year. I’m really looking forward to DCGWS continuing to adopt these 13 web design and development trends and providing our clients the best and most amazing user experience available.

Are you ready to start implementing some of these design techniques? Request a quote, hire DCGWS and we’ll get started tomorrow!