Preparing for the Latest Design Trends

Mobile & More:

February 26, 2015

Interactions Are Micro

The Internet of Things

Material Is the New Flat Responsive Takes Over

Hero Images Getting Bigger

Video in the Background

SVGs and the Vector World

LATEST TRENDS

Introductions 0 In Case

You Were

Wondering

2/26/2015 4

Who are you? In Case You Were Wondering

Nick Goodrum Director of Front End Development

Responsive Takes Over

1 The Trends

That Keep on

Growing

2/26/2015 6

Responsive, Responsive, Responsive, and Adaptive

Responsive Takes Over

Adaptive and responsive design are both

approaches to optimize content across different

devices and resolutions.

• Responsive stands out due to the fluid nature and

consistent content across all viewports.

• Adaptive detects devices or sizes and provides

appropriate content and layout.

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

2/26/2015 7

Why Is Responsive Winning? Responsive Takes Over

Responsive is overtaking other approaches thanks to it’s flexible nature.

Separate Mobile Site:

• These were an easy approach when there was just the iPhone to consider.

• Mobile sites are extremely difficult to maintain support for all devices or screen sizes.

• Separate mobile sites often means needing two instances of content.

Adaptive Design:

• This approach is sometimes associated with different content depending on screen size as well.

• Adaptive Design focuses on certain sizes or devices which doesn’t “future-proof” a site.

2/26/2015 8

Let’s See The Differences Responsive Takes Over

Sometimes it’s easiest to just to see them in action:

Separate Mobile Site:

• http://www.amazon.com, http://m.packers.com/

Responsive Design:

• http://www.microsoft.com/, http://www.roccommerce.com

Adaptive Design:

• http://www.screamingfrog.co.uk/

2/26/2015 9

Notes to Keep in Mind Responsive Takes Over

The mobile world isn’t something you can disregard anymore. But even with its

expansive presence, here are some things to be aware of.

“Mobile” devices are outnumbering PCs but most users own both:

• A “mobile up” mentality is good to have because if it works in small screens it will work in large.

• Page loads are more important than ever with people viewing on the go. However, any increase in

speed for mobile will help your desktop user experience as well.

App usage still dominates “mobile” users’ time:

• Super users of sites enjoy a catered experience that apps provide

Hero Images Just Got Bigger

2 The Trends

That Keep on

Growing

2/26/2015 11

Hero Image Use Continues to Grow Hero Images Just Got Bigger

With responsive there is a lot of focus on the small screen but it also extends as

large as you want to go. With the most common screen size at 1366x768 hero

imagery is getting larger.

• Though file sizes of one large image can be high, having only one request can sometimes take less

time than multiple slideshow images.

• Split half/half imagery is popular now since there is so much screen size available

• Scrolling isn’t a hassle to the end user if the experience of scrolling is enjoyable.

• Parallax has matured and storytelling single page sites are more popular than ever.

2/26/2015 12

The Increased Size of Hero Images Hero Images Just Got Bigger

Let’s review some examples of the various uses

and styles of hero images.

Storytelling / Parallax / Split Imagery:

• http://www.namcoentertainment.com

• http://www.soletrader.co.uk/

• http://www.worldbook.com/

Animations Everywhere

3 The Trends

That Keep on

Growing

2/26/2015 14

Movement Is in and Everywhere Animations Everywhere

With IE8, 9, and 10 no longer being supported by 2016 and Microsoft cutting XP

support, older browsers are being phased out…

Older browsers dwindling further and further means modern HTML5 tools can flourish more and more.

• Video tag support currently needs Flash based fallbacks for older browser like IE8

• Canvas can be used to act like Flash without needing to make the same thing for IE8

CSS3 support in all modern browsers allows us to break out of the world of static:

• CSS3 animations and transforms were once a progressive enhancement but soon will be normal.

• If you are wanting to spruce up a site you might start with these CSS options

2/26/2015 15

Video Isn’t out of the Woods Yet Trends That Keep On Trending

We can now use video with ease and the world is awesome!

Well… not quite.

The mobile world throws a major wrench in the end experience of video as design

• Devices won’t autoplay any video and you can probably guess why: data.

• Video has a placeholder image option but not all devices show the content in the same way

• Many devices don’t play videos inline but instead take you to the native video player

2/26/2015 16

Alternatives to the Rescue Trends That Keep On Trending

All of our hopes you just brought up were immediately crushed in the last slide.

Well… not quite.

GIFs are old but are actually getting a bit of a revival:

• GIF format allows for animation like video but is supported by all browsers and devices

• Cinemagraphs have been gaining popularity at some cost of page load depending on size

Video is really just many images playing in a sequence and Javascript alternatives can help:

• For short animations we can utilize Javascript to create a faux video by switching images.

• The reason video doesn’t autoplay on mobile is the same reason you want to be careful here: data.

2/26/2015 17

Animations in Action Animations Everywhere

Videos are being used for more than just content:

• https://www.paypal.com/

GIFs and cinemagraphs can bring life to a page:

• http://www.pfisterfaucets.com/innovations/slate

• http://lowdi.com/

JS Animations are able to be shown on all devices:

• http://www.naccaphoto.com/

CSS3 Transforms and animations give a nice touch:

• http://www.chicagoautoshow.com

SVGs and the Vector World

4 The Trends

That Keep on

Growing

2/26/2015 19

Refresher on the World of Vector SVGs and the Vector World

With IE8 moving out of the picture SVG (scalable vector graphics) are supported

universally. In the world of responsive this is big news.

SVGs allow creative work to be brought into sites that normal images can’t:

• With HD and Retina going into more devices you don’t have to worry about pixilation since SVGs

are resolution independent.

• Infographics have accessible content without any extra work since all of the text, layouts, etc. are

built with the same language base as HTML. (No need for alt tags and image maps)

• Animations and interactions can be done using the same tools for websites now (CSS/Javascript)

2/26/2015 20

What the Vector World Looks Like SVGs and the Vector World

If you can make it in Adobe Illustrator it can

be an SVG. Infographics, icons, etc. can all

be exported and worked into a site.

Charts, information, statistics, and much

more can be shown in high resolution

across all devices regardless of pixel

density.

Material is the New Flat

5 New

Trends

Surfacing

2/26/2015 22

Skeuomorphism Meets Flat Material is the New Flat

Flat UI can sometimes go too far at the cost of usability. Google released it’s own

design take on Flat and added a bit of skeuomorphism back in.

Shadows, layers, and paper like feel is in:

• Cards or box layouts have grown even more popular

• Shadows can be a really subtle way of distinguishing between layers of content

Menus are sliding in from everywhere:

• Drawers and side rail menus are more popular since mobile is overtaking the web

• Hamburger menu icons are commonly recognized now so even desktops can have hidden menus.

2/26/2015 23

Google is just the start Material is the New Flat

Going 100% flat had drawbacks so you will see

many sites incorporating a bit more into them. Early

on you’ll see it mostly for apps.

• Google Apps and Web Apps like Gmail

• http://super-demo.herokuapp.com/

• http://www.hacu.org/

Interactions Are Micro

6 New

Trends

Surfacing

2/26/2015 25

Microinteractions Interactions Are Micro

It’s a more recent buzz word and good core concept. It has also been around for a

long time.

Wait so what is it?

• The term was coined by Dan Saffer in 2013 and it applies to every product including websites.

• Microinteractions are moments that revolve around one main task or use case.

Okay, so what does that really mean?

• Think about specific tasks you do every day and focus on how the tools you use make it easier.

• Imagine what search was like on Google before autocomplete and suggestions.

2/26/2015 26

This is a trend? Interactions Are Micro

The trend is more on the awareness and dedication to making really good UX and

not just focusing on the big picture.

• Thanks to all of newer CSS, HTML, and Javascript tools available, many sites are starting to make

the process of using their sites enjoyable.

• The amount of websites out there is past the billion mark. The amount of apps available to users of

Android or iPhone are over a million.

• Many sites are adding in personality to make themselves stand out.

• AE Strategy team works with clients everyday to determine best experiences on the big and small

details.

2/26/2015 27

Easy to Use Sites With Personality Material is the New Flat

Some sites go through every aspect of their site

and make a beautiful end product, but you can

also start small and focus on one micro aspect

at a time.

• http://www.weathertech.com

• http://www.tripomatic.com/404

The Internet of Things

7 New

Trends

Surfacing

2/26/2015 29

Everything is Connected The Internet of Things

With connected devices going beyond just phones, stores, homes, and even your

fashion can talk with the web. The Internet of Things is here.

Like with most of these new trends, the core concept is a bit older.

• Kevin Ashton coined the phrase probably as far back as 1999 with introduction of RFID tags.

• The concept is boiled down to computers creating, reading, and sending information without human

interaction.

Is this a design trend or just a technology trend?

• More things are having potential interactivity with the web which means more to design for

• App development for all of these devices are growing to meet needs

2/26/2015 30

The Internet of Things The Internet of Things

Examples of interactions of devices that needed to be designed

and accounted for:

• iBeacon proximity usage such as at the Chicago Auto

Show

• Watches with syncing from phones/apps can get

notifications. How these notifications look need

designing. (Apple vs Google vs Samsung on approach)

• If you are getting data usage from iBeacon, watches, etc.

you might want to give users a visual representation on

related sites.

THANK YOU!

Q U E S T I O N S ?

C O N T AC T Y O U R AC C O U N T M AN A G E R O R E M AI L :

S T R AT E G Y I N F O @ A M E R I C AN E A G L E . C O M

# AE W E B F O R U M