As the CEO of one of the longest lasting Responsive Website Design and Inbound Marketing Agencies on the planet, I wanted to explain in the simplest way possible what Responsive Website Design means in Plain English. After all, I started my business way back in 2002 to do just that, explain all sorts of web technologies and Inbound Marketing techniques in a way you can understand.
To begin, let’s talk about how HTML started and the basic HTML table.
HTML Tables work much like an excel spreadsheet where every cell can have content and be set to either a specific width or to a percentage of the width of the page.
Table cells can also be merged so for instance a center cell can take up two rows while the outside cells could have two rows in them.
Tables can then have tables within cells.
The overall problem with HTML tables is that they can not be placed in an exact position on a page and also they are not movable or flexible.
Everything needs to be set up in a linear fashion from left to right row after row, column after column.
Then came CSS or Cascading Style Sheets.
At first CSS was only used to format elements in a page, be it a table cell or a specific “class” or style for a set of words.
As CSS grew in popularity, it also grew in functionality. The ID tag and DIV tag came along and suddenly we could design and position a section of a page with CSS.
Now to explain Responsive Website Design.
For a while these past few years and even today, many people as confused as to what “mobile compatible”, or iPhone, Tablet or smartphone compatible website design really means.
Let’s talk about the real main difference between viewing a website on a desktop, smartphone or tablet.
Think about what the real difference is. Isn’t it really just the screen width? The dimensions of the viewable area of the web browser you are using. Yes, your smartphone runs a web browser just like your desktop computer does.
So responsive website design isn’t about making your website “phone” or “tablet” compatible, its really about making your website RESPOND to the screen width of the browser it is being viewed on.
So, HOW do we create ONE website design that RESPONDS to the screen width?
The secret is a command is CSS called FLOAT.
Imagine three big bubbles in your bathtub. Now imagine those three bubbles lined up are three columns of text on your website. And remember the bubbles are FLOATING as bubbles should. The bathtub is your desktop widescreen monitor.
Now imagine that we pour the bubbles into a tall narrow glass. The glass being tall and skinny like your iphone or smartphone.
What do the bubbles do?
They get less wide and float ON TOP of each other vertically, instead of floating next to each other. This is the basic concept of Responsive Website Design. Your content “floats” and your columns of content move, stretch and reorganized themselves based literally on how much space or screen width they have to work with.
But what about other aspects of the design that we might want to CHANGE when viewed on a mobile phone or tablet?
Enter the CSS Media Query.
As a web design and development company, we add CSS Media Queries to our design that can CHANGE the font size and even color when your website is viewed on a different device.
The bottom line here is that mobile compatibility and responsive website design have more to do with modular elements that can move, “float” and respond than with large static blocks like gigantic images or blocks of L to R table cells.
We would love to work with you to transform your online presence to a responsive website design and we will help you choose the best Content Management system or CMS (Joomla! WordPress Shopify BigCommerce Magento) to make your brand and message readable and interactive on all devices.
[call_to_action button_text=”Schedule Your Responsive Consultation” text=”Future-Proof your online presence with Stern today!” color=”green” size=”large” url=”/denver-request-a-website-marketing-design-quote/” target=”_self” position=”right”]