Introduction to Responsive Web Design
This section touches only very briefly on Responsive Web Design here so the whole episode can be considered as just an introduction to the subject. I think it may be relevant to look at a brief history of the website.
As an aside, this website is being developed with the intention of it being ideally available on any device. At the moment, however, it is really being developed for a PC and then being checked on other devices to see how bad it looks! As I learn more about Web Development in general, I will hopefully improve this.
When I started out designing the first version of this website, Web Development really wasn't what I was interested in. The motivation for creating the website was just to have easy access to my course notes and any other learning notes I might accumulate while I was still studying for my BSc in IT Management.
That first version of the website was made up of pages created by taking Word documents, converting them to HTML documents and then putting them up on the website (which at the time was osztromok.eu and was hosted by the Czech company, Wedos.
The second version of the website which is hosted on my own web server, came about because I was starting to get a bit of an interest in web development and wanted to have a better looking website. This was a big improvement on the original site, but suffered from a few design problems. In particular, I used a complex navigation system that allowed a user to jump to any page on the site from any page. That was a nice idea, but very difficult to maintain.
The third iteration of the website is the current version you see before you! The main inspiration behind this was to simplify the whole site design, improve the overall look of the site to make it look more like a 21st century website than something from 1995, and to make it more accessible on other devices.
The first of these goals has been met already, I think. The navigation menu has disappeared and if a user wants to jump from one page to another, this is now done by either returning to the home page or one of the subject pages. Essentially, the home page provides links to each of the subject pages and the subject pages provide links to each page under that subject. From here, you can link to the notes on any course which takes you to the relevant course page and you can then jump to the notes for any episode (or subtopic).
At the lowest level, so to speak is a page such as this one which represents the notes for the episode, Introduction to Responsive Web Design which is part of the course, Introduction to CSS. In the previous version of the site, there were buttons to move between the episodes (I called them chapters for the purpose of adding button) and if you wanted to move to notes on another course, such as HTML Essential Training, you would do that by using the navigation menu to select Web Development and then HTML Essential Training to go to that course page.
In this version of the site, rather than two buttons, there are 5 (unless the page is the first or last chapter, in which case there are 4). As well as buttons to move between the pages, there are buttons to return to the course page, the subject page or the home page.
The menu on the home and subject pages is designed with a grid layout which I am just learning about so it doesn't look great yet! Each cell in the grid contains a link to the home page, a subject page or a course page. Since it is a very simple menu, I believe that it will be relatively easy to adapt it to be more responsive on smaller devices. Also, the pages containing course notes are really just straightforward documents so they look fine on any device although I may consider improvements in things like font-size or colour scheme as I learn more about responsive design.
Media Queries
Media queries were introduces in CSS3 and we can use them to target 4 media types
all - which means it is okay for all devices
print- intended for something being sent to a printer
screen - intended for something displayed in the viewport
speech - intended for something to be read aloud to the user
Each of these has features which can be tested for certain conditions such as screen width and this determines which CSS rules are applied for a given condition.
The generic syntax for a media query is
@media not|only mediatype and (media feature) { //styles }
In all likelihood, you will most commonly use media queries with screen because changing elements on the screen to accommodate different screen sizes is just a very common thing to do. To give an example of this, let's say that we have some CSS rules which we want to apply only for screens and only if the width of the screen is at least 800px. The media query might look something like this.
@media only screen and (min-width: 800px) { .site-title { text-align: left; } }
Notice that we are using only rather than not. If we had CSS rules applicable to any media type other than screen, we would have selected not. The media query is in curly braces and within that we have selectors and rules with the rules also being in curly braces so within the query, the CSS we want to apply if the defined condition is met is written as standard CSS (you might think of it as a mini stylesheet).
What is Mobile-First
In 2017, mobile first was a popular "buzzword" in web development. I'm not certain that this is still the case because responsive designs are not handled with media queries to the same extent. Modern web development (to my knowledge) is more dependent on layouts. For example, you can use a grid layout to automatically size different areas of the screen based on screen size (particularly available width for the viewport).
Depending on the HTML you are using, it may still be a useful approach. For example, an older style of CSS might specify that you have an <h1> element with a font-size of 60 pixels. You might then add a media query to override this and set the font-size to 30 pixels if the screen size is less than 640 pixels. Using a mobile first approach, we would set the font-size to 30 pixels and then add a media query to set the font-size to 60 pixels for larger screens. This will look like
// Settings for smaller screens h1 { font-size: 30px; } // Settings for larger screens @media (min-width: 640px) { h1 { font-size: 60px; } }
This approach ensures that as little data as possible is sent to smaller devices so it is optimized in that sense, but perhaps more importantly, designing your CSS in this way helps to ensure that your design looks good on a smaller screen and you can then modify the design with media queries to suit a larger screen.
Something I have often found useful when creating media queries is to begin by creating a media query with a very clear CSS rule. As an example, I have added a query to this page
@media only screen and (max-width: 900px) { body { background-color: black; } }
This sets the background colour to black for screens less than 900 pixels wide so I can load up the page in a browser on a device such as my smartphone and immediately see whether the media query is successful (for instance, I might have used the wrong width or the wrong type of test). Once I can see that, I can then add queries specific to that device. I can also see whether this query is suitable for other devices such as a tablet. If not, I might add another query to cater for that size of screen and repeat the same process. I should point out that this is not a mobile first approach so, but it would be easy enough to adapt so that these media queries are being used to handle devices larger than a smartphone.