A Closer Look at Responsive Web Design

Responsive-Design2

A few weeks ago, we published a blog entry about responsive web design. If you missed it, click here to get caught up. Of course there’s so much to talk about when it comes to web development’s definitive answer to device-agnostic programming! We couldn’t fit it all in one blog entry. Today’s entry dives a little deeper into CSS and Media Queries- the backbone of responsive programming.

Most people equate mobile development with HTML5. But CSS and media queries are what makes mobile development the efficiency powerhouse it is today. HTML was never intended to be used to recognize different aspects of a document like headers, footers, or paragraphs. When tags and color attributes were added to the HTML 3.2 specification, the programming process became unwieldy.

The development of large websites was becoming a long and expensive process. Developers had to tag every individual element on every single web page. This included: font size, color, layout, etc. Imagine how long it must have taken to make one design change, not to mention the hundreds of PBR revisions. In addition, the growing number of mobile devices and the diversity of their capabilities were creating a vital need for scalable design assets. KOLs were no longer accessing speaker portals or webexes from their office desktops. They were using their tablets and smartphones in the hallway while hustling between meetings and patient visits. It was becoming clear that programming methods needed to change to keep up with the needs of the users. This is where CSS and media queries come into the picture.

CSS the Savior

CSS, or cascading style sheets are external files that exist outside the HTML code of a program. They define how HTML elements should be displayed. The key benefit to using style sheets is that the developer only has to edit one file, rather than finding and updating every tag on every element on every web page. Remarkable time saver–right?

What innovative genius came up with this?

In 1990, Tim Berners-Lee, who is credited with inventing the World Wide Web and writing the first version of HTML founded the World Wide Web Consortium (W3C) ↼an international community that works to standardize web development. Some areas of focus include:

  • Web design/web apps

  • Web architecture (URIs, HTTP, etc.)

  • Semantic web (link information from databases)

  • XML technology

  • Device technology

  • Universal browsers and authoring tools

In 1994, the W3C invented the first form of CSS. In addition to convenience and efficiency, CSS is also universally recognized on most web browsers that are used today. Click here for W3C’s list of browsers that support CSS

Does CSS do ALL the heavy lifting?

Responsive web design relies on media queries to determine the characteristics and capabilities of the device the code is being run on. The code then calls on the appropriate style sheet to format the output for a seamless experience on any device.

Media queries do not determine the device the content is being run on, they determine the characteristics and capabilities, such as:

  • Screen height & width (max/min)

  • Browser height & width

  • Device orientation (portrait/landscape)

For example, a media query may ask a device what the screen resolution is. Depending on the range of pixels the screen size falls within, the program will then call on the style sheet that corresponds to that size. Super simple.

Although the use of style sheets has been around since the early 80’s, responsive web design is a relatively new concept. The combined use of CSS, media queries, and scalable design assets is a technique that is still being refined in response to the ever-growing mobile media market.

Parting Thoughts

Creative MediaWorks has over 25 years of experience delivering innovative multimedia solutions to the healthcare community. We pride ourselves on the use of cutting-edge platforms, programming, and development techniques.

We hope the information provided in this blog has been useful to you. If you’d like to learn more about responsive web design, please feel free to reach out to our Multimedia Manager. Call us at 800-737-1123, or email us at info@CreativeMediaWorks.com. And if you haven’t joined our newsletter list, sign-up here.