Any modern site should be built for a variety of viewports

It should be no surprise that the proliferation of tablets, smart phones, monitor sizes and internet ready devices that we no longer live in a world where “standard screen size” is a meaningful term. In order for a site to be legible and accessible on the ever expanding list of screen sizes it needs to be configured to anticipate these changes and adapt accordingly.

The custom themes we create are all developed to be “responsive” by using CSS3 media queries to modify presentation based on the width of the viewport. We also pay special care to page weight and loading speed to accommodate the limited bandwidth often associated with hand held devices.

Google and other search engines are beginning to degrade the position of sites that do not have responsive structure, so even if your expected audience may not include tablet and smart phone users (who are becoming quite a rare breed) responsive design is crucial to any site owner.

Responsive design is the process of anticipating the way that a site will present on a variety of screen sizes and devices. With the innovation of media queries, the same content can be configured to recognize the available screen size and aspect ratio, and adjust the layout and styling accordingly. Starting with the “primary” layout of the most commonly anticipated viewport, alternate layouts are constructed to respond to alternate screen sizes using the same content and semantic markup.
Here are some standard sizes, but more changes are sure to be on the way…

  • Smartphones: 320 – 480px wide
  • Tablets: 768 – 1024px wide
  • Tablets – small: 526 – 990px wide
  • Desktops & Laptops: 1224 – 1824px++ wide