Website Response Needed
Responsive design is a way used to create websites that look good no matter the platform that a user is looking at the site on.
One of the most annoying things is using an iPhone or Android phone to view a website, that will not load or display properly on the screen.
We have all experienced it. You go to a site and the same site that loads on a laptop or PC is loaded onto the five-inch screen. Then you either must zoom in to see the images and links. Or even worse, when you try to load a site on your phone, and everything is blown out of the frame.
This typically happens because the developers of a website created pages with specific, or fixed, dimensions. There is nothing wrong with using fixed dimensions to create a website if the only traffic you expect to get on the site is from a specific device, like a pc or laptop.
If you plan on getting traffic from mobile devices, it is probably a good idea to either create an alternative version of your site using fixed elements, for mobile devices. The other alternative is to create a website using responsive design.
Take one of my sites, for instance. The image below www.gregwehner.com looks like on a desktop.
When the site is viewed on a smaller screen, but not quite a mobile screen, elements begin to shift around.
Things shift around even more on the site when it is viewed on a mobile screen.
Responsive sites use containers that are filled and rearranged based on the size of a screen. The outcome is a site that can be pulled up and look professional, whether the user is on a pc, laptop, tablet, or cellphone.
Interaction-Design.org published an article about responsive design.
“Responsive Design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes,” the article read.
These designs allow a single set of images and elements to be used regardless of the size of the screen.
To make optimal use of responsive design that flow “like fluid to fill all ‘containers’,” Interaction-Design.org said, widths and heights of images or containers should be set in percentages instead of pixels.
It is also recommended that developers use scaler vector images, or SVGs, that can be viewed on all screens without losing quality.
The goal of a responsive website is to have a site that can expand or shrink, regardless of the size of the screen. The size of the screen cannot be emphasized enough. The developer either creates a few sites for various sizes of screens or one site that can automatically resize.
When testing a site in development or testing whether a site you frequent is responsive or not, you can pull the site up in Internet Explorer or any other popular browser and manually adjust the size of the window. If the site begins to stack elements on top of other elements in an orderly way, the site is more than likely responsive.
WordPress has several themes for free that are responsive. There are also several available that can be paid for.
W3 had the greatest quote when it came to describing what responsive design. The site said, “Responsive web design is about creating web pages that look good on all devices.”
References:
https://www.interaction-design.org/literature/topics/responsive-design
https://www.w3schools.com/html/html_responsive.asp