Internet grew faster than anyone could have expected. Mobile growth has erupted onto the scene in the last several years. Mobile Internet usage is also growing at a faster rate than overall Internet usage.
It's difficult to find someone these days who does not own at least one mobile device that is connected to the Internet. In the United Kingdom, there are more mobile phones than people, and mobile Internet usage will surpass desktop Internet usage within a year if current trends continue.
With the rise in mobile Internet usage, the subject of how to create websites that are accessible to all users has arisen. Responsive web design, often known as RWD, is the industry's answer to this challenge.
Responsive web design is the practise of creating a website that works on any device and screen size, large or small, mobile or desktop. The goal of responsive web design is to provide an intuitive and satisfying experience for everyone. Responsive websites benefit both desktop computer and mobile phone users.
Credit: pexels.com
Some people may be familiar with the term responsive, while others may be more familiar with the terms adaptive or mobile. Which may leave you wondering what the difference is between them all.
The terms responsive and adaptive web design are often used interchangeably. Responsive means reacting quickly and positively to any change, whereas adaptive means easily adapting to a new purpose or situation, such as change. Websites with responsive design change continuously and fluidly based on various factors such as viewport width, whereas adaptive websites are built to a set of preset factors. A combination of the two is ideal, resulting in the ideal formula for functional websites.
Mobile, on the other hand, typically refers to the creation of a separate website for mobile users, usually on a new domain. While this can be useful on occasion, it is usually not a good idea. Mobile websites can be extremely light, but they do require a new code base and browser sniffing, which can be difficult for both developers and users.
The most popular technique at the moment is responsive web design, which favours design that dynamically adapts to different browser and device viewports, changing layout and content in the process. This solution has the advantages of being responsive, adaptive, and mobile.
Flexible layouts, media queries, and flexible media are the three main components of responsive web design. The first part, flexible layouts, is the practise of designing a website's layout with a flexible grid that can be dynamically resized to any width. Relative length units, most commonly percentages or em units, are used to construct flexible grids. These relative lengths are then used to declare grid property values like width, margin, and padding.
Fixed measurement units, such as pixels or inches, are not recommended in flexible layouts. The reason for this is that the viewport height and width vary from device to device. Website layouts must adapt to this change, and fixed values impose too many restrictions.
Media queries were created as an extension to the media types commonly found when targeting and including styles. Media queries allow you to specify different styles for specific browser and device circumstances, such as viewport width or device orientation. The ability to apply uniquely targeted styles opens up a world of opportunity and leverage for responsive web design.
There are three ways to use media queries: inside an existing style sheet with the @media rule, importing a new style sheet with the @import rule, or linking to a separate style sheet from within the HTML document. To avoid additional HTTP requests, it is generally recommended to use the @media rule within an existing style sheet.
Logical operators in media queries aid in the creation of powerful expressions. Within media queries, three different logical operators are available for use: and, not, and only.
Using the and logical operator within a media query allows for the addition of an extra condition, ensuring that a browser or device does both a, b, c, and so on. Multiple individual media queries can be separated by commas and used as an unspoken or operator. The following example selects all media types with widths ranging from 800 to 1024 pixels.
Mobile first is a popular technique for using media queries. The mobile first approach involves using smaller viewport styles as the default styles for a website, then using media queries to add styles as the viewport grows.
The underlying assumption behind mobile first design is that a user on a mobile device, typically with a smaller viewport, should not have to load desktop computer styles only to have them overwritten with mobile styles later. It is a waste of bandwidth to do so. Any user looking for a quick website will value bandwidth.
The mobile first approach also promotes designing with a mobile user's constraints in mind. Before long, mobile devices will be the primary means of Internet access. Plan for them and create intrinsic mobile experiences.
These days, mobile devices do a pretty good job of displaying websites. They could use a little help from time to time, especially when it comes to determining the viewport size, scale, and resolution of a website. Apple created the viewport meta tag to address this issue.
The height and width values of the viewport meta tag are used to determine the height and width of the viewport, respectively. A positive integer or a keyword can be used for each value. The keyword device-height value is acceptable for the height property, while the keyword device-width is accepted for the width property. The default height and width of the device will be inherited if these keywords are used.
Use the minimum-scale, maximum-scale, initial-scale, and user-scalable attributes to govern how a website is scaled on a mobile device and how users can continue to scale a website.
The initial-scale of a website should be set to 1 since it establishes the ratio between the device height and the viewport size in portrait mode. This is the ratio between the device width and the viewport size if the device is in landscape mode.
Allowing the browser to scale a website based on viewport scale values usually works. When more control is required, such as over a device's resolution, the target-densitydpi parameter can be used. Device-dpi, high-dpi, medium-dpi, low-dpi, or a real DPI number are all valid values for the target-densitydpi viewport.
Unfortunately, the max-width property does not work well for all media instances, particularly iframes and embedded media. This is a huge disappointment when it comes to third-party websites that use iframes for embedded media, such as YouTube. There is, thankfully, a workaround.
To make embedded media fully responsive, the embedded element must be completely contained within a parent element. The parent element must have a width of 100% in order to scale based on the width of the viewport. To activate the hasLayout mechanism in Internet Explorer, the parent element must also have a height of 0.
Interested in working with Diginow? Drop us a line at hello@diginow.co.uk.
We are a Creative Web Design Agency based in London & Leicester, specialising in Bespoke Website Design, Web Development, Branding and Digital Marketing.
Whether it’s a new venture or existing brand. Let us know your ideas below using our project planner and we’ll see how we can help.
