In the old days of the Internet, before smartphones and tablets became the norm, web designers created fixed width pages that worked on the common screen size back then (usually 1024 pixels wide by 768 pixels high.) As mobile devices became more and more common and users started to browse the web from their smartphones, web designers had to adapt and create responsive web pages that load and look good regardless of the screen size.
The idea of responsive design is that a web page can adapt itself to any device someone might be using to access your content. A responsive web page will automatically adjust your web page elements such as the font size and images for different screen sizes and viewports.
Responsive design isn’t synonymous with letting everything at the mercy of the web design Gods and just hope for the best. You still have full control over the elements on your website and can change their width and height as you wish. And, in this article, we’ll show you how to do it.
You might also be interested in WHAT IS THE IMPORTANCE OF BRANDING IN WEB DESIGN?
How to Set the Height and Width of a Web Page
All the elements on a web page come with default width and height that is enough to hold its content. A 10 words long sentence will be wide enough to hold those ten worlds and tall enough to accommodate the font size of those ten words. By setting the width or height of an element, you can control its appearance on a web page and make it as wide or tall as you want it to be. For example, if you would want to make an element 100px wide, you could modify it like this:
1 element {
2 width: 100px;
3 height: 100px;
4 }
Modifying the width and height of the element will mean, of course, that it will take more or less space (depending on the adjustments,) including padding and borders. So, if you would set the width at 100px, the padding and borders will make the actual width at around 126px, for example.
How you set your width and height will influence how the elements will look on the page.
- Setting the Width and Height in Pixels: This means that the width and height will be the same regardless of the device or screen size your web page is displayed on.
- Setting the Width and Height as Percentages: This means that the value will be relative to the height or width of the element. This option works well if you have a background image that you want to scale with the width.
Setting the Width and Height in Responsive Design
With the proliferation of mobile devices, web designers now have to adapt their websites to a wide range of screen sizes. Even when it comes to similar devices, such as a laptop, you can find big differences. For example, the average laptop screen has a resolution of around 1920 x 1080 pixels, while MacBook laptops come with a native 2560×1600 resolution. If you don’t keep these differences in mind when designing a web page, then a browser window may show your page differently for each device. And, that can affect user experience in the long-run.
If you want to create a responsive design that responds to a user’s screen size, then it’s important to set values that never let web page elements go above or below a certain number.
That’s where the min-height, max-,height, and min-width, max-width properties come into handy.
Here’s how they work.
The min-height, max-height properties will ensure that an element is never taller or wider than the value you set. Even when the screen size is big enough for the element to take up more space, it will stay within the settled values.
The minimum width and maximum width properties, on the other hand, will ensure that a web page element is never shorter or narrower than the value you established.
Why Does It All Matter?
Perhaps the main reason you will want to ensure that all the elements on your web page will stay within your set values is to provide an optimised browsing experience. What does that mean exactly?
- Text that you can read without having to zoom in and out;
- Adequately spaced buttons so that you don’t tap on other elements by accident;
- Content that fits the screen size;
- Fast loading time;
- No use of Flash (yes, a lot of websites are still using it.)
A responsive approach not only refines the user experience but also ensures that the people browsing your site see only the most important information. And, with Google making it clear that mobile-friendly sites will be favoured in the search rankings, failing to comply could affect your business.
The truth is that the way text and images are displayed largely depends on the device used. But, regardless of the screen size, these elements should always be readable.
Do You Need Professional Help Designing Your Website
In this day and age, when everyone and their mother have a website, it can be really easy to get lost in the clutter if you can’t keep up with user behaviour and needs. And, as we’ve said it time and time again, there is a lot at stake. A great website is not only your company’s business card, but it can also impact your online marketing efforts, SEO, and ultimately your sales.
We here at Australian Internet Advertising understand the importance of having a website that stands out while also following the norms of great design. Our web designers and developers can create a website that reflects your business in an appealing way, helps you get a higher ranking, and aids you achieve your goals.
Have a look at our portfolio and get in touch now.
