Mobile responsive website design

A survey carried out back in 2014 in the USA showed only one out of three websites were mobile responsive. But according to the same study in 2015, and as expected, this figure has grown considerably.

At Forge Online we make sure all of our website designs and development are mobile and device friendly. In other words, all of our websites are device responsive websites.

Crafting a website to work on many devices or in another term for optimal viewing and user experience is called Responsive Website Design (RWD).

RWD in its beginnings, started as early as 2002, however, responsive design hadn’t picked up its momentum until late 2008/2009 due to browser compatibility issues.

To address the need for RWD we use several website design strategies, techniques and technologies.

Progressive enhancement website design : This includes semantic HTML, External scripting and emphasises accessibility. This is a common practice use by many developers in responsive website design.

Layered web page development is also a part of the progressive enhancement. Layering allows improved accessibility, boosts performance and aids better rendering for the end user.

CSS frameworks : There are several frameworks out there. Instead of reinventing the wheel we use common and popular frameworks like Bootstrap.

Bootstrap is a free open-source collection of HTML, CSS and J-query re-usable tools for creating websites and web applications.  By using Bootstrap we make sure websites we build are packed with up-to-date technologies and tested on various devices and browsers.

Tableless content : We reduce the use of HTML tables and use css to arrange elements and text in a website.

We encourage our users to reduce the usage of HTML Tables because HTML tables are not device or mobile friendly elements and cause display issues for the page(s) they are used on, for example a large column count table is not user friendly on a Mobile device and can cause the page layout to require sideways scroll – and the mobile compatibility feature is lost.

More strategies

Responsive content

Another important aspect of responsive website design is responsive website content. Many Mobile users exhibit different user behaviour on mobile devices than they would on a desktop computer. Often, they don’t read the content and like to scan the content and stop by to look at a image, so it’s important to choose what content to show or hide on a mobile devices.

Icons

We like to use font awesome icons instead of images wherever possible. Since font icons are drawn with vectors, they remain sharp on any device and take less time to load. Font icons are the ideal candidate for icons on a responsive website.

Images and carousels

Images play a huge roll on responsive websites. We use images on demand where ever possible. This means images will load depending on the ‘device browser view-port’ meaning only the largest necessary image size is loaded into the user’s screen thereby avoiding the need to load their full size. For example Images on sliders can have large images to fit for large view ports and may not be ideal for mobile devices where a smaller image will do. Via images on demand we load separate image resolutions depending on device width and maintain optimum loading times for the page.

Fancy scripts

When you browse the internet you can see some sites are packed with animations, pop-ups and fancy scripts. At Forge we try to minimize the use of fancy Javascript in our website designs unless it’s absolutely necessary.

Javascripts are a very important part of a website design. They help connect the HTML content layer and style sheet layer and can improve website accessibility and performance. Avoiding unnecessary scripts avoids increasing page load times and ensures the user the best possible viewing experience.

Other Resources