The HTML coding was probably the easiest part. All you had to do for the HTML was add the meta tag which essentially tells the browser to base the width on whatever device it is being displayed on.
The CSS code was a little more in-depth because you had to define what would happen as the browser "scaled" as it was displayed on different devices.
As you can see in the bottom of the first image and in the second image, there are different things that happen based on what size the screen is. For example, when the screen is larger a certain number, it is displayed as though it was on a desktop, like so:
However, when it becomes smaller, the sidebar is brought underneath the content and above the footer. At this point, the sidebar is still visible. This change is shown here:
Finally, as the screen becomes even smaller, perhaps on a smartphone or other smaller device, the sidebar disappears completely so only the header, content, and footer is being shown:
This is where the importance of content comes into play. Like we were discussing in class the other day, it is important to keep a happy medium between larger and smaller devices so the user isn't missing out on content because of how they are viewing it. It is important to think about this as I move into designing my event website.
No comments:
Post a Comment