[vc_row][vc_column border_color=”” visibility=”” width=”1/1″][mk_fancy_title style=”simple” corner_style=”pointed” tag_name=”h3″ border_width=”3″ size=”22″ line_height=”24″ color=”#393836″ font_weight=”inherit” letter_spacing=”0″ font_family=”none” margin_top=”10″ margin_bottom=”10″ align=”left” responsive_align=”center”]
[/mk_fancy_title][vc_column_text responsive_align=”center”]Since humanity came to be, there have been a select few essentials that our species truly require to sustain life. One need not be an expert in survival to name the basics; food, water, and shelter immediately come to mind. Times have changed though, and in order to not only survive, but thrive in 2016 you need something more. Something that is the modern day equivalent to fertile soil and clean water. You, friend, need a website. And not just any website, mind you. You need one that’s responsive (that’s some interactive designer jargon for a site that functions properly across desktop, tablet and mobile platforms), and one that provides your users with a smooth and enjoyable experience. Are we exaggerating when we call it a basic human necessity? Well yes, but if you want your brand to not only remain relevant but also excel, your website should be darn near the top of your priority list.
But even with a superbly designed, responsive site that allows users to access your content quickly and easily across multiple platforms, your site still may not be standing out in the crowd. As best practices in the art of effective web design become increasingly well-known, many sites, though perfectly sound both in functionality and design, may find it difficult to make a lasting impression with their users. This is where the savvy UX designer injects some life into their project with some visually engaging and highly interactive content with Flash or HTML5.
“Injecting the HMTL how with a what interacting with where?” you might be asking yourself if you’re both unfamiliar with the two platforms and also have some difficulty structuring questions about the technical aspects of web design (which we totally understand — that’s exactly how we phrased the question to Evan, Prodigal’s resident interactive design guru). Evan gave us a rundown in layman’s terms, as well as the advantages and disadvantages of both, and why he prefers one to the other for the sites he builds.
Whenever you encounter interactive animation on a web page, it was most likely produced with either Flash or HTML5. Both have similar functions and features, and when used properly they can generate an exponentially more memorable browsing experience by incorporating highly styled visual elements with functional, clickable items and links. Flash is the older of the two platforms, and was at one point widely used to great effect by a variety of pages across the internet. Complications arose, however, when a few popular mobile platforms failed to support Flash, and combined with the rapid surge in mobile web browsing the last few years, made put it at a huge disadvantage.
The (relatively) newcomer, HTML5, does just about everything the former product does, but does so with actual code. One of the primary advantages of this is that text that appears on your page via HTML5 is indexed, and therefore can be found by can be found by a search engine. This is good news, as increasing your search engine ranking can vastly improve the chances that a potential customer views your site. Combine this with the fact that HTML5 is extremely mobile friendly (huge in 2016 as Google says the number of mobile searches it receives surpassed desktop) it’s clear why so many designers and animators are making the jump to the newer platform.
Jeremy, our animation maestro, recently created a fully responsive and pretty darn cool interactive tour for Willoughby Supply Company’s website. The core site, made by Evan, was already superb. Superb can always be better though, and to make the information more memorable and make Willoughby resonate with visitors to its page, it was decided to add the interactive tour, made with HTML5. This tour also allows users to learn more about the Willoughby Supply brand, what makes this company unique and position it as a leader in the roofing and siding supply industry. Users with a keen eye will notice subtle touches and additions by clicking around and discovering the elements they can interact with. These extra little tidbits may not seem like they make a huge impact on the overall user experience, but often it is the smallest details that add up to vastly increase the quality of any creative work.
Now, because it was done in HTML5, the whole thing is fully responsive, so what you see on your desktop is also what you see on your phone or tablet. With Flash, that would never be possible. Don’t get us wrong, Flash is a great platform that can be utilized to make some incredible work, but in the world of user experience, optimization and ease of use is always first priority. HTML5 allows designers to put the user closer to the experience with much more flexibility, and when the engagement with your content increases, so do mew visitors, return visitors, and eventually sales.
Ultimately, the aesthetic you hope to achieve with your site is up to you. Some may find such content unnecessary or not entirely in line with their visual identity. Those who have the desire and opportunity to take advantage of the myriad of opportunities these platforms allow, however, should absolutely do so. Worst case scenario? Someone has too much fun on your site.
Check out the embedded example below to see what we did for the Willoughby Supply site.[/vc_column_text][/vc_column][/vc_row][vc_row fullwidth=”false” attached=”false” padding=”0″ visibility=”” bg_type=”” parallax_style=”” bg_image_new=”” layer_image=”” bg_image_repeat=”” bg_image_size=”” bg_cstm_size=”” bg_img_attach=”” parallax_sense=”” bg_image_posiiton=”” animation_direction=”” animation_repeat=”” video_url=”” video_url_2=”” u_video_url=”” video_opts=”” video_poster=”” u_start_time=”” u_stop_time=”” viewport_vdo=”” enable_controls=”” bg_override=”” disable_on_mobile_img_parallax=”” parallax_content=”” parallax_content_sense=”” fadeout_row=”” fadeout_start_effect=”” enable_overlay=”” overlay_color=”” overlay_pattern=”” overlay_pattern_opacity=”” overlay_pattern_size=”” overlay_pattern_attachment=”” multi_color_overlay=”” multi_color_overlay_opacity=”” seperator_enable=”” seperator_type=”” seperator_position=”” seperator_shape_size=”” seperator_svg_height=”” seperator_shape_background=”” seperator_shape_border=”” seperator_shape_border_color=”” seperator_shape_border_width=”” icon_type=”” icon=”” icon_size=”” icon_color=”” icon_style=”” icon_color_bg=”” icon_border_style=”” icon_color_border=”” icon_border_size=”” icon_border_radius=”” icon_border_spacing=”” icon_img=”” img_width=”” ult_hide_row=”” ult_hide_row_large_screen=”” ult_hide_row_desktop=”” ult_hide_row_tablet=”” ult_hide_row_tablet_small=”” ult_hide_row_mobile=”” ult_hide_row_mobile_large=””][vc_column border_color=”” visibility=”” width=”1/1″][vc_raw_html]
JTNDaWZyYW1lJTIwd2lkdGglM0QlMjIxMDAlMjUlMjIlMjBoZWlnaHQlM0QlMjIxMjAwcHglMjIlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMjBzcmMlM0QlMjJodHRwJTNBJTJGJTJGd3d3LndpbGxvdWdoYnlzdXBwbHkuY29tJTJGaHlwZSUyNTIwaHRtbCUyRndpbGxvdWdoYnkuaHRtbCUyMiUzRSUwQSUzQyUyRmlmcmFtZSUzRSUwQQ==
[/vc_raw_html][/vc_column][/vc_row]
