With increasing mobile internet usage, development of web designs compatible with all devices was the first creative challenge faced by the developer. As a collective riposte, RWD provided a respite to the mobile website development albeit leaving room for improved approaches which could alleviate the potential consumer’s demand.

In the first part of the blog improved performance and advanced layouts held the key to speed up loading of the website. Flexible grid layouts worked towards easy readability and simplified novice understanding skills. In the second part of the blog, media queries, responsive typography and images will enhance responsive features aimed towards users’ requirements.

Initializing Media Queries:

Media queries can control layouts across view ports. Where native Enquire.js and Simple State Manager allows firing java script towards certain orientations, the same can also be built with match media but that have to be matched between CSS and JS. The answer would be to link CSS and JS media query values with getactiveMQ. The end of the body element is hidden with div#getActiveMQ-watcher and can be set within CSS at #getActiveMQ-watcher with {font-family: break-0;} 1,2,3… and so on. For checking changes in the viewport the watchResize() is used which will read the active font-family to maintain the orientation.

Responsive Typography:

Easy to ingest content along with responsive typography ensures comprehensibility in readership across viewports and devices. With the HTML font size set to the default 100%, it will be compatible with the default resolutions of the devices set by the manufacturers. Desktop browsers are set to 16px and other device browser defaults are set higher. Base font-size for an article byline can be set to 14px by setting .byline {font-size: 1rem;}. This way the byline style is not impacted even when the body: font-size is scaled to suit the viewport. Font loading performances can be improved using Enhance.js and semantic headings can be controlled using Typographic Mixins.

Responsive Images:

Finally with responsive images fluidity is a key component of RWD. Responsive image landscapes can be complicated due to varied screen sizes and density. Trying to achieve kilobyte size, physical size and image cropping for a particular size of a viewport, remain the greatest of concerns. The Lazy Load Plugin jQuery will help lazy load the images and feature detection can be done using HTMLImageElement.Sizes and HTMLPictureElement. Basics will be required to optimize images such as ImageOptim and PictureFill will provide polyfill support for the image.

Conclusively, innovation in RWD starts from within rather than without. Experimenting and implementing new practices and sharing ideas leads to greater responsiveness and happier users. It is always good to start base upward and incorporate newer techniques even as the initial web development is enacted.