Constructing a responsive website

Question

In today\'s web development community, It is almost \'standard practise\' to make a website \"fully responsive\" - meaning it would work on all screen sizes.

I curre

Answer 1

I've recently found that for responsive images I had to ensure that images in a Jekyll site (porting a template and adding functionality) would scale and fit on smaller screens, but not stretch and take up half the screen on screens with larger sizes.

Here are 2 methods to ensure that images/media do not overstretch or mess up the entire responsive site by going through the boundary without having to manually resize them.

1. CSS max/min-width attribute

   For media assets like images, most browsers will support the max-width attribute that specifies how wide the image can be, or max-height if your use case prefers that. Here's an example:

   /*in a css file */ img { max-width: 90%; height: auto; width: auto; }

   That tells the browser to display images at a maximum width of 90% and resize the width and height accordingly (you do not need both attributes). For all img elements.

   For even finer control individual styling of classes can be done like so:

   img.responsive { /*css for specific class here*/ }

   And later specify the element is part of the image responsive class like so:

   

EDIT:

2. Centering or Positioning in CSS

   I found a simple website that generates the code on how to position elements in CSS for you based on input settings, which is a real issue on responsive devices as well. This is the website: http://howtocenterincss.com/

   Note that you will need to fully fill everything in (including the middle option). Also, despite the website's name, it also handles positions that are not center as well, so it is a fairly good catch-all.

3. Wrap the image in a container

   The benefit of this is you style the container, and every element inside it will adhere to the container styles if their attributes are auto. By specifying a max size for a container with width=800px, whilst making the image width: auto so the image will resize to the dimensions of a container.

These 2 examples are adapted from the following site, which is a great resource for handling responsive assets like responsive videos/images/fonts and relative sizing, 5 useful CSS Tricks for a Responsive Website. The author is much more well-versed on the topic than I am currently.

Note that as mentioned in that tutorial not all browsers support max-width (IE7 and 9 do but not IE8) so that might be an issue for some people who use outdated browsers. In that case a conditional CSS is needed of a hack such as below (example taken from site) is needed:

@media \0screen {
  img { 
    width: auto; /* for ie 8, */
  }
}

-- Notice how I just placed width:auto in my first example with the max-width attribute

Additional: Another Framework

Many templates made by web designer n33 employ the lightweight Skel framework to make responsive websites that load the right CSS based on screen size. However this is a Javascript framework which won't function when users have noscript turned on. In which case you have to load the CSS by specifying

A good reference on responsive templates (that have opensource files like CSS) that allowed me to study and understand some methods in making a responsive site can be found at HTML5UP.net also by the same developer that wrote Skel.