4) Responsive Web Design (fluid images)

viewing-platforms

‘Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.’ (“Responsive Web Design: What It Is And How To Use It – Smashing Magazine”) When a user switches between devices, a responsive website should change also (resolution, image size etc.) to suit their device.

According to my below reference (“Responsive Web Design”), listed below are the core components:

  • Liquid or fluid layout
  • Media queries
  • Fluid images

For liquid or fluid layouts you use percentages not pixels, percentages are used to determine the dimensions. Using percentages takes out the thought process of accommodating your web design for every different size or screen width. This will allow your website to adjust itself and adapt to everyone’s screens although this is not all you need to know for larger display sizes.

Media queries, ‘Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution’ (“Media Queries”).  From what I’ve read, media queries are based on the characteristics of the device, these are filters that you can apply to your CSS style. Fluid images are set, you can re-size them but this depends on the size of your device, they can be set to the maximum display width.

Bibliography:

  • “Responsive Web Design: What It Is And How To Use It – Smashing Magazine”. Smashing Magazine. N.p., 2016. Web. 1 Dec. 2016.
  • “CSS Fluid Image Techniques For Responsive Site Design”. the new code. N.p., 2016. Web. 1 Dec. 2016.
  • “Responsive Web Design”. Mozilla Developer Network. Web. 1 Dec. 2016.
  • “Media Queries”. En.wikipedia.org. Web. 1 Dec. 2016.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s