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
websites social media marketing webapps affordable custom business in texas texas opportunities branding landing pages problems content is king entrepreneur motivation customer appreciation gifts whole foods real simple general electric linkedin making linkedin count email marketing mobile tips 10 demands entrepreneurs 5 reasons people fail 3 surefire ways to grow plan infobeasity get motivated seo google keywords content blog blogging tips email pop imap cms custom cms easier content management website great content custom content management system mobile app crm website design mobile apps marketing strategy online marketing build community build online community relationship marketing mobile friendly google change inbound marketing responsive password safety passwords blogging basics smm small business ecommerce internet marketing website traffic increase traffic website visits e-commerce webpayments semantic search reality glasses voice recognition gesture technology
Quicksearch
Email Signup  


Testimonials
I wanted to tell you how much we appreciate WebRevelation.  You deployed a p...
We hired Web Revelation to transform our existing website into a masterpiece....
Contact Us

Web Design in Oklahoma
Call  405.607.0349

Web Design in Texas
Call  817.283.3324