Responsive Web Design

In this Responsive Web Design article, we will discuss responsive design techniques. This obviously isn’t enough to learn it properly, but it will give you an overview of the most important concepts :

What is Responsive Web Design?

• Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed.
• The ultimate goal of responsive web design is to avoid unnecessary resizing, scrolling, zooming, or panning that occurs with sites that have not been optimized for different devices. It is often very difficult to navigate these sites, and it may even cost you potential customers who become frustrated with trying to figure out how to do something.
• Responsive web design makes your web page look good on all devices.
• Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Here is the example of a responsive website that I have designed

Responsive Website

What is the need for Responsive Web Design?

Internet usage is increasing day by day, It is hard to find someone who doesn’t own a mobile device, or multiple, connected to the Internet. In the UK there are more mobile phones than people, and should trends continue mobile Internet usage will surpass that of desktop Internet usage within the year.

With the growth in mobile Internet, usage comes the question of how to build websites suitable for all users. The industry response to this question has become a responsive web design.

Percentage of mobile device website traffic worldwide from 1st quarter 2015 to 4th quarter 2019

Source — www.statista.com

Following are the benefits of choosing a responsive design for your website:

• Cost-effectiveness
• Flexibility
• Improved user experience
• Search engine optimization gains
• Ease of management

Responsive vs. Adaptive vs. Mobile

We have already discussed what is the meaning of responsive web design, Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users. It is n’t a great idea to build a mobile website. Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Currently, the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browsers and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

Responsive web design is broken down into three main components,

• Flexible layouts
• Media queries
• Flexible media

Flexible Layouts

• Flexible layouts is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width.
• Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.
• Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. The reason being, the viewport height, and width continually change from device to device.

Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Initializing Media Queries

Logical Operators in Media Queries

Logical operators in media queries help build powerful expressions.

There are three different logical operators available for use within media queries, including and, not, and only.

• Using the and logical operator within a media query allows an extra condition to be added, making sure that a browser or devices does both a, b, c, and so forth. Multiple individual media queries can be comma-separated, acting as an unspoken or operator.
• The not logical operator negates the query, specifying any query but the one identified.
• The onlylogical operator is a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries.

Media Features in Media Queries

Media features identify what attributes or properties will be targeted within the media query expression.

Height & Width Media Features

One of the most common media features revolves around determining a height or width for a device or browser viewport.

The height and width may be found by using the height and width media features.

Each of these media features may then also be prefixed with the min or max qualifiers, building a feature such as min-width or max-width.

The height and width features are based on the height and width of the viewport rendering area, the browser window for example. Values for these height and width media features may be any length unit, relative or absolute.

@media all and (min-width: 320px) and (max-width: 780px) {...}

Within responsive design the most commonly used features include min-width and max-width. These help build responsive websites on desktops and mobile devices equally, avoiding any confusion with device features.

Orientation Media Feature

The orientation media feature determines if a device is in the landscape or portrait orientation. The landscape mode is triggered when the display is wider than taller, and the portrait mode is triggered when the display is taller than wider. This media feature plays a large part with mobile devices.

@media all and (orientation: landscape) {...}

Aspect Ratio Media Features

The aspect-ratio and device-aspect-ratio features specify the width/height pixel ratio of the targeted rendering area or output device. The min and max prefixes are available to use with the different aspect ratio features, identifying a ratio above or below that of which is stated.

The value for the aspect ratio feature consists of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.

Resolution Media Feature

The resolution media feature specifies the resolution of the output device in pixel density, also known as dots per inch or DPI. The resolution media feature does accept the min and max prefixes. Additionally, the resolution media feature will accept dots per pixel (1.3dppx), dots per centimeter (118dpcm), and other length based resolution values.

@media print and (min-resolution: 300dpi) {...}

Other Media Features

Other media features include identifying available output colors with the use of the color, color-index, and monochrome features, identifying bitmap devices with the grid feature, and identifying the scanning process of a television with the scan feature. These features are less common but equally as helpful when needed.

Thanks :)