Fitting Large Desktop Screens to Phones Using Responsive Web Design
As the Ecommerce website design landscape in Singapore becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. Thankfully, responsive web design gives web creating companies some tools for making layouts that respond to any screen size. It uses fluid grids, flexible images and media queries to get the layout looking great regardless of the size of the device's screen dimensions.
However, mobile context is much more than just screen size. Our mobile devices are with us wherever we go, unlocking entire new use cases. Because we constantly have our mobile devices with us, connectivity can be all over the board, ranging from strong Wi-Fi signals on the couch to 3G or EDGE when out and about. In addition, touch screens open new opportunities to interact directly with content and mobile ergonomics lead to different considerations when designing layout and functionality.
In order to create a site that's truly designed for mobile context and not just for small screens, we want to ensure that we tackle the many challenges of mobile development upfront. The constraints of the mobile context force us to focus on what content is essential and how to present that content as quickly as possible. Building fast-loading, optimized experiences mobile first has a trickle down (or up, depending on how you look at it) effect for tablet, desktop and other emerging contexts.
Authoring lean, semantic HTML5 mark-up keeps adaptive experiences manageable and accessible, and also provides opportunities for enhanced experiences (quick example: using proper HTML5 input types brings up the appropriate virtual keyboard on many touch devices). Semantic mark-up is extremely portable and can be accessed by many mobile devices, tablets, desktop browsers and future web-enabled devices, regardless of feature set or capability. In order to accommodate for sites not optimized for mobile screens, many modern mobile browsers set a larger browser viewport, which allows for better viewing of non-mobile-optimized sites. Users can then pinch-to-zoom in on the content they want.
In order to keep the experience as lightweight as possible and to improve the perceived loading time, two additional HTML documents are created for our auxiliary content, reviews.html andrelated.html. Because this content isn't required for the main use case (buying the product) and includes a number of images, we won't load it by default to keep the initial page size down. By default the content is accessible via links on the page, but if a certain level of JavaScript support is present, we'll conditionally load the content when the user requests it or when the resolution reaches a certain breakpoint.
A simple technique to reduce the need for background images (thereby saving HTTP requests) is to use HTML special characters for simple shapes. In the case of rating stars, ★ are used; to create a solid star (★) and ☆ to create empty stars (☆) for the ratings. And because it's HTML and not an image, it stays crisp even on high resolution screens.
When crafting CSS, it must be ensured to keep things lightweight and as fluid as possible. It is understood that all these devices have many different screen sizes, and that tomorrow's devices won't have the same resolutions as todays. Because screen size is an unknown, the content itself is used to determine how the layout should adjust to its container.
It's increasingly important to make sure web experiences are accessible offline, especially when considering mobile users with variable connectivity. Thankfully, app cache and other offline techniques gives us a way to keep our resources accessible even when the user is offline.