HTML / CSS

Using CSS (cascading style sheets) in well-formed HTML is good practice. Whereas in the past you may have seen endless tables nested inside each other, more than ever DIV and other HTML elements are used together with CSS for cross-platform, search engine-friendly webpages.

I have used CCS structures such as Bootstrap, but it’s probably more useful long-term to understand how the CSS behaves so I have also made many websites with my own CSS. See this scalable website demo for a charity.

The problem with tables is that they are meant for presenting tables of data with rows and columns, the table elements do not support a lot of the CSS attributes. It’s also old-fashioned to have a lot of formatting in the HTML files. By using nice HTML tags with the “content” on the HTML files, all the formatting info is completely separate on the CSS file.

So, if there is a lot of formatting you only have to load the CSS document once, thus saving bandwidth. While bandwidth is much less important than it used to be on desktop computers, it’s still relatively important on mobile devices. On phones and tablets the connection speeds may be much slower so the less that has to be downloaded with each click the better.

With HTML5 and CSS3 you can have your website fit any device with any screen size. Media queries can detect the screen size and the CSS can give elements different values, or even remove elements, depending on the size of the screen. Even if you just want to show the full website on mobile devices you can do this using the viewport META tag. The different form inputs in HTML5 also make user-input much easier on phones and tablets. Care must be taken to ensure that the website will work on each browser, “@supports” in CSS can help too.

One problem with excluding content with media queries is that while you’re not showing the content if it’s in the HTML the viewer may be still downloading it. If this slows things down too much or is a problem then having a separate mobile website may be the way to go.