New and (hopefully) Improved Tribute Page!

New and (hopefully) Improved Tribute Page!
0

Aww thank you! I am happy to hear to that! If anything, I am definitely no professional myself, especially with the responsiveness, to achieve what I have designed is hours of tutorials and research but I am happy to make it in the end!

2 Likes

Your tribute page looks amazing! Great work!

2 Likes

It’s always satisfying to see the final render of these hours coding !:slightly_smiling_face:
Oh! by the way can you take a look at this project : https://codepen.io/Dyerlin/pen/zQVoVv, and tell me what you think about it. Please, be brutally honest!

2 Likes

aye it is so good! keep up your work!

3 Likes

@Madalena.design It looks professional.
In mobile view the novel icons could be a bigger size. View the page on a small screened smartphone.

4 Likes

Simulation of iPhone 5 with the novel icons:

Learn how to simulate devices on this post:

5 Likes

This site is fantastic, I really like the way the background image shifts on the scrolldown - I personally have never seen that before. Very visually pleasing and well-presented.

The only thing I can see is that downward browser scalability width breaks at 308 pixels. Whether that matters or not would depend on your target audience.

I admire what you have done here, and this gives me an idea of why javascript is worth learning just up the road.

3 Likes

That’s very easy to do. You just have to set the image background with background-image in CSS, and then set background-attachment: fixed. Very easy. It is a nice effect, indeed.

5 Likes

Thank you, Caleb. You give good advice.

2 Likes

Yes, it does look strange on a JioPhone 2 (which is tiny but not popular, 240 by 320):
DeepinScreenshot_select-area_20190608160407

2 Likes

There could be an unintended advantage to that which is interesting. That looks like an old style Polaroid photo.

3 Likes

Hey! Sure! And…I had a good look! Now you want me to be …brutally honest. Well, I will try haha but I have been told I am a bit of a softie :woman_face

Okay, first I will tell you what is good, then I will will get to the critical points.

  • I love the colour palette you have put together. It is very warm summery and it works well with the particular background image. Good choice! :sun_with_face:

  • The responsiveness is just perfect, I have tried and tested on different screen devices and the changes of layout work in harmony to the size

  • Good font choice here! It is very modern and trendy which works well with almost all audience target, yet it is still readable. :+1:

Now, onto the critical points where these are just my opinions (as I am from a design background). BUT, they are not necessary. The last point, I feel, is necessary but that is your choice!

  • While the background image is lovely, I would set it to fixed position. Meaning when you scroll down, the image stays in its place and does not move. I am not good at explaining, but if you add this code onto the background image below, you may get the idea of what I mean:
background-repeat: no-repeat;
  background-attachment: fixed;
  • Okay, this is so not necessary, but maybe I would make the main heading bigger. Again, I am just being fiddly! :wink:

  • The point is crucial, I would recommend adding spacing between the radio buttons and its text, This goes the same for the checkboxes too. Not only by doing this it will make design-wise more pleasant, but it will be easy on eye as well, especially being mildly dyslexic :grinning:

Well, I hope this has helped you! :blush:

1 Like

Thank you very much! It is deeply appreciated! :blush:

1 Like

Thank you! I shall do my best! :grin:

1 Like

First of all, thank you for your thought! But mostly, a big thank you for pointing this out because it has been one of my biggest concerns as I remembered being taught that buttons or anything to tap on smaller devices is crucial.

I wasn’t sure if it was too small or not, despite having checked it out on my device. (oh, and it doesn’t help to have very skinny fingers haha :smile: )

So, it is on my to-do list and tomorrow I will be onto to re-sizing the novel icons to see how it goes!

Again, a very big thank you for pointing this out!

1 Like

I think this may be what I am looking for! I admit I was and kind of still struggle to find a mobile simulator because despite that emulator on Google Dev tool is supposed to be good, it hasn’t worked out well for me at times and have been using chrome extensions and using my actual mobile and tablet devices, which is not very effective I have to say.

I will definitely be checking this out tomorrow so a BIG massive thank you!

2 Likes

Thank you very much for your thoughts, that is deeply appreciated! :blush:

As @Steffan153 mentioned in his post, this is a very simple technique, which I have first learned through W3School check it out if you want to give it a go at some point, you will be surprised how easy and simple to do!

For the scalability issue, especially now seeing the effect. this is something I am going to have to consider looking into tomorrow. But a BIG thank you for pointing this out! :blush:

Javascript is worth learning, but I will have to admit it is a very challenging language! :crazy_face:

2 Likes

Dang! I thought I have fixed this issue! Will definitely look into this tomorrow!

Well, it is when you first start with it but afterwards it will be just fine. For me, it was a bit tricky in the beginning (but not that tricky, maybe because of experience with other languages (but only PHP actually)) but now it’s very easy. If you don’t have experience with other languages, then, well I don’t know, but it’s probably trickier.

One website I highly recommend for learning things is academind.com. There’s lots of free YouTube videos there, but if you want to dive into a certain topic, you can buy a Udemy course.

2 Likes

Gotcha! That was kind of aim for the header! :grin:

2 Likes