How to design your website for PCs and projectors
Web design is all about creating a design that will make a website effective for your intended audience. The problem is that audience has greatly expanded since smart phones, projectors and touchscreen devices with their own resolutions have come into play.
The problem of designing for these types of pages was already complicated enough with 4:3, 16:10 and 16:9 computer monitors.
Let’s address how you can create something that works for both computers and projectors while introducing CSS3 @media queries that can be used for other devices and resolutions.
Designing for Different PC Monitors
While 16:9 is currently the industry standard for monitors and thus the most popular choice, you still have a variety of other setups like 4:3 and 16:10 to deal with. Your layouts may range in resolution from 480×300 to 3840×2160 pixels.
While this gives a predictable amount of possibilities, designing one layout that excels with every type of layout is nearly impossible. You will always have some unused space or things simply won’t flow as well as they could.
Getting around this requires that you utilize the following principles that coincide with those of a responsive design layout:
- @media Queries – These are your bread and butter. They will allow you to define the styling for elements based on the screen region that the browser uses. You can use selectors like min-width, max-width or the type of input device detected to change your entire layout.
- Fluid Measurements – Don’t use ‘px’ anymore. Always try to use percentages when you create your fluid content. Calculating them is as simple as calculating your target dimension divided by your current maximum dimension.
- High-quality and low-quality images – Bandwidth can be a concern when you’re designing for different ends of the resolution spectrum. Get comfortable with having multiple qualities of images for people with better or worse computers than your target audience.
- Design from Small to Large – Start by designing for your smallest resolution with the most awkward aspect ratio. This will allow you to start small and with the minimal amount of layout you need before moving on to something more feature-rich.
Designing for Projectors
Keep in mind the designs for projectors; and its resolution in a high quality projector screen. Projector-compatible layouts are somewhat different from traditional layouts designed for computers in that projectors tend to have a higher base resolution. Their aspect ratio also tends to be 4:3, which means that most high-resolution layouts may not be ready for them.
The best way to design for projectors is to think of them like big, awkward display devices. You need to still have high-resolution media while thoroughly using @media queries to make things work correctly.
One caveat to keep in mind is that the “@media projection” query isn’t as reliable as it sounds. Few browsers support it, and they tend to do so only in full screen mode This makes it better to design purely for a high-resolution 4:3 aspect ratio.
Taking It One Step Further
The principles outlined here can be abstracted and applied to other media devices. You can use the min-width @media query coupled with min-height or rely solely upon the type of input device to display a mobile-optimized layout.
With the right amount of testing and a greater reliance upon the @media queries available to you, your web layouts should be more pliable and work better on a majority of devices.