Hello there online friends and welcome to our little contribution to identifying this years web trends!

Before you read on simply take a moment and ask yourself:

Does my industry change every year based on trends? If you answered ‘yes’ then you could be in the web game yourself (or some creative field) and you can appreciate how important it is to know what’s hot and what’s not (by the way enjoy the visuals, that’s all for you). If you answered no then don’t run away, because I guarantee you’ll either learn something new or find a newfound appreciation for us web folk. Below are some of our favourite trends getting around and a little of what we have to say about them: 

Part 1

Mobile – revise and refine

In 2012 many businesses were rushing around attempting to get their sites mobile ready in order to be seen as credible by their mobile savvy customers. This is a great first step but with the exponential growth of mobile users, the next phase of mobile web experiences must be those truly designed, and refined for mobile-specific tasks and user needs, not just smaller screens.

Brands that already have mobile sites should start digging into their analytics to find improvements to navigation, placement, choice of promoted content to name a few. Here are some common ways to improve your mobile site:

  • Enable search query tracking and trace the most common searches to correct navigation problems you mightn’t have seen.
  • Review the most popular shared and viewed content and analyse the cause, then try and repeat the process- it might be position of the item on the homepage, menu description, the title, tone, ease of understanding etc.
  • Lift buried content by cross promoting on more popular content

Analyse Google search queries and place the most popular items prominently. There will always be unique cases for which separate mobile-specific websites would provide a better experience, however now that there’s a growing interest for single websites supporting both desktop, tablet and mobile devices there’s a fair chance that companies will assess this option prior to creating a singular mobile site.

If you’re thinking about going mobile then you need to consider how your target audience will interact with what you offer them and then deliver it, how and where they want it. With free access to great data, there is a perfect opportunity to give your users  what they’re really after.

Custom mobile design: Pinterest, Linkdin and Asos

b2ap3_thumbnail_1-mobile-1.jpg

Responsive design resized for mobile: Microsoft, Google and The Next Web

b2ap3_thumbnail_2-mobile-2.jpg
       

Responsive layouts

b2ap3_thumbnail_3-Responsive-1.jpg

Responsive web design has been around for a few years now although it wasn’t until recently this year that responsive design has gained more of a following and become 2013’s buzz word. It’s definitely making a presence on the web now that well known brands such as Microsoft, British Vogue, Time, Starbucks, Mashable, Smashing Magazine have been seen sporting this trend.

The advantage of responsive web design is that it allows a website to respond to the particular device that it is viewed on giving the user an optimized experience. A responsive layout is achieved by coding certain elements such as the navigation so that it displays more appropriately for smaller or larger screens. The end result is a website that looks great on iPhone, Smart phones, tablets, desktop and everything in between.

There are plenty of advantages but there are also cons to consider when looking at a responsive layout such as:

  • All devices use roughly the same website structure and navigation, hence the experience must be broadly the same across all devices – this is not always the best route
  • Lack of compatibility for media-queries on older browsers means that users of older devices may not see the correct version for their device
  • Longer design and build time due to effectively creating multiple versions of the same site
  • Longer load time for small-screened devices compared to a standalone mobile site (images are resized rather than delivered at a size specific to the device)
  • Some users prefer to browse the full-size version of a website even if they are on a small screen

To see more examples of responsive web design visit the website link below showcasing a variety of companies that have adopted a responsive layout.
http://mediaqueri.es/ 

 

Grids

Designing for web can be extremely challenging particularly over the last few years where designers have had to create multiple mock ups for different screen sizes and devices. This year Adobe are working on an exciting new program called  ‘Adobe Edge Reflow’ with an intuitive user interface that allows you to design simultaneously for all screen sizes. Adobe have already created perfect applications that are used industry wide for photography, print and screen design however with the web industry growing at such a rapid rate and particularly the growing trend of responsive design they saw the need to create a design application specifically for web design.

Adobe Edge  (http://html.adobe.com/edge)

b2ap3_thumbnail_4-Grids-1.jpg

Reflow is an html based design surface that has a flexible grid system within, an intelligent web layout that knows how to react inside a web browser and a focus on design and typography. Anything you draw inside of Reflow is made to render inside of a browser, this program gives you the ability to set grid options and control the visual media query break points so that you can see your design at different perspectives and know how it’s going to react.

Adobe believes that in order to create cohesion between content on different devices you have to consider the people involved such as designers, writers and developers. The writer or content creator needs to think about the implementation inside the website, the designer needs to understand the capabilities of the web and the developer needs to know what’s coming to him. Adobe Edge Reflow is one of many new programs that are part of the new Adobe Edge suite, you can find out more about these new programs here - http://html.adobe.com/edge/. Unfortunately Edge Reflow won’t be available until later this year but you can stay informed and be notified if you sign up to Adobe’s Creative Cloud Membership.

Adobe isn’t the only one who has created a tool for web designers you may have also heard of ‘Gridset app’. Gridset app offers an online tool to create grids for each resolution size e.g. desktop, tablet and mobile, Gridset also provides all the measurements you’ll need to integrate your grids with your existing CSS. You can then save your grids in whatever file format you need to show your clients or save for your own personal use.

Gridset app  (https://gridsetapp.com)

b2ap3_thumbnail_5-Grids-2.jpg


In order to keep up with the emerging web trends it’s becoming more important for designers to understand website capabilities and collaborate with developers to produce files as they need it. Both programs by Gridset and Adobe are going to assist many designers in prepping their work and keeping developers happy.  


Demos and graphic enhancements

These days you can do just about anything on the web and I think what you will find this year is an increased effort to make content even more engaging. Whether its copywriting or animated enhancements content is still king and people are exploring new and interesting techniques to make their content stand out.

A method that works well to isolate content into readable chunks is a technique called transitioning. When you scroll down the page on Mediafire’s website notice how they use a subtle white transition between content blocks. It’s a great way to create focus on one section at a time.

MediaFire (http://www.mediafire.com)

b2ap3_thumbnail_6-Demos-1.jpg
 
When it comes to standing out you can hardly ignore Apple and how they market their products. If you go to the iPad features page and scroll down to the smart covers section the graphic has been manipulated so that you can interact with it by pulling the cover back and you can also change the colour of the cover by clicking on the swatches. It’s really clever when a brand can get you to interact with their products and Apple has always been good at this. In 2013 there will be more sites using animated stats, home page demos and graphic enhancements in order to make the experience more memorable and engaging for users.

Apple (http://www.apple.com/ipad/features)

b2ap3_thumbnail_8-Demos-3.jpgb2ap3_thumbnail_9-Demos-4.jpgb2ap3_thumbnail_10-Demos-5.jpg

Next week we will have part two in web trends, if you've seen something we should include in our list, comment below!

Go back to Trends