In my last blog post, I mentioned a project I was working on for a local preschool. In this post, I will go more into detail about the project, and the work that’s been done for it. Sometime last year, Owen and I took on the task of redesigning the website for Happy Time preschool in Pismo Beach. Owen’s job is to take the pictures, design the assets, and create the layout of the site. My job is managing the webserver, networking, turning Owen’s mockups into a live site, and overall getting the website online. We’ve been making good progress with this project, and we will be receiving community service hours from it.
This week, we’ve finally published a first draft of the homepage at https://www.happytimepreschool.com/. This is only the homepage, and the rest of the pages will be built out in the coming weeks. In order to get this page live, I had to build it according to Owen’s mockup. Having a mockup is extremely handy when making a webpage, as you don’t have to worry about the design, all that hard work is done for you. Despite this, not all the hard work is done.
One of the hardest things about web design is responsiveness. Your website has to work and look good on a 4k display (3840 x 2160 pixels) as well as a mobile phone screen (can be as low as 360×640 pixels) and every resolution in between. As you can imagine, this is a very large range of display sizes, and your website is naturally going to look a lot different on a phone than on a large display. There are two main methods I use to ensure a website is responsive. The first of these methods is responsive units. Every element on a website is defined using a unit. Instead of defining an element with an absolute sizing, where you define a height and width in pixels, I can instead make an element sized as a percentage of the display width or height. This makes it so that when the viewport size is changed, the element size changes as well. The other method I use is media queries. Media queries test for specific resolution sizes, and allow me to set different styling for different resolution ranges.
In the Happy Time website, practically every element is defined in vw, which is a unit that is a percentage of the screen width. For example, the main body of the website is 70vw, so regardless of the width of the device, it takes up 70% of the screen width. As of now, I have one media query that checks if the resolution width is less than 1000px wide. If the resolution is less than 1000px, then it changes the two-column layout into one column to make it look better on smaller devices. You can view my work on responsiveness by going to the website using the link above, and resizing your browser window.