New and (hopefully) Improved Tribute Page!

i feel like we may as well just make this thread a sticky, and judge all over tribute threads against this :yum:

but seriously, i’m glad its got the recognition it deserves, and its even better that your spending so much time replying to the folk that have all these queries, its good that all the fame hasn’t gone to your head, Dame Madalena :smiley:

1 Like

@Madalena.design I think it is cool that this topic has gone on for so long with so many replies.

1 Like

Problem is, if I know correctly Discourse doesn’t allow more than 1000 replies. :shushing_face:

1 Like

You have an eagle eye for good design.

1 Like

For typography… what methodology or style do you use? What should I follow to have a modular, responsive, and organized css typography?

1 Like

WARNING: This is going to be a very SUPER long read!

@shaux that is a very interesting question. But remember the other day, that you wanted to know how the px to rem conversion work? I am going to start with this first. Purely, because that does also play a role in typography too.

Px to Rem

I do hope you know why:

a) using pixel is a big NO (unless the value happens to be an extremely small number like 3px)

b) why rem is generally better than em. If not, let me know and I will explain.

Somehow, when using media queries to set the screen width size, only do it in em, because from what I have learned, rem does not work in all browsers at this stage.

Anyway, so how do the conversion work! Well, by default, the pixel size for browser is 16px. To get the same size of 16px in rem is 1rem.

Now, imagine you want to set the font size to 8px or 32px (but in rem unit), that is okay because 32 is double the size of 16 so that means double 1rem = 2rem, that is also easy with 8px because that is half of 16 so half of 1rem = 0.5rem.

That is all good until you get complicated numbers like 25px or 7px etc. Sure, we can look up for conversion calculator or do the maths ourselves, which to convert px into em or rem, would be like this:

25px / 16px = 1.56rem
7px / 16px = 0.44rem

OR we can make our lives easier by configuring the default size for browsers from 16px to 10px. Why 10px? Because that way it is easier to convert px to rem by just dividing the value by 10, which is basically now like this:

25px / 10px = 2.5rem
7px / 10px = 0.7rem

And that is something we can do the calculation in our heads without needing a calculator or looking up online for conversion…unless someone doesn’t know how to do divisions. However, before you start doing this, you need to configure the default size for the browser.

As mentioned, by default the font size is 16px. To alter this, it is to be done in the html declaration block as the <html> element is the root element and this is where all its child elements will inherit its font-size property, even though despite using the font-size property, this will also affect the properties of paddings, margins, line-height and so on.

To do this, the value is set using the % unit and the equivalent value of 16px is 100% (since it is the default value). Behind the scenes, this is how it is set in CSS:

html { font-size: 100%; }

To change from 16px to 10px is do the calculation:

10px / 16px = 0.625%
0.625% * 100% = 62.5%

So now if you explicitly change the value from 100% to 62.5% like this:

html { font-size: 62.5%; }

The new “default” browser size is 10px and all its child elements will be relative to that 10px.

However, in the media queries as you saw, for example:

  @if $breakpoint == small-phone {
    // 28.125em = 450px
    @media only screen and (max-width: 28.125em) {
      @content;
    } //450px

As screen width size is obviously in pixels we need to convert it to em. So if the phone has the screen width of 450px, even though we have now changed the default browser size from 16px to 10px, the calculation is actually done using the original size 16px in this process:

450px / 16px = 28.125em

So, keep in mind that doing calculation to convert px to em for media queries is not the same.

Okay, next round! :grin:

Typography

So the style, this is a tricky one because there is no right or wrong and remember this that some people may agree with the style, but there is always going be at least a someone that doesn’t. You cannot please them all. :woman_shrugging:

Also, it depends on the branding on the website. This is where you will be asking yourself a lot of questions:

  • Who is the client?
  • What is their product is about?
  • What is their style?
  • What is their mood and personality
  • and so on…

So, when it comes to designing the layout, you have got the main typography elements:

  • The headings
  • The navigation menu
  • The body text
  • The links

Not only you have to think about how they work with each other but also with other contents and the layout itself.

With the body text, if the branding have the modern feel, you are more likely going for sans-serif font type, if it has the traditional approach, then it is more likely to be a serif font.

(I stressed more likely because it is not always the case. Thus, it is more likely, NOT it is going to be).

But, that doesn’t mean the other typography elements should be the same as the body text. If you have noticed with my tribute page:

I have used a serif typeface for body text (because it has that book-ish feel, which works well for the author).

I have used a sans-serif for the heading and it has uppercase lettering (because it feels more masculine and firm).

Originally, the heading was a different font and it was a slab typeface (google to get an idea what it is), but I felt it didn’t work together. This is what I mean, you have to experiment with different fonts together to see if they work in harmony.

As a rule of thumb (for me at least) is to ONLY use two different fonts. If you going to have a third, it has to be a good reason such as it is only for the logo or a big display text for advertisement AND it is to be used only ONCE. But, no more than three.

Finally, the most important part of typography - Readability & accessibility. I cannot stress anymore that this is ten times more important than design (frankly).

This may come as a surprise to you, but I am partially blind and there had been websites that I have visited and not been a pleasant reading experience.

However, I would get the design part done first, then do this process. Here is the list of rules to think about:

Font size
I know this is obvious, but hear me out. Technically there is no THE pinpoint right font size because every font has their own size, some are larger or smaller than the average. Hence, I said to start doing design first. But the size of the font choice should meet at least the browser’s default font size (which is 16px).

Line height & letter spacing
This is something to also think about. If they are too squashed or spaced out, will it be easy to read?? Personally, I always change the line-height when I am doing a project as I feel it is too squashed, but again, that could also depend on what font you have.

Paragraph/column width
Columns play a big role here. Think about it, would you find it easy to read if lines of text were really long or would you trail off? Also, even if you set the columns too short, it will not be easy to the eye as it will be disruptive on stopping so short.

Colour
Make sure the colour of text have enough contrast against the background, but also to prevent harshness, don’t have a strong colour (like jet black against white or vice versa) on the body text unless the font-weight is really thin (which isn’t ideal to be thin as it will look like it is disappearing, so also think about the font-weight too).

Responsive
I will say it again. NO px unit!! Remember, if you do, then the user will not be able to change font-size in the browser setting and that is NOT good. Always, set it to rem.

Now, one last thing I want to share with you and I hope you will find this useful. :slightly_smiling_face:

There is a Chrome extension tool called WhatFont. Using this tool, when you go to a particular website and you found a font on a body text or heading that you really like but don’t know what font they use, this tool will tell you what font they use as well as what size and what weight. It is definitely handy!

I really hope this has helped you and given you plenty of ideas of what to do in the future :smile:

6 Likes

I’m so grateful for everything you have done for me… now I think I’m ready to start my next project! :smile:

Good luck for the future! :wink:

1 Like

You are absolutely welcome, if anything you have in a way helped me out too :blush:

Thank you! And that goes the same to you as well! I wish you all the best! :smiley:

2 Likes

Thanks. You have a great mindset , it’s a very good thing to have in whatever path you chose. Keep up the good work :clap: !

One of the best tribute pages that I have seen, your design style is wonderful keep up the good work

2 Likes

Okay, so basically when I created my first tribute page (of Roy Lichenstein) and made a post for in the forum for feedback, which I received fair and constructive criticism of what was needed to be improved.

I decided to take a peek at other members’ works on Codepen to see what they have done. From that, I could see why there were not much to be crazy about my tribute page and I know to have the same standards as theirs, I had to up my game. However, I also knew my CSS, HTML , responsive skills needed a lots of work on, so that is how I came across Jonas’s course.

I took a break from doing the tribute page and focus on the course. Once, I finished Jonas’ course, I decided to not change anything on the first tribute page because not just myself but I wanted the others to see how much I have improved doing a new tribute page and compare it to the old page. However, I am not sure if it is relevant to show my experience in job interviews.

So, there you have it! Yes, the course is finished now, but it was well worth it! :blush:

2 Likes

Again, thank you! :blush:

Well, it is nice to meet so many people on here, I mean I would also love to go to meetups, but at the moment this one is a challenge for me as I am not able to travel easily due to disability reasons. (I am trying to find one where it is during the day instead of evenings, but I know it is not a popular choice). However, the forum is a very good starting point in meeting others in the tech industry :slight_smile:

Also, I am happy to help others, especially if they are determined to learn and grow, by helping to answer their questions is actually good to improve your technical charisma skills and job prospect too :stuck_out_tongue:

:laughing: :rofl: I don’t think I am at that level unless I am mistaken that even at ordinary and average level people are now dame and have fame :wink:

1 Like

I know it has gone for too long, however as long it has its use, then it is all good :slight_smile:

And I feel like it does have its use (at least for me), the discussions and debates of PHP and JQuery to giving my opinions on the design aspect to others’ tribute page, for me it has been a learning curve, but I do hope it has been for others too, not just myself :smiley:

Well, I like to think before that, I would have moved on to another project by then (the survey form project)?

Even, though I am taking a break from it because I am learning Bootstrap at this moment and will be boosting my design skills and process to (hopefully!) the professional level :grimacing:

Regardless, only time will tell what will happens then :wink:

Aww, thank you very much! That is much appreciated :slight_smile:

Thank you! Also, I wish you all the best and keep going!
Remember, whenever you need help, always ask as we are all here to help each other out :blush:

1 Like

Awww, thank you very much! I really appreciate that :blush:

One of the best tribute page have ever seen, your design looks really great keep it up (hopefully) someday you’ll become professional :blush:

1 Like

That is really kind of you, thank you very much! I also hope I will be able to work in the industry! That is the aim :grin:

1 Like

Hoping to see more from you :slightly_smiling_face:

1 Like