web application responsive design examples

Regardless of any RWD technique, the following tag must be set in your HTML : The following sections provide a number of technical implementation options. Those on smaller screens can click an icon to view navigation links, while those with larger screens may see all the options in a horizontal list. More recently, many sites have adopted simpler layouts, where the mobile and desktop experience is mostly similar.Ī typical example of RWD in action is the hamburger menu.

It started with a linear mobile view, which worked on all devices then rearranged or adapted content as more space and supported browser features became available. This is a challenge, and many of the first RWD sites took an existing desktop layout and removed sections as screen dimensions reduced.Ī better technique was mobile first. There’s no single RWD approach or technology.įirst, you must determine how a site design will react to differently sized displays. The technique allowed the same site to work on any device regardless of screen size or viewport dimensions. This rapidly became impractical as the variety of devices grew exponentially.įinally, the term Responsive Web Design (RWD) was devised by Ethan Marcotte in 2010. The initial workaround was two sites: one for desktop and one for mobile, often with user agent sniffing to redirect as necessary. Each logical pixel maps to a grid of 3×3 real pixels, which enables smoother fonts and increased image detail. An iPhone 11 Max translates its 2688 x 1242 hardware resolution to a more practical 896 × 414 logical resolution. Note: Technically, smartphones often have a higher resolution than many monitors, but individual pixels become invisible. Today, more than half of users access web pages on a smaller mobile device. However, the rise of smartphones and the iPhone launch in 2007 reversed that trend. The process remained viable as screen sizes kept increasing from 800×600 to 1024×768 and beyond. That fluidity made complex designs more difficult, so by the turn of the millennium, many sites adopted a fixed-width based on popular screen sizes. Text and containers expand horizontally and vertically to use the available space.

Web application responsive design examples