Web Pages Everywhere

The Internet is now practically everywhere. It’s no longer confined to our computer screens but on our phones, tablets, our TVs and now even on our watches. A good website should be able to present itself properly not just on computers but on other devices as well. Fortunately there are plenty of web development tools that allow this sort of functionality. At the center of it all is CSS or Cascading Style Sheets.

Cascading Style Sheets or CSS is simply a way to set rules of formatting for text and other HTML elements on a web page. It is a small text file written in a simple markup language. Style sheets govern how certain elements are presented like how large headings should be in certain paragraphs; what color and fonts footnotes should be; or what color the background should be in certain areas of the web page. CSS makes it easier to format entire websites with dozens of pages without having to format every individual page elements. CSS can also format a website to be presentable to devices other than computer screens. 

Websites cannot exactly appear the same for smartphones and large LCD screens of personal computers. Trying to fit a page made for a standard computer monitor on the tiny screen of a cellphone will make the page unreadable. Another approach is to detect the kind of device and display a different version of the page or redirect the user to a different part of the website altogether. Much effort and resources will have to be done for such websites. Imagine creating three versions of a hundred page website for desktops, tablets and smartphones. Through CSS and its @media rule, developers wouldn’t have to worry.

The @media rule allows for a restyling of the same page not only for various devices but for various situations as well. For better readability for example, the fonts have to be slightly enlarged when printing the page or slightly shrunk when shown on a smartphone. Below are the different media types available for the @media rule.

  • All – this works for websites are made to look good on all devices from the ground up.
  • Aural – the web isn’t only for those who can see but for the visually impaired as well. Aural enables web pages to work with dictation or text-to-speech interfaces.
  • Braille – like aural, web pages can be printed for tactile feedback devices.
  • Embossed – enables support for braille printers.
  • Handheld – converts text and other elements for handheld devices like smartphones and tablets.
  • Print – used during print mode or for pages specifically made to be viewed on screen then printed.
  • Projection – websites will look better when viewed via projector.
  • Screen – default mode but its more prudent to include this option.
  • Tty – stands for teletype. There are still specialized uses for teletype and terminal displays in the manufacturing or banking industry.
  • Tv – nowadays, TVs can double as computer monitors and some TVs are made to access the internet on their own. Older units have low resolutions and websites need to adapt.

An illustrative example:

@media print {

  body { font-size: 24pt }

 }

 @media screen {

   body { font-size: 23px }

 }

 @media handheld {

  body { font-size: 18px }

  }

 @media screen, print {

    body { line-height: 1.2 }

  }

  @media handheld {

    body { line-height: 1 }

  }

In the example, the page body is sized differently for screen and print. The fonts are made smaller and presented more compact for handhelds. Fonts are enlarged for printing for better readability.

Today’s trend towards higher resolution screens, mobile and very soon, the internet of things further stress the need for websites to be adaptive to different media. Fortunately it can be done easily thanks to CSS media rule.