Wednesday Oct 31, 2018

Responsive Design

Responsive design has revolutionized how websites are developed, but static layouts still have their place. We explore these two different layout methods in this episode of the podcast.

Reference from Treehouse: https://blog.teamtreehouse.com/which-page-layout

Segment 1 - What is Responsive Design?

Responsive design responds to its environment, in the case of web design it’s specifically referring to how a website’s user interface responds to different window sizes and technologies available.
This gives us the ability to have a single design that changes and adapts to various devices from ultrawide PC displays, down to older smartphones.
It also allows users to make the most of the screen real estate they have
Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace
- Having two browsers snapped to each side of a 1080p display for more information, rather than always having a webpage open at full resolution
Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace

Segment 2 - How to Implement Responsive Design

CSS Responsive Tactics:
- Media Queries
  - Offer breakpoints to a design, allowing developers to apply design changes at a specific breakpoint, such as a certain max-width (probably most popular breakpoint)
- Relative Positioning
  - Position: relative;
  - Positioning absolute elements within a relative container and then controlling that relative container to automatically move the elements within the container
- Relative Length Units
  - Units that allow your elements to be responsive. These units are dynamic and change based on their environment
  - Unlike exact, or absolute length units which are (cm, mm, px, etc.)
  - 3 examples:
    - rem - relative to the font-size of the root element
    - % - relative to the parent element
    - Vw - relative to 1% of the width of the viewport
  - Reference link: https://www.w3schools.com/cssref/css_units.asp
- Whitespace
  - The space between elements (ie the space between columns)
  - It’s basically blank space on the web page
  - Responsive design uses this as a buffer zone to move elements around various elements
  - Filling a site up too much (minimal whitespace) requires space for elements to be displaced and the site will become too crowded on smaller screens (infinite scrolling, or a lot of pagination)
Main high-level CSS responsive tactics include: Flexbox, CSS Grid
Mobile or Large screen first design?
- It seems currently it’s more popular to design for mobile first and then create media queries for larger displays
  - This is useful if you are also designing for older browsers and want to use newer technologies like Grid of even Flexbox
  - Older browsers will see a mobile design (one column) while any larger screen or new browser can utilize the newer technology for a more advanced/easier to set up layout
- Traditionally we design for larger screen and adapted for mobile/smaller
  - This is still viable depending again on your audience, an older audience for example still prefers larger screens

Segment 3 - When to use Static instead of Responsive Design

Static layouts/static design is when the page is laid out in a fixed way
The elements on the page do not adjust to the screen resolution, or window changing size, generally, overflow is used in order to scroll all around the page
Older sites, especially those that appear left aligned and not fullscreen are done in a static layout, as they’re typically 640px or 800px wide and remain left aligned, if the screen shrinks below this point, as with a phone screen, the user must scroll around the design
Elements are generally not optimized for all platforms, which results in very small buttons, and text on high definition and mobile phone screens
Modern Static Design or Static Layouts
- We’ve experiences situations in which a single device, or a single type of monitor will be used, adding responsivity in any way would add additional development and testing time and obviously cost more money
- With a single screen in mind you can use the space at your disposal more effectively, have content blocks that perfects fill any available whitespace (within reason) and take advantage of any unique characteristics (ie notch)
- Industrial equipment is often like this, when they use a technology called PLCs to control them, generally an HMI (Human Machine Interface) is required to control it via a touch screen, with the web steadily expanding it’s not outrageous to assume that one day a browser version of an HMI may be used on these touch screens, which are all one specific size and don’t update like consumer products (remain the same for years, even decades)
When we first got into business we set out with the idea that we’d never make a static layout, all our websites were going to be mobile-friendly and responsive
- Even a few years ago when we opened, there was a lot of production websites that had either a static layout, or had a separate mobile site
- Today responsivity is the way to go and is generally cheaper and less clunky than an entire mobile website
- We wouldn’t recommend making something with a static layout unless it has a very specific fixed set of parameters that need to be met, or if it will exclusively be used on a specific display for years to come

Web News - Early Access Software/Games

Potential Issues:
- Developers don’t want the pressure of saying that it is version 1.0 because of the assumed amount of polish
- The developer getting paid and receiving free bug testing while in early access/beta doesn’t seem fair to the user/customer that is buying it
- The potential that you could pay for something but it never gets fully released
- Even if something is free but in beta like flutter.io a cross platform framework for android and iOS. It could be abandoned, and your efforts can be for nothing in learning it and helping with its feature development/bug fixing
Potential Benefits:
- The user can feel part of the development and evolving process of the software and when/if it is released will be more attached to the product
- Strapped for cash but talented developers have a chance to maybe release a MVP and work on it while receiving feedback and funding from the people using it
- A longer update cycle for applications/games because of constant funding
- User feedback can lead to new features and improvements as the system is not yet complete and it is easier to add/change something in this state

Responsive Design

Comments (0)