Next Round of The ‘Modern’ Website

It seems to go in phases. Every year or so, we see certain characteristics and techniques emerge that constitute a ‘modern’ website. Right now, things like large photo backgrounds, infinite scrolling, fixed header bars, and of course, responsive layout come to mind.

But rather than doing what everyone else is, we like to look ahead to what the next round of the modern website is likely to entail.

1. Microinteractions – According to the website that bears it’s namesake, “microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.” Picture this: You find yourself on a website eager to sign up for updates on a new product, you enter your email address in a field to stay up to date with the latest product information. However, you accidentally enter your email wrong. Because you’ve entered an invalid format (think: example@example/com), instead of popping up an error message, the email box will shake letting you know there is something wrong. This is a microinteraction. It is simply some sort of feedback to the user, making them aware that they need to take a certain action.Microinteractions are good for: accomplishing a single task, connecting devices together, controlling an ongoing process such as music volume, adjusting a setting, viewing or creating a small piece of content like a status message, or turning a feature or function on or off.

1. Convergence of Native and Web Apps – We are beginning to see more of  a combination between native apps and web apps. Historically, you didn’t have all the capabilities needed to make the experiences on each [web and native app] similar. But now, with HTML5 the number of APIs and integrations available make the capabilities within a browser or a web app much more robust. (Reference this post for more on the differences between native and web apps).A few API’s worth looking into.
   1. 1. Geolocation-  An API that allows Web Apps to request a user’s location which can be used to get directions, find a local business, or just to show a map of the user’s location.
      2. Vibration – This API allows a developer to programmatically produce a vibration. This can be used to physically and visually alert the user with notifications.
      3. WebSockets – This API makes real-time Web Apps possible. Google Docs takes advantage of this by allowing multiple users to work on the same document with almost no delay. Flash had a similar feature but it was more complex and more importantly, it did not work on mobile.
2. Single Page Applications & Single Page Websites. “A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page.” Think of it this way: when you go on most websites now, when you click on any link it takes you to a whole new page. On a single page app or website, there is more of an animation-based transition between changing views or pages. Apple does it well and often in launching a new product. Their current overview of the Mac Pro takes you on a journey through the machine by scrolling or tapping to change views, almost like shifting slides.

These are just a few of the newer web characteristics that we are excited about. What do you think the next phase of the ‘modern’ website will bring? Let’s chat!