Blogr landing page documentation
This is a documentation of my project Blogr landing page.
This page is a standard landing page with a focus on a “non-static” layout. What I mean by “non-static” is that it’s not the usual simple static website where the elements are laid out just stacking up on each other. As you can see, some images bleed outside the box. The positions and sizes of images are also fully customized to solve the design challenge asked by the mockup.
As a standard landing page, the page has a navigation bar, main area, section paragraphs, images, and footer. The next challenge is the navigation bar dropdowns and the mobile device hamburger navigation.
I also gave substantial effort to use calc(), clamp(), and other CSS functions to create fluid typography and “fluid sizing and positioning” of the images. This allows the position and size of the text and images to smoothly adjust in accordance to the viewport width.
Progress log, thinking process, learnings
I started this project from FrontendMentor on May 15, 2022. I thought it was going to be easy, but it was not. I officially finished the code on May 30 with a three-day break on May 27-29. All in all, I used 13 days measuring the mockup, exploring CSS properties and functions, calculating certain values, and writing the actual code. Why did it take me that long? Let’s break it down.
Day 1 - Measuring
Based on my log, I was measuring the paddings, margins, other sizes of the intro section (the big orange-red-pink box). The provided mockup was only an image, so I had to manually measure things. I also wrote some general styles.
Day 2 - Basic coding of intro section
I think I was still measuring some stuff and still planning. I coded some of the intro section without the background image. I also learned the issue called margin collapsing, which can give unexpected results if you’re not aware of.
Another time-consuming activity was finding the perfect dropdown arrow. I can’t believe it does not natively exist as an HTML entity. I ended up using a FontAwesome icon.
Day 3 - Challenging background image, learning grid
Well, I found out that the design materials actually had the dropdown icon. I just did not search for it. The main challenge today was the background image. I was also exploring grid.
Day 4 - Fluid typography and calc()
I wasted so much time thinking without doing. I think I am that kind of person oftentimes. I always try to perfect my thoughts, ending up a procrastinator. I was productive later, though.
I dedicated some time doing measurements to properly place the background image and to create some sort of fluid typography. My main tool was the function calc().
Day 5 - Other CSS functions (esp. clamp())
During days 4 to 6, I was jumping around trying to do the best option for the font sizing and the position and sizing of the background image. Why? Because I realized I also had to check for responsiveness up to XL monitors. It’s a challenge to ensure that the layout looks proper, starting from phones up to XL monitors.
I was being fastidious especially for the main h1, which I wanted to have sufficient space for all phone devices. Hence, I was trying and jumping between formulas and everything. Also, I was trying to avoid media queries when adjusting the sizes between devices because I wanted to purely use the clamp(), max(), min(), calc() formulas.
Day 6 - CSS functions + media queries = simpler code
Yes, CSS functions were good, but I thought that the code could be a mess. That’s why I used CSS functions alongside media queries. The result? Simpler code. I realized at that point that I was wasting too much time on tiny details.
I also realized that fluid typography should not heavily depend on the viewport width. I mean, when writing formulas for fluid typography, make sure that the big part of the formula is em or rem, and not vw. If the formula has a big chunk on vw, we are removing the ability of the users to zoom their system fonts.
Say, at 400px viewport, we want the font size to be 20px. First case: we can say that it is 5vw (or 5% of the viewport width). Second case: it can also be 1em + 1vw. (By default, 1em = 16px). If however the user has zoomed his/her system font to 150% due to poor vision, then first case stays at 20px because it is purely dependent on viewport width. The second case becomes 28px because 1em becomes 16px * 150% = 24px. First case is undesirable for the user.
Day 7 - Almost always use px for margins and paddings
I was still jumping around, about using em, rem, or px for margins and paddings. Before this project, my idea was to always use px for margin and padding. Later, I realized that in order to accommodate XL screens, I had to increase my body font size on XL screens, then use em for margins and paddings. In that case, paddings and margins adjust accordingly.
However, this became devastating on mobile devices for phone users with zoomed system fonts. The padding and margin looked too spaced out and ugly. That’s why I reverted back to px-based margins and paddings.
If you think about it, XL monitor users bought their device probably for the capability to fit more things on their screen. If I try to adjust all my sizes according to their monitor size, then I am robbing that capability from them. Anyway, I still slightly adjusted the font size, but not the margins and paddings.
Day 8 - Apply all learnings (esp. fluid sizing), finished section 1
I finished section 1 (”Designed for the future”).
Day 9, 10, 11 - All other sections done
I finished the other sections and footer. The images are properly positioned. The images automatically and smoothly adjusts (in size and position) according to viewport width. The same goes for the headings. Pretty much done. I also tidied up the code.
Day 12, 13 - Mobile navigation, simple JavaScript code
I finished the navigation bar and hamburger navigation. My mistake was that I finished the navigation early on with a desktop-first approach. Now, I was trying to revert to a mobile-first approach, so my code was kind of messed up, trying to begin again. Anyway, I fixed it already. JavaScript functions were already done. I was happy to write relatively cleaner JavaScript compared to the code I wrote for my own website.
Final comments
Overall, my biggest mistake from this project was spending too much time on CSS functions because I was trying to be fancy with the smooth adjusting of the font size, image size, and positioning. I learned a lot, though.