Today, as users, we’re constantly on-the-go. The majority of website visits start on mobile devices, and according to eMarketer, Mcommerce sales for US retail will be increasing with each coming year. As a result, optimizing website accessibility and user experience on tablets, smartphones, and every device imaginable is becoming increasingly important in order for all businesses to stay relevant. To accommodate users, websites that are designed responsively are typically the best option available.
Responsive design is an approach to web development by which a website is planned, designed, and developed to appear optimally in a range of devices. The phrase “appear optimally” refers to a page being readable, easy-to-navigate, and usable with minimal panning and scrolling. Responsive Design is not just a method or technique – it is a fundamental ideology about how a site is designed and built.
What Is A Responsive Web Design?
Responsive design is a front-end development process intended for molding website design and user experience to the user’s device, whether desktop, tablet, or mobile.
In responsive, a cascading style sheet (CSS)—essentially what defines the format and layout of a web page, is leveraged to permit a website to scale to the width of a browser, independent of device type. Javascript and js libraries such as JQuery and Modernizr are also used to accompany this behavior for resizing more dynamic objects like masonry galleries as well as converting mouse activities to touch activities.
Unlike adaptive design or mobile detection, responsive design does not leverage device detection, so rather than querying the device with backend logic, CSS media queries are used to determine things like the width and orientation of the device screen—your browser.
Basics of Responsive Design
Two basic principles exist in responsive design, the use of breakpoints and fluid scaling:
Breakpoints
CSS3 media queries create conditional boundaries at which the width of a specific device type’s browser will then trigger alternate styles. Here at Blue Fountain Media, we generally use maximum-width breakpoint, to create a desktop-first (scale down) build versus a minimum-width boundary, for a mobile-first (scale up) build. Queries can also be used to determine height and even device orientation.
Breakpoint sizes (we’ll use widths from here on out) can be set in px or em. The differentiation in modern browsers is negligible, though, compared to a few years back. Breakpoints can be set at any size but they tend to align with the most common dimensions of each Desktop, Tablet Portrait, Mobile Landscape, and Mobile Portrait. Generally speaking, these tend to be 1200/960px, 768px, 480px, and 320px, wide respectively, though industry standards are constantly changing as new devices are released.
Fluidity
Fluid scaling can be achieved in a few different ways, but it will always involve percentage or em values to permit a container to scale within the bounds of its parent elements, and ultimately the browser. Fluid scaling is necessary to achieve responsiveness between breakpoints, to maximize your real estate, as well as to maintain the flow of columns in a responsive grid.
A simple example of a fluidly scaling object would be an HTML page consisting of one block with width of 100% and a height of “auto”. As the browser changes width, the block scales with it, proportionally. Where you choose to apply this scaling at the granular level is up to you but fluidity should always exist at the top level of any responsive container.