Responsive Web Design

Joshua Neufeld | Mar 13th 2020

As of April 2015, Google announced that any Web Designs that are not considered “Responsive” will no longer be listed on Google search engines. Notably, those websites searched on a phone or tablet. This is alarming news as the following statistics show us why it is so vital that your business show up when searched using a mobile device:

  • More than 55% of internet access is done from a mobile device.
  • More than 90% of North American adults own a mobile device/cell-phone. Of that, more than half are “Smart Phones” intended for internet access.
  • The average smartphone user will check their phone 150+ times a day.
  • It’s estimated that people using search engines from their phones will increase from 800 million searches a year to almost 2 billion in the coming years!
The Code

So! Can you really handle losing all that business? Take some time and increase your awareness by improving your websites response to small screens. In fact! We’re going to make life easy for you and supply you with some CSS that will help break up your site into a responsive state. This will tell Google your concerned about your clients online experience. With just a little bit of knowledge for how to operate CSS, you can incorporate this into your website and make it display much nicer both on a browser, as well as on a mobile device.

/*——————————————————*/
/*—–PRE PROGRAMMED RESPONSIVENESS——————–*/
/*——————————————————*/

@media screen and (min-width: 767px)
{
.split-page-left {float: left; display: inline; width: 48%; margin-bottom: 25px;}
.split-page-right {float: right; display: inline; width: 48%; margin-bottom: 25px;}
.triple-column-left, .triple-column-center {float: left; width: 32%; margin-right: 2%; display: inline; margin-bottom: 25px;}
.triple-column-right {float: right; width: 32%; display: inline; margin-bottom: 25px;}
.four-column-one, .four-column-two, .four-column-three {display: inline; width: 23.5%; float: left; margin-right: 2%; margin-bottom: 25px;}
.four-column-four {display: inline; width: 23.5%; float: right; margin-bottom: 25px;}
.two-third-width {float: left; display: inline; width: 64%; margin-right: 2%; margin-bottom: 45px;}
.one-third-width {float: left; display: inline; width: 33%; margin-bottom: 45px;}
}

@media screen and (max-width: 767px)
{
.split-page-left {float: left; display: inline; width: 100%; margin-bottom: 20px;}
.split-page-right {float: left; display: inline; width: 100%; margin-bottom: 25px;}
.triple-column-left, .triple-column-center, .triple-column-right {float: left; width: 100%; margin-bottom: 20px; display: inline;}
.four-column-one, .four-column-two, .four-column-three, .four-column-four {display: inline; width: 100%; float: left; margin-bottom: 20px;}
.two-third-width, .one-third-width {float: left; display: inline; width: 100%; margin-bottom: 20px;}
}

Joshua Neufeld
Latest posts by Joshua Neufeld (see all)