Some designers still heavily factor in screen sizes into the website design process. Some designers still think in pixels, but things have changed a lot in the last few years. The modern designer must put content at the forefront of the creative process.
Does Size Really Matter?
Most people agree size matters, but over the last decade, technological advances have changed the game. Some spent countless hours designing to fit all the different screen sizes and trending devices people are using to access the web. Designers tend to develop a site according to screen width, i.e. 320, 768 and 1024 pixels. In reality, the opposite exists.
Varying screen sizes makes it tough to restrict to one single common width size. Creating a bunch of designs based on the screen size isn’t a viable option either for designers. Normally, designers tend to create three static layouts that keep alignment with the nearest width. This approach is much better, when compared to the desktop only, static site as it caters to at least one column, a simplified version for the mobile and also a touch-friendly version for the tablet.
Thinking In Percentages
Creating designs for your responsive layout requires you to set many of the dimensions in percentages. This approach ensures that your content grows and shrinks, on an even basis, depending upon the variable screen sizes and also on the screen size it is being viewed on. Your content will cover up to 90%, instead of maybe 50% of the screen. This is possible as the content is centered on a screen size that is a few pixels smaller than the next available breakpoint.
Choose breakpoints based on the area where your content breaks, instead of the device screen widths. Rather than creating a design and then trying to fit it in the screen slot, you should find out the width at which your content begins to struggle. If you start with a 1400 wide design and slowly shrink the browser until a content piece breaks the layout or gets close enough, then that determines the next breakpoint. It doesn’t really matter whether it is at 1200, 800 or 673, if the content works great, then you should not look at changing the layout. You might end up with strange numbers and also might have several breakpoints as well.
Earlier we talked about picking your breakpoints based on where your content breaks and not your screen width. Do it this way because there’s too many different devices out there with different screen widths and they keep making new ones. It’s impossible to decide on consistent breakpoints for all these devices. So, let the content be the deciding factor.
The point is to not get hung up on how something looks on the latest iPad or the new Nexus, but to make sure your breakpoints are suited to your content and that your design looks good no matter what screen it’s on. Determining a set of definite breakpoints, for responsive projects is tough, as more and more screen sizes are making a beeline into the horizon every day. Relying on these tips will help your content br displayed in the best possible way.