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 makes your site look great whether you’re looking at it on an iPhone, your iPad mini or a 40-inch desktop.
The most 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. Knowing your audience and what device they’re using to view your website is important information to develop a website properly. For designers, the ultimate goal should be to design across different devices and platforms, but knowing which one comes first makes the design process different for each site.
It gets even more complicated when you have to design across web browsers. Each major web browser has its own mobile version and renders sites differently. PLUS, not everyone keeps their browsers up-to-date so you have to develop for older versions, too. Yuck!
I develop for 3 sizes (desktop, tablet, phone). There is no “standard website size,” but these 3 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 and how the layout and elements will work on desktop vs how they are adapted on mobile. I sometimes remove visuals on the phone because people read and consume the information differently. 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.