Mobile & More: Preparing for the Latest Design Trends

Transcription

1 February 26, 2015 Mobile & More: Preparing for the Latest Design Trends

2 LATEST TRENDS Responsive Takes Over Material Is the New Flat Hero Images Getting Bigger Interactions Are Micro Video in the Background The Internet of Things SVGs and the Vector World

3 In Case You Were Wondering 0 Introductions

4 In Case You Were Wondering Who are you? Nick Goodrum Director of Front End Development 2/26/2015 4

5 The Trends That Keep on Grow ing 1 Responsive Takes Over

6 Responsive Takes Over Responsive, Responsive, Responsive, and Adaptive 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. 2/26/2015 6

7 Responsive Takes Over Why Is Responsive Winning? 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 7

8 Responsive Takes Over Let s See The Differences Sometimes it s easiest to just to see them in action: Separate Mobile Site: Responsive Design: Adaptive Design: 2/26/2015 8

9 Responsive Takes Over Notes to Keep in Mind 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 2/26/2015 9

10 The Trends That Keep on Grow ing 2 Hero Images Just Got Bigger

11 Hero Images Just Got Bigger Hero Image Use Continues to Grow 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/

12 Hero Images Just Got Bigger The Increased Size of Hero Images Let s review some examples of the various uses and styles of hero images. Storytelling / Parallax / Split Imagery: /26/

13 The Trends That Keep on Grow ing 3 Animations Everywhere

14 Animations Everywhere Movement Is in and 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/

15 Trends That Keep On Trending Video Isn t out of the Woods Yet 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/

16 Trends That Keep On Trending Alternatives to the Rescue 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/

17 Animations Everywhere Animations in Action Videos are being used for more than just content: GIFs and cinemagraphs can bring life to a page: JS Animations are able to be shown on all devices: CSS3 Transforms and animations give a nice touch: 2/26/

18 The Trends That Keep on Grow ing 4 SVGs and the Vector World

19 SVGs and the Vector World Refresher on the World of Vector 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/

20 SVGs and the Vector World What the Vector World Looks Like 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. 2/26/

21 New Trends Surfacing 5 Material is the New Flat

22 Material is the New Flat Skeuomorphism Meets 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/

23 Material is the New Flat Google is just the start 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 2/26/

24 New Trends Surfacing 6 Interactions Are Micro

25 Interactions Are Micro Microinteractions 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/

26 Interactions Are Micro This is a trend? 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/

27 Material is the New Flat Easy to Use Sites With Personality 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 /26/

28 New Trends Surfacing 7 The Internet of Things

29 The Internet of Things Everything is Connected 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/

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. 2/26/

31 THANK YOU! Q U E S T I O N S? C O N T A C T Y O U R A C C O U N T M A N A G E R O R E M A I L : S T R A T E G Y I N F A M E R I C A N E A G L E. C O M # A E W E B F O R U M

32