What is Responsive Design?
You’ve been working hard with your design company to come up with a look and feel for your website that really looks good.
Your website might look great on a desktop computer, but if you look at the same page on a phone, it might look terrible — the fonts too small to read, the three column layout you wanted looks all squishy, or your page is so wide you have to scroll left and right to see parts of your webpage. That’s when you realize you should have ordered a responsively designed website instead of a statically designed website.
Way back when handheld devices first got browsers, the solution to making your website look good on a phone was pretty clunky. A second website was created, designed to look good and be readable on a tiny device. So, instead of 3 columns, side by side on the small browser, the paragraphs could be shown as 3 rows on your phone. These second websites used web addresses like m.yourwebsite.com You’ve probably seen some of these sites.
That worked for a while, but then computer companies started to make all kinds of devices — tablets, big and small. Smartphones, big and small. Devices which were long and skinny, or short and fat, or almost square.
The designers responded with a new idea. Make the design of the website so flexible that it will look just right on any device.
This meant changing the way websites are made. Instead of setting picture widths with fixed measurements like 2 inches by 3 inches, web designers began to set picture widths in percentages. Paragraph widths were also set with percentages. If a picture is set as 30% of the page width on a large computer, the picture will be bigger than the same picture set at 30% of page width on an iPad. On a phone, the picture width is often set at 100% of the phone width because the phone is very small, and if the picture was smaller than the full width of the phone it would be hard to see on a phone.
Percentages of what?
The device width. You might have a desktop which is 22 inches wide. You might open a browser which is 18 inches wide. If you have a page with 3 columns, those columns could be set to 33% of the total width of the browser. On a responsively designed website you can make your browser smaller, and the columns will just get thinner, and the text will re-flow to fit.
Text or Copy
Text can also be sized in relationship to the device width. Text can also change size for different devices. Text on phones is usually bigger in relation to the device because phones can be very small, and you want to have your text readable.
Right now, in 2016, more people are viewing websites on handheld devices than on big computer screens. Responsive design helps you to be seen by everyone. Also, if your website is not designed responsively, Google and other search engines will know that, and they will penalize your search ratings.
This is a simple overview but there are many other things that go into responsive design. Contact us if you have questions about responsive design for your new or existing project.