Yes, a toaster. That was not a typo. There are already smart houses with WiFi panels and LED screens in every room and kitchen appliances with display screens that allow you to use WiFi to access apps, and social media accounts just like a smart phone would. And sooner than later, they will be in a lot more households. If you’ve already adapted your business’s website for multiple sized devices, then you’re on the right track and will be ready for the coming stages in website evolution. If you haven’t upgraded your website to a newer responsive based frame, then you have a little catching up to do.
First things first. The concept of responsive design has been around for years, but took off in 2012 and was a huge topic in 2013. By now, everyone has heard the term “responsive” in regards to websites and web design. So what exactly does that mean? Responsive simply means that your website will adapt to whatever device you are viewing it through. Any website designed and built today will (or should) be responsive, but there are many different levels of a responsive design, so understanding them will help you know what you need before you start a design or redesign project.
Responsive Ready: All well-built websites these days are responsive ready right from the get go, but that doesn’t mean it’s going to automatically look how you want it to look on a phone or Tablet. “Responsive ready” just means that the website is built on a fluid template structure instead of using fixed dimensions or absolute positioning. The fluidity and ability to re-position elements makes it capable of being responsive if you choose to customize it further.
For example, take our home page. It’s fluid, so it adapts to individual screen sizes – so if you’re viewing it on a small 15 inch monitor, the content area will look(relatively) the same as if you’re viewing it on a larger 22 inch monitor. Each element takes up a percentage of the content space instead of a set width.
Webpage elements divided by thirds.
Regardless of the desktop monitor size each element will take up one third of the content space.
Webpage elements divided by halves.
Regardless of the desktop monitor size each element will take up one half of the content space.
Before responsive websites, design was built on tables, had fixed widths, absolute positioning, etc. So the same elements on our home page could be set to exactly 300 pixels for each “third” or 450 for each “half. When viewed on a smaller screen, you would see a scroll bar across the bottom of the page, because the entire page doesn’t fit on the monitor.
The exact opposite can still happen too. Ever gone to a website and it looked absolutely tiny compared to the size of your monitor? The entirety of the home page fits in a neat little rectangle top center. The following is a screenshot of a really, really… really old site. I think it was built in 1999. That’s prehistoric for a website. Maybe even prehistoric dog years.
In spite of the website, this is still a great apartment complex. In real life it’s gorgeous. Very unique floor plans, beautiful appliances, a rooftop garden and some of the most incredible views of the Seattle Space Needle, Gasworks Park, Lake Union, downtown Seattle Skyline, and Capitol Hill. I did use to live there, and to this day it’s my absolute favorite place I’ve ever had the pleasure of living. But you’d never know any of that by the website, and they are significantly holding themselves back by something that is very simple to fix. The entirety of the site is inside this small content box, and every page is almost the same.
Choosing how you want to adapt your business’s website depends on what you or your site visitors will need in terms of functionality. Do you need a completely separate set of features for a mobile version of your website? Do you just need a reservation system for people on the go? Maybe just a video library or blog for your users? Whatever it is your users will need, you need to adapt accordingly.
Once you get comfortable with how responsive design works, it will be easier to adapt to future technologies. We already have kitchen appliances with display screens, but sooner than later, more and more people will have access to these devices, and businesses that are prepared for that will be ahead of everyone else. Soon you will be asking the question, what does my website look like on a toaster?
[cvg-gallery galleryId=’12’ mode=’showcase’ limit=’5′ /]
These videos were created and published by Corning to express their vision of the future in regards to the glass industry, but knowing that other industries are developing these types of interactive technologies can help you prepare company’s digital compatibilities for the future.
“Interactive glass surfaces, seamless delivery of real-time information, and technologies that enrich your life – that’s Corning’s vision for the future. And it is a world enabled by glass. Explore how highly-engineered glass delivers extraordinary benefits to everyday products.” – Corning Inc