Web Design
View Portfolio
Contact Us
Call Us

Responsive Web Design (RWD) and E-commerce

What is responsive web design (RWD)
Responsive web design or RWD as its commonly referred to in the digital media industry is a relatively new method of engineering website code and layouts that will adapt to the users device and browser capabilities mainly adjusting the layout when a certain screen resolution is detected. The website will automatically resize images, text and on page elements as well as rearrange their on page locations to fit neatly within the operating browser. Also, some elements are also replaced depending upon the browser. For example, a standard navigation bar that stretches across the top of the website may be replaced with a simple dropdown menu when the site is accessed on a mobile phone. Using these methods of adaptive web design ensures that all users on all devices from desktops, laptops, tablets too smartphones, get an attractive and user friendly experience.

The need to change
It is predicted that by the year 2015 over 1 billion users will use only their mobile phones or smart phones to access the web and shop online, therefore we feel it is important to act now ready for these changes. By not using adaptive E-commerce solutions we are without doubt lowering our sale to conversion rate.

Today we see companies websites accumulate into a headache of URL's to try and offer a friendly viewing experience across a range of devices which results in multiple domains or subdomains that run an individual version of the website just to suit that one device. Here are a few examples of what you may have seen.

  • www.exampledomain.com
    Built to target and serve users accessing the website using a desktop or laptop device.
  • m.exampledomain.com
    Built to target and serve users accessing the website using a mobile or smartphone.
  • tablet.exampledomain.com
    Built to target and serve users accessing the website using tablets such as Apple iPad or Android.
  • tabletlandscape.exampledomain.com
    Built to target and serve users accessing the website using tablets such as Apple iPad or Android viewing with a landscape orientation browser.
  • retina.exampledomain.com
    Built to target and serve users accessing the website using tablets such as Apple iPad with retina display capabilities.
    As technology changes, and it does fast, so does the list and the need for alternative domains and subdomains to ensure your website content displays appropriately in all devices and browsers.

The Solution
The solution is for us to work with the resources that are consistent across all of the devices that are available now, and that will be available in the future. The key element here is the browser. All of these devices have a web browser that conforms to web standards and with this in mind, all we need is one URL. By implementing responsive web design methods and techniques (RWD) into our websites, we only need one URL. And the advantages don't just stop there, not only is all our content been driven from one source and URL, we are also eliminating the problem of needing a standalone app built for the website which typically comes with its own set of headaches, this being one app typically does not suit all devices, most commonly you will the the iPhone app, the Android App and then the Blackberry App. We quite often here things like, why is this available on my friends phone but not mine. With Dual Medias' responsive web solutions, this really is problem solved!

View Our Portfolio Call Us Now Contact Us
Top Ten Free Web Design Tips


RWD Terminology and technology


RWD (Responsive web design) is a method of web design and implementation aimed at creating adaptive websites to provide an optimal user experience, easy reading and navigation structure with a minimum of resizing, panning, and scrolling across a range of modern devices such as laptop computers, desktop computers, tablet computers and smartphones.

Responsive Ecommerce

Responsive Ecommerce is an approach to website creation that utilises the use of flexible layouts, flexible images and cascading style sheets (CSS) using media queries.  The main aim of responsive Ecommerce design is to produce web sites that automatically detect the users screen size or resolution and orientation and to then change the layout of the website accordingly to offer the best user experience possible.

Adaptive web design

Web pages that learns the habits of its users and presents them with a totally customized page which pertain to the users interests.

Fluid web design

Fluid web design is a modern development method that’s really grown popular due to its high demand and requirements over the past few years. It’s a very technical development structure that allows your company website to adapt itself in realtime to the screen size or resolution it’s being viewed on, from here allowing the user to be presented with different layouts, depending on whether they are accessing the page from a desktop or a mobile device such as a smartphone or mobile phone.

Flexible grid system

The flexible grid system or FGB as its also known is a system that was produced with typographic standards in mind which combines rules of fluid column design layouts, baseline grids and mobile-first responsive design to a resolution unique. The FGB is full of CSS normalization, clever typographic standards, common browser issues and improved user experience.

Media queries

Media queries are the all new and superior method of delivering multipule styles to different devices, the result been the best experience for each type of website user regardless of their device. As part of the CSS3 specification media queries increase the jobs of the media attribute which controls how your CSS styles are rendered. A good example would be that it's been the usual procedure for many years to use a individual style sheet for printing websites and pages by simply specifying media="print" . Media queries take this concept to the next level by simply allowing developers to target CSS styles based on wide range of device properties, such as screen width or resolution, orientation, etc.