By Sridhar Asvathanarayanan, published in Open Source, 30 August 2018
Sridhar has written a comprehensive article on the issue of scaling one’s website across all mobile devices. The article provides insights into design considerations as well as practical tips on how to deal with web page views using mobile devices.
This piece is essential and offers insights for anyone with the responsibility of publishing pages that will be viewed via mobile devices.
Here is an excerpt from Sridhar’s article, published on opensource.com:
Design your sites to adapt to different devices
All these issues can be addressed through proper design and by adopting a mobile-first approach. When working with limitations such as screen size, bandwidth, etc., focus on the right quantity and quality of content. A mobile-first strategy places content as the primary object and designs for the smallest devices, ensuring that a site includes only the most essential features. Address the design challenges for mobile devices first, and then progressively enhance the design for larger devices.
Here are a few best practices to consider when designing websites that need to scale on different devices.
- Adapting to any screen size. At a minimum, a web page needs to be scaled to fit the screen size of any mobile device. Today’s mobile devices come with very high screen resolutions. The pixel density on mobile devices is much higher than that of desktop screens, so it is important to format pages to match the mobile screen’s width in device-independent pixels. The “meta viewport” tag included in the HTML document addresses this requirement.
The meta viewport value, as shown above, helps format the entire HTML page and render the content to match any screen size.