This topic was my first point in the
2012 trend article, however I feel that responsive
web design has been changing to ultimately come to a threshold where
layouts are designed to match all forms of digital media. The idea is to
support all devices from laptops, desktops, smartphones, tablets, and anything
released in the future.
You could think of this trend more
like a uniform web design where the goal is to have a single set of
codes which run perfectly on all environments. Responsive websites are often
thought to cater towards mobile browsers, but that isn’t the sole purpose.
You can have a responsive website
which also adds brilliant illustrations and graphics into the layout when the
browser window is larger.
The big idea here is to think
about website design as a single canvas which is dynamic and fluid by nature.
CSS3 media queries allow developers to customize layouts based on limited or
expanded screen real estate. Use this to your advantage and see how other
designers are using it as well!
Recommended Reading: Responsive Web Design series of articles.
Retina Support Along with responsive support for website
layouts I have also seen a dramatic rise in people building for retina devices.
Apple first engineered this idea with the iPhone 4 and has since applied this
screen display onto their other devices, including the iPad and some MacBooks.
Retina screens are basically twice
as dense as any average LCD. So they are the same number of physical
pixels, but digitally twice as many pixels can be fitted into the same physical
This means pixel-perfect web
designers supporting retina devices will need to create two sets of
http://media02.hongkiat.com/web-design-trend-2013/. First you need to
sample your image at double the resolution, then save a “standard” version at
half the size. The larger image will be scaled down to the standard resolution
and will look very crisp on retina screens.One of my favorite tools for
displaying @2x retina copies of image whenever your user is browsing on a
Although this won’t detect CSS
background image, it is still the most handy resource as opposed to coding everything in
Fixed Header BarsUsing the CSS position:
fixed; property is a great way to staple a
header bar onto your website. As visitors scroll down your page this will offer
constant support for navigation and a trip back to the home page. This trend
has been around for a while but now we are seeing this in full force. Fixed headers are so interesting
because they can work on practically any website. This includes social
networks, blogs, and even design studios or private companies. The design is
very trendy and looks great paired with most layouts. But aside from the aesthetics,
this bar also provides an exceptional user experience without needing to
look very far to navigate the website.
Large Photo Backgrounds
Photographers or even fans of
photography will definitely enjoy this design trend. I have seen countless showcases
discussing the ideas of big oversized photography in the background. It’s an excellent
way to capture your visitor’s attention and it can look great when done
I am often fond of big photographs
since they can be pleasing on the eyes. When blended into your layout, this
design technique can give your website a major edge in marketing. On this topic
I always consider the ever popular design portfolio of Kerem Suer.
This unique background photo behaves as custom branding for everybody
who lands on his website.
The new CSS3 properties have allowed
for opacity edits on any webpage element. This means you have control to
generate transparency in any modern web browser – no Photoshop required! This
trend of web design transparency was recently discussed on Codrops with some very enlivening talking points.
One excellent example is on the Squarespace Blog
where the central wrapper is given a background:
Another interesting design technique
for manipulating transparency is through rgba() color syntax.
When designing in CSS you have the option of specifying colors using Red,
Green, Blue, and Alpha-Transparency values. So using the syntax rgba(255,255,255,0.6) would generate the color white at only 60% opacity. This is
certainly a design trend we can expect continuing into 2013 and beyond.
Minimalist Landing Pages
Anybody who has spent some time
researching markets will understand that selling
on the Internet is just plain smart. You have access to a large
consumer base from anywhere in the world. Additionally you can sell
products which are not even physical, such as videos or creative resources.
Creating a landing page online is
all about capturing new leads for your product or service. New trends are
following the idea of minimalism: keep everything simple and focus on your
This is exemplified on the PictoPro webpage
which offers a beautiful resource for cheap icons. The page is fairly
crafty using vector icons as a
background effect. But all the text is easy to read and it’s basically a
one-click checkout process. You cannot get much simpler than that.
Recommended Reading: Beautiful Landing Pages: Tips And Examples
Digital QR Codes
The abundance of mobile smartphones
has led to a surge of QR Code apps. This stands for Quick
Response Code and has developed from the older UPC barcodes. You
will find these tagged everywhere from restaurants to event venues and
automobile sales lots.
But very recently I have found a
couple of websites with these codes built
right into the design. This isn’t something you would normally
consider since they are often found in print. But QR codes could become trendy as data transmission becomes quicker over time.
You can see a brilliant example of this technique on Keith
Cakes contact page.
Social Media Badges
Marketing is one of the ultimate determining
factors in a website’s success or failure. Social media and viral marketing are
exploding in many different websites. Digg used to reign popular in this domain
but has since conceded to rivals like Reddit. But these are not the only two
popular resources for sharing stories online.
You can check practically any social community for sharing badges and will
likely find a great solution. You can position these badges pinned to blog
posts and articles anywhere in your layout. These are still used actively by
readers and fans who want to share content quickly on places like Facebook,
Twitter, or even LinkedIn.
Below I have put together a small
list of social media badges you can try in your own website layouts.
- StumbleUpon Badges
- Google +1 Button
- Pinterest Buttons
- LinkedIn Share Badge
- Hacker News Vote Badge
- Dzone Vote Buttons
- Free Social Media Icon Sets – Best Of
- 100+ Remarkably Beautiful Twitter Icons And Buttons
Newer design trends are all about
catching and holding one’s attention. I feel that
illustrations perform this task brilliantly. The problem is finding a designer
who can make such impeccable works of art, or even teaching yourself.
Illustrations can be used in many
various ways to bring about different moods in your website. Look around the
Internet, and you will find many different website galleries and showcases
focusing on digital illustrations. You can see these artistic works eventually
blend into its website branding almost perfectly. MailChimp is
probably the most definitive example with its trademark chimp mail carrier.
Recommended Reading: 50 Beautiful Hand-Drawn Web Design
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 has adopted this loading technique for
their layout and it works beautifully. You can search anything and the
results page will continually load as you scroll down. Pagination is
basically a non-issue and doesn’t even work as a detriment into the user
experience. Talk about designing for simplicity!
But another great example and
possibly my favorite example is on Tumblr. You can blog and reblog photos from other
people you follow which all appear on your Dashboard. So after logging into
your account all the most recent posts will scroll infinitely down the page.
This is an excellent technique which
does not work on every layout, but for the right websites this can look and