In this day and age, you would seldom come across a smart phone with 320px width. So, why would you spend time checking your web sites or web applications against 320px window width? As it turns out, there are actually a handfull of good reasons to simulate a device width of 320px during web development!
WCAG Reflow Compliance
Lets take the most important point first. According to the Web Content Accessibility Guidelines (WCAG), content must reflow on the screen so users can scroll vertically without having to scroll horizontally. This rule states that the minimum screen size must be either 320 CSS pixels or 1280 CSS pixels at 400% zoom.
If you calculate 1280 / 4, you quickly discover that these are exactly the same size requirements. So when I develop web pages and web applications, I always ensure everything looks fine, and there are no horizontal scroll, at 320px, to stay WCAG compliant.
Also make sure that if you intend for the page to scroll horizontally (instead of vertically), the WCAG requirement is then to support a screen height as small as 256 CSS pixels.
But even if you don't consider WCAG compliance of importance, there are still other good reasons to always check against 320px width!
Detecting Overflow Issues
If you use 320px for testing, you will immediately identify overflow issues. If your layout does not cause horizontal scrolling at 320px during testing, you can be quite confident that this is true in production as well, for wider screen sizes!
Cross-Device Compatibility
If you test the smallest size first, you are more likely to find potential issues that could affect larger sizes as well. If everything is readable, all touch interactions works flawless, and the design still doesn't look cramped at 320px, then you are certain to have no such issues with a larger screen size.
Crow epistemology: Have as few items as possible on each page
In general, you want your audience to find what they are searching after as soon as possible. The best way to be certain that your web application isn't crowded with buttons and functionality, is to make the web page behave nice on a small 320px screen. You should see the most important information without any scrolling, and also be able to navigate further into the major sections within your application with ease. If this is manageable at 320px, you have a clean and clear page.
If you find this difficult on a 320px screen, then new users not accustomed to your application will also find it difficult to navigate and find what they are looking for when using a big screen.
Conclusion
Even though no one would ever use a small phone with only 320px screen width these days, setting the responsive width in your browser to 320 pixels when developing can make you confident that you are making a page that can be used with ease by everyone.
Top comments (0)