Responsive Design

flexible images and media queries

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical.

Responsive design allows your website to adapt to the device your users are viewing it on. It provides you with the capability to write once publish everywhere, meaning less work for you. If you know nothing about responsive web design then you are in the right place.

Responsive web design is made up from 3 basic ingredients.

  1. Flexible Grid based layout
  2. Flexible Media
  3. Media Queries

Responsive design is all about letting go of a bit of control and learning to embrace that. The first thing we need to do is limber up our design. It would be far too hard and take far too long to work out every single size of the site and come up with the perfect layout for each width. Instead we find the major points of change and then let everything squish and stretch between them.

When the web first came about all of the pages were just text with hyperlinks. It was a fluid web of information. Then we added images to the mix, and then embeds, and then iframes and videos…. and by this point, the web had translated to tables and CSS with fixed widths.

responsive design

In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Responsive design is accomplished through CSS “media queries”. Think of media queries as a way to conditionally apply CSS rules. They tell the browser that it should ignore or apply certain rules depending on the user’s device.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.


Why choose us

Refining our own internal agile design and development processes over the last 7 years we arrived at a general architecture that we apply to the majority of projects at Marenova we call Gerilla Development™.
We’d love to make your project sparkle. Drop us a note or give us a buzz +90 216 472 65 64 Let’s make something together!

efficiency and reliability

If you have any questions, please do not hesitate to contact us.

Ask your Question

×