What is Responsive Web Design?
Is your website mobile ready?
In the early days of the internet you had Hyper Text Markup Language otherwise known as HTML. HTML is the code websites are built on. At the time it was considerably basic and not much could be done with it. Along came Cascading Style Sheets and JavaScript, this brought in style and structure to websites and for years was fine. Then came the mobile shift. As more people started viewing websites on mobile, these desktop websites would not load properly, and this spawned the m. mobile website trend. The downside to this was you were effectively making 2 versions of your website.
This concept worked for a while however, this was exceptionally impractical and as screens got bigger, slimmer, wider, taller and touch screens became more responsive. How do you solve this problem? Say hello to Responsive Web Design!
Get A Free SEO Report Today!
Bootstrap
Using a code called “boot strap” a websites pages are broken up into columns and rows. You can have unlimited rows but only 12 columns. By placing your content correctly inside this layout, as the page scales down the code will adjust and correctly display your website for any screen size.
Rows
Rows can be any height and are unlimited. A row starts as a <div> tag and has a class tag applied to look like this <div class="row">. Inside this you will place your columns as this will let the code know that this row is different to the ones above and below and responds differently.
Columns
Next are your columns. The columns class can be used up to 12 times to make 12 columns.
You can use 1-12 times providing the sum always equals 12. For example,
<div class="column-12"> This column will fit the whole row as it's 12 wide
<div class="column-4"> <div class="column-8"> Here we have 2 columns, 4 wide and 8 wide to make 12
What if it doesn't equal 12?
<div class="column-6"> <div class="column-7"> The total columns now equal 13 (6+7). By doing this your website will have unexpected results depending on the text, video and widgets inside this code.
.png)