Have we been helpful? Do us a favour and tell the world about it.  Write A Review

Powered by Spearhead Software Labs Joomla Facebook Like Button

Responsive Web Design

In the early days of mobile internet devices it was common for web designers to be called upon to create one website for desktop viewing and one for mobile devices. This process not only increased the initial design cost but also added to the complications of editing and adding content to businesses websites.

Responsive design uses software and layouts to create a single site design that responds differently to create a specific view that is optimal to the device that it is being viewed on.

Layouts

Today we have hundreds of different browser screen sizes. We have 7”, 8” and 10” inch Androids, iPhones, iPad Minis iPads and full sized iPads. Then there are hundreds of different sized desktop and home entertainment screen options.

Responsive web design adjusts your layout to give the best view of your content no matter what width or height of the device is being viewed on.

Elements

Responsive design also allows for automatic switching between elements that are optimized for a particular device type. In most responsive sites, smartphone users will see a mobile-friendly menu while desktop users will see the larger, more robust menu system that looks best on a bigger screen. CSS3 media queries, enable site developers to create custom CSS classes that are triggered by characteristics of the browser, such as its width.

In addition to switching elements on and off, a good responsive design is fluid, and will scale as the window size is adjusted. This ensures that the same great user experience is available for users running browsers at virtually any pixel width.

Everything in a responsive design is laid out to be relative, rather than fixed. The layout grid, images, and other media components are placed at a percentage of the browser width.

Menu Options

Menus can be preferenced so that a visitor on a desktop may get a full, layered drop down menu while a visitor on an android phone may see an app like button that accesses a content list.

Big Screen Menu
Big Screen

 

Mobile Phone Menu
Mobile

Media Preferences

Media can be preferenced so that a visitor on a desktop may see the full embedded high definition of a video while someone viewing the same page on an iPhone may see button links to a youtube version of the same video.

Desktop Version
Full screen video

Mobile Phone Version
mobile Video

Member Login