What is Responsive Website?

Responsive website is a site that fits all devices screens. This way your website could be readable on all existing (or targeted) screens.

Modifications Usually Added to a Responsive Website

As more and more larger screens appear, it’s a good practice to fill a browser window with your website edge to edge. However if content area becomes too wide, it is hard to read text with lines becoming too long. Thus using wide responsive backgrounds became popular.  Backgrounds fill in the available screen area, and content areas are limited to a readable line width on a very wide screens. Recent long-awaited death of older Internet Explorer versions adds many possibilities to advanced CSS uses, such as setting background size property, which wasn’t available few years ago due to Internet Explorer dominance.

Mobile-First Description of a Responsive Website On-the-Fly Layout Changes 🙂

Usually responsive site, when seen on a mobile phone, consist of 1 column design, smaller and simplistic header with a logo and several links and a mobile menu. Texts are presented with a small screen readable font size.

When seen on tablet it could be a regular version of a website, or if the site rather wide, it could be presented in a different way too. It could include a mobile menu too and other modifications to fit the tablet’s size.

Desktop versions should also be suited for different screen dimensions. I.e. my screen is using 2560px width and 1400px height. But many modern laptops use 1366px width and 768px height. Beware that browser is also taking some considerable vertical space from your screen.

In short, test your site gradually changing your browser’s window width – it should change accordingly. And also remember about available vertical space, sometimes headers should be made smaller to fit the screen.

Better Graphics for Retina Displays

It’s also important to provide retina display ready graphics for a higher pixel density monitors user. Such monitors are used by most mobile phones, many tablets and latest Apple computers. The graphics should be presented in a vector format, as SVG images, or at least as a two times larger image made smaller with HTML and CSS to maintain the needed pixel density. If your important images are made this way, they’ll look sharp and nice on retina displays.

How Responsive Site is Made?

Current CSS supported by modern browsers allows use of media queries, which are capable of making specific CSS rules for different screen sizes by width or height, or both of them. They also allow targeting pixel density, so different screens could be targeted by this property, thus retina displays could be separated and site’s design will be shown with different styles, when needed.

If your site was written with relative size units (em, rem, %) , it would be easy to modify for different resolutions, just by modifying one basic fonts size (which is a base for all relative units used later). However site would still require some modifications, changes and extensive checking with all screen sizes. If you site was written with pixel units, each or some of your CSS rules would have to change.

Some very old sites, usually done with tables for layouts before beginning of CSS era (about beginning of 3rd millennium), would need a full HTML code rewrite.

You can see dynamics of changes in available screen sizes during last years on this site.

Latest Tendencies

Mobile sites are a must this days. Google seriously punishes non-mobile optimized websites. It is also very important for your site’s users to provide them mobile-optimized content they could read and use easily. And at last you also need to support not only very small screens, but wider screens too. While 1920px width is becoming a standard for desktops, 2560px width of hi-end monitors becoming more and more accessible to a general public. Older non-responsive sites with small fixed width and small font-sizes look very poor on such resolution. A very old site could take only 1/5 of such a big display. It looks really bad, even if a user will resize it with zoom.

WebProm Could Make Responsive Website from Anything

I could make any website mobile-optimized and responsive, but amount of work is certainly depends on your site’s previous code.