Device Screen Sizes

featuredImages

The world keeps changing and web designers and developers are always needing to adapt. Mobile websites are pushing web designers to re-think how their work is displayed across various devices. Responsive web design allows design and code to respond to the size of a device’s screen which  basically means that it looks great whether you’re looking on an iphone, your iPad mini or a 40-inch desktop.

The best responsive websites use fluid grids, flexible images and CSS styling to alter the site’s design and render it according to the width of the browser and knowing your audience and what device they’re using to view your website is important information so that you can develop a website properly. For designers the ultimate goal should be to develop a website design across different devices and platforms but knowing which one comes first makes the design process a little bit different for each site.

It get’s even more complicated when you have to design across web browsers. Each major web browser has it’s own mobile version and renders sites differently PLUS not everyone keeps their browsers up to date so you have to develop for older versions.  Yuck!

I basically develop for 3 sizes (desktop, tablet, phone). There is no “standard website size” and hundreds of devices but these 3 sizes will cover most situations:
.

  • Small: under 600px. This is how content will look on most phones.
  • Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small netbook-type computers.
  • Large: over 900px. This is how content will look on most personal computers.

I design sites around your content. How will the layout and elements work on desktop vs how they are adapted on mobile.  I sometimes remove visuals on the phone because people read and consume the information different.  One of my recent clients knew that their main web demographic was mobile so we made sure that information was scaled back to one page on mobile devices and graphics were paired down to the minimum.

Responsive design is a universal challenge for designers and developers and the best answer is to just open your eyes and look at your site on all the platforms.

 WordPress is highly customizable with a myriad of details and options.  If you are interested in a WordPress workshop or want custom consulting for your organization call (604) 724-7103.  Sign up for my newsletter to stay up to date on WordPress workshops, learn tips and tricks and receive international project updates.

Leave your comment