817-283-3324
LinkedIn Twitter Facebook
WebRev Connect
smarter websites


Blog

 

Designing for Content, Not Screen Width

Posted Mon, April 22, 2013 by Julie Short

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.

Content Focus
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. 

Concluding Thoughts
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. 

Posted in : Website Content | 
Tags : content


Blog Categories
RSS All Posts
RSS Announcements
RSS Blogging
RSS Business Strategy
RSS CRM
RSS e-commerce
RSS Email Marketing
RSS ERP
RSS FYI
RSS Mobile Apps
RSS Mobile Websites
RSS Online Marketing
RSS Online Profile Management
RSS SEO/SMO/SMM
RSS Tips and Tricks
RSS Website Content
RSS Websites

GoogleRSS
YahooRSS
MSNRSS
Tags
online tools mobile websites seo websites marketing google blogging basics responsive mobile website responsive design attracting customers website banners web design banners social media linkedin navigation web applications context authority business listings online profile social proof erp mobile friendly google change smm small business reality glasses voice recognition gesture technology ways to go mobile friendly the mobile playbook mobile mobile content mobile usage mobile expectations customer service store front reputation keywords content linkedin for your employees blog blogging tips tips crm inbound marketing blogs sem search engine marketing manufacturer websites manufacturing manufacturing software making linkedin count online marketing cms custom content management system attracting hiring college graduates business in texas texas opportunities ordering solutions contact forms business strategy oil and gas leads 10 demands entrepreneurs 5 reasons people fail 3 surefire ways to grow plan infobeasity get motivated
Quicksearch
Email Signup  


Testimonials
I wanted to tell you how much we appreciate WebRevelation.  You deployed a p...
It has been a true blessing to find and work with WebRevelation. They have prove...
Contact Us

Web Design in Oklahoma
Call  405.607.0349

Web Design in Texas
Call  817.283.3324