Virtual reality promises massive changes to the way we experience and interact with technology. Despite that, VR has failed to burst into the mainstream. At least so far…
But with cheap cardboard boxes that turn smartphones into virtual reality headsets and intrepid developers pushing for VR standards for web browsers, widespread virtual reality on the web is getting closer and closer.
In this post, I’ll dig into some of the implications of virtual reality on both WordPress and in web design in general.
What Virtual Reality Tech is Available Right Now?
Virtual reality sounds expensive, right? That’s what most people think. But VR tech can be surprisingly affordable, at least if you already have a smartphone. Here’s a brief overview of some of the most popular headset options:
- Google Cardboard – Google Cardboard turns any compatible smartphone into a VR headset for the cost of a few cups of coffee. Yup, about $10-15 can get you your very own VR headset. For a quick overview of Google Cardboard, this YouTube video is a great start.
- Oculus Rift – Best known for being snapped up by Facebook for a couple billion dollars, Oculus Rift creates quality, but expensive, headsets.
- HTC Vive – HTC Vive isn’t cheap, but those willing to shell out ~$800 get what is, by all accounts, an amazing virtual experience.
- Samsung Gear – Samsung Gear is one of the few headsets to rival Google Cardboard in terms of affordability. It costs around $100 but is limited to working with certain Samsung smartphones.
While not an exhaustive list, these are the virtual reality headsets which come up most commonly when discussing virtual reality and the web.
What About Website Support for Virtual Reality?
Getting headsets into the hands of the public isn’t the only problem with virtual reality. We also need libraries to support easy virtual reality implementation for websites. Thankfully, those are coming along well, too.
It’s available in the nightly builds of both Firefox and Chrome and seems to be seeing increasing adoption.
How Do Virtual Reality and Web Design Intersect?
Imagine a site on the scale of Wikipedia with virtual reality. Instead of reading about famous locations, you could actually experience them through virtual reality. It may be a long way off, but that’s where I see the web going…eventually.
But there are other specific areas in which I already see VR being heavily pushed.
Virtual Reality for eCommerce Websites
I don’t know about you, but the only reason I go to physical stores nowadays is because I want to experience a product in person. Amazon might be cheaper and more convenient, but I can actually interact with the product at Target.
But virtual reality could change all that. Imagine being able to experience products on Amazon in virtual reality. You could see it from different angles, watch it in action. It would be incredible.
It’s not just a pipe dream, either. Some eCommerce sites have already moved to incorporate virtual reality into their shopping experiences. Take IKEA for example. Their Virtual Kitchen experience allows HTC Vive users to move through IKEA kitchen displays in virtual reality:
And companies like Prizmiq are already bringing detailed 3D imaging to product pictures. How long until they can offer compatibility with VR headsets for truly immersive product views?
Virtual Tours for Real Estate or Travel Companies
Another major use for virtual reality is all types of tours. Whether for real estate or travel, virtual reality will let websites in these niches offer immersive experiences. Sotheby’s real estate already made waves by offering virtual reality tours for some of its property listings.
I think such uses will only expand as virtual reality gains traction.
Roadblocks to Widespread Implementation of VR and Web Design
Beyond the rather obvious roadblock of VR headset adoption, there are some other things standing in the way of virtual reality.
How do you build a website that functions for both virtual reality headset wearers and regular users alike? That’s the major problem designers will need to cope with. Right now, most implementations involve a toggle to move between modes. But is that really the best virtual experience?
And how do you handle menus? Eye-tracking menus work great for wearable headsets but obviously not for desktop browsers.
I don’t have answers to these questions. But I do know that having to grab my headset and hit a toggle button isn’t a very immersive experience. And it probably would relegate virtual reality to “occasional treat” rather than “daily habit.” At least for me.
We already know how massively important page speed is. Are visitors really going to be willing to wait for large 4K 360 degree videos to load? For special occasions, I think yes. But for everyday browsing? That’s a tougher question to answer.
Virtual Reality and WordPress – What’s There?
Let’s start with the big news, it was just announced that all WordPress.com sites will now support virtual reality images and videos. That means the 409 million visitors to WordPress.com blogs every month now have a chance to be exposed to virtual reality images. I only hope this pushes virtual reality more into the mainstream.
And it’s not just limited to WordPress.com – some developers are already making it possible to add virtual reality to self-hosted WordPress via plugins. I did some digging around the plugin repository and I found two promising plugins:
VR Views helps you embed 360-degree mono-and-stereoscopic images and videos into your WordPress site. It uses Google’s VR Views library, which makes it fully compatible with Google Cardboard.
To handle issues with responsive design, i.e. users who don’t have Google Cardboard, the plugin defaults to a “magic window” that will work on any desktop or mobile browser, regardless of hardware. The “magic window” allows readers to move their screen around to view the image in 360 degrees of glory but lacks true virtual reality. Here’s a screencap of what it looks like on my web browser:
To create your virtual reality content, you can use any device that is capable of capturing 360-degree videos or images. And once you have your content, implementing it is as easy as adding a shortcode to your WordPress site.
WP-VR-view is another plugin which lets you add Google Cardboard compatible virtual reality media to your WordPress site.
And just like VR Views, it degrades considerably for anyone who doesn’t have virtual reality hardware:
Smartphone users can easily move between regular mode and Google Cardboard mode to take advantage of their VR hardware.
Where Can Virtual Reality and WordPress Go From Here?
I would love to see virtual reality product views for WooCommerce. In fact, Michael Tieso has a post delving into this very topic. He’s even created some experimental implementations of virtual reality for WooCommerce. And while he cautions they aren’t to be used on production sites, savvy devs may want to delve into his GitHub to see what can be done.
I also hope that, with the inclusion of virtual reality for WordPress.com blogs, virtual reality images and videos make their way to self-hosted WordPress without the need for a plugin. It seems like the technology is there, we’re just waiting for it to be accessible to everyone!
Broaden your audience, improve user experience and future proof your website.
I wonder what sort of device you’re reading this on? A laptop? Maybe you’re at your desk reading the words on a cinema-sized display. Or – perhaps even more likely – you’ve got a smartphone in your hand and you’re thumbing through on your way to another meeting.
When you look around at the incredible plethora of devices on the market these days it’s not surprising that current market research shows mobile internet usage is set to grow massively by 2015 with an increase of 16% from 2010. What is perhaps more interesting is that this means the number of mobile internet users will overtake that of desktop users during this time.
Undoubtedly this change in the way people are consuming online information and viewing websites means we need to be considering how we engage with them to offer the best online experience for our brands and services. So what can we do to make this happen?
Back in the day…
When mobile phones started to become internet enabled (remember WAP?) people wanted to access certain information on the move. Checking train times, the weather, or keeping up with the footy scores on a standard desktop site meant difficult navigation, large slow downloads, big bills and an all-around poor user experience.
Many businesses realised the need to cater for mobile users, and until fairly recently many opted for a separate “mobile” version of their website. You may have noticed a few yourself. You know, the ones starting with “m.somethingorother” instead of “www”.
These mobile sites are completely separate from their larger desktop siblings and have reduced functionality and content. This toned down version means users are only able to load and use the very basic of site content and functionality, and ultimately miss out on the information they may be expecting to find. Separate mobile sites come with logistical problems too – two sites equals two things to design, build and manage. That means ongoing cost and time implications and all for a less enjoyable experience for the user. Not a great solution is it?
Another issue with mobile sites is what mobile device do you build them for? There are too many different screen sizes and differing capabilities to do them all so which do you choose? How many would you need?
Well, with Responsive Web Design the answer is easy.
What is responsive web design?
Responsive Web Design is a collection of techniques that allow a website to flex and adapt to the size of screen it’s being viewed on. Someone opening your site on a small smartphone will be shown the same site as the person opening it on their laptop but the site will have noticed the constraints and automatically reformatted to give the user an experience better suited to their device. No more loading a huge website and having to zoom in and out to find the content you’re looking for. Responsive web design takes into account interaction too and makes your site easier to use by acknowledging and integrating things like touch screens to aid navigation.
Why not go and have a look at some of your favourite sites using http://responsive.is/ to see if they’re using a responsive approach. I’ll wait for you to come back. Here’s one to get you started http://responsive.is/webstarsltd.com.
As the web continues to evolve it’s becoming ever more clear that the main driver to a website is not fancy-pants eye candy, but solid, valuable, and shareable content. Responsive design explores the implications of limited screen real estate and ease of access not only to structure but forces us to consider our messaging and content on-site by adopting a ‘mobile first’ strategy.
“There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.” – Luke Wroblewski
Previously we designed for desktop users first, and a mobile version was either a far too minimal functional experience or we were trying to force too much of our desktop site into it unnecessarily. Deciding what is most important to a viewer on a mobile device with limited bandwidth, processing power and screen size means we get rid of anything diluting our main purpose or message and therefore, across all sizes of the site, we are focused and concise in offering a better experience to our customers.
“…when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish… That’s good user experience and good for business.” – Luke Wroblewski
So now (hopefully) you understand what responsive web design is, perhaps we should have a run down of the benefits.
Future proofing. Responsive sites work well across the multitude of existing devices on the market. It’s a safe bet it will for considerable time to come.
Better, faster, smarter user experience. Optimising your site no matter what the user chooses to view it on makes their life easier. Happier customers mean a happier business.
Cost Effective. Responsive sites take a little longer to put together, but they survive longer and the unified approach means management, support and upgrades only need be applied to one place. That saves time and money.
SEO optimised. Managing SEO for separate mobile and desktop sites is hard and doesn’t produce great results. Google actually recommends a responsive approach to combat these problems and a consolidated view of your results means more focus.
Improve conversion rates. An optimised and consistent site, no matter what platform it’s viewed on, provides a better experience for the user which is more likely to lead to them engaging with you than going elsewhere.
We ♥ responsive web design
Responsive web design isn’t a trend any more, it’s a must. Being able to offer consumers a beautifully optimised experience regardless of their choice of device means you’ll have expanded the reach of your service and the chances you have of engaging with individuals. The long lasting nature of this approach is incredibly valuable and the cost effectiveness is a clear advantage.
Here at My Webs we are passionate about responsive web design, we could bang on about it for ages if you’ll let us. If you fancy a chat about it get in touch. We’d love to help you stay ahead of the game.