Day: October 21, 2017

Tips & Tricks: Internet Browser Tabs

Cycle through open tabs Pressing Ctrl + Tab while in a browser will flip between each one (Ctrl + Shift + Tab to go backwards). This can be much faster than moving the mouse and clicking on a tab. Ctrl + Num (1, 2, 3, 4, n..) will also take you to certain tab in that numeric order. Ctrl + 9 always brings you to the very last tab, even if it’s beyond the ninth one.

Advertisements

Tech Terms: Responsive Web Design

A responsive website is one that has been designed to respond, or adapt, based on the technology and type of computing device used by the visitor to display the site. It is basically one website design that will looks good at any size — from a large desktop LCD monitor to the smaller screens we use on smartphones and tablets. Responsive design ensures visitors to the site have a similar experience that is independent of the of the size of the device device used to view the site.

Responsive website design (RWD) enables site designers to create once and publish the same content everywhere, for all devices. It is a website development philosophy of rendering web pages in an efficient, optimized and easy-to-read format across a variety of devices and web browsers on different platforms.

Rather than the traditional approach of designing web pages for viewing on just desktop or laptop PCs, responsive design utilizes a variety of newer web development features and functionality to deliver an optimal view to users on mobile devices like smartphones and tablets as well as on traditional PCs and other electronic devices.

Because of their smaller display size, mobile devices typically require a modified layout for content to help users navigate through the website more efficiently, and with responsive design, web developers are able to code their web pages with the flexibility to render readable content at a variety of display sizes. This is due largely in part to websites that can continually and fluidly change, based on factors such as the viewport width.

Responsive website design consists of the following three main components:

  • Flexible layouts – Using a flexible grid to create the website layout that will dynamically resize to any width.
  • Media queries – An extension to media types when targeting and including styles. Media queries allow designers to specify different styles for specific browser and device circumstances.
  • Flexible media – Makes media (images, video and other formats) scalable, by changing the size of the media as the size of the viewport changes.

Responsive Web Design vs. Traditional Web Design
An example of a non-responsive web design page is one that reads well on desktop browsers but has very small, unreadable text on smartphones, often due to having too many columns or images that are too large to fit within a smartphone’s limited viewport display width.

In contrast, with responsive design, web developers don’t have to focus on specific display sizes; rather, their responsive web code is designed to adapt to a range of display sizes, presenting different layouts based on the display size and capabilities of the mobile device or PC.

How to Incorporate Responsive Design into Web Development
A variety of responsive design techniques can be utilized to create responsive websites, but most frequently web developers will set major and minor width breakpoints based on viewport tag and CSS media queries, and then code to present optimized content layout and text based on the display size ranges between these breakpoints.

Another key to responsive web design is using relative values as much as possible as opposed to fixed attributes like width. This enables content to scale in size based on the device and platform the reader of the web page is using at the time.

Source