These days, every single website is responsive, which means that we design everything to look good no matter what sized device that it’s being viewed on. When we first started out building websites, there were only a few standard sizes for screens, then came along phones and tablets, and now we have every screen size available that you can imagine. It is our job to build the site so that it looks good, no matter what the dimensions.
We are so used to it now that we probably don’t even notice that a website responds by expanding and contracting to the size of the screen so that it’s easily viewed. What may have a lot of space and can easily fit side by side on a wide desktop monitor, will respond and be stacked on top of each other on a tablet or phone screen. When we are developing a website, we check every design on various device sizes so that everything looks good and is clearly legible for your viewers.
Flexibility is the key word in building today’s websites. Being that this method of programming varies on screen to screen, we understand how designs lay out differently on in-between sizes. When we start a website layout with a design draft, it is a static image of how we plan for the design to look, an approximation of the average desktop monitor. This gives the client the chance to see the general idea of the final product, and what we base the website on, but exact pixel perfect placement may adjust a bit after it’s built because every screen size is different.
Once we move onto development, there are many moving parts and elements that we program with codes and test on different devices. For example, a navigation menu may only take up 50% of the width of a large desktop screen, but on a smaller one, it may break up into two lines, so that it’s clearly visible there too. These are called “break points” so that the website knows the width of the screen and responds accordingly without being cut off. And this is what allows us to have things seamlessly flow between one screen size and another, have text always be legible and images at a size that can be easily viewed.
