Submitting a new item. Your thoughts about it?

Envato Authors Theme Authors
,
1

Hey guys,

Today I submitted a 11 months of work admin template. If it gets approved, it will be my fourth item on TF. Wanted to have your thoughts on it.

Thanks for your feedback.

1 Like
2

Wont load, waited for 5 minutes and it just kept loading.

1 Like
3

Weird. Browser?

1 Like
4

Used Chrome and Firefox, using Gigabit internet.

1 Like
5

Not able to reproduce this. Is it still happening?

1 Like
6

So I got a soft reject with the following reasons (typography):

TYPOGRAPHIC HIERARCHY: The typographic hierarchy of this item requires additional work. For more information, please read: http://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636

FONT COMBINATIONS: It’s recommended that you pair complementary fonts that add to the design aesthetic you’re going for. In general, a design should utilize less than three (ideally two) font variations that each compliment another — not compete for attention. Ref: https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/

Iam currently using Roboto as the only font for this. Would you guys recommend to pair it with another one. If yes, what do you generally use with Roboto?

Can you guys give me some feedback about this since the reviewer doesn’t provide any example about the typography hierarchy mistakes. Thanks for your help!

2 Likes
7

I still can’t load the site for some reason, so unfortunately I won’t be able to help you.

1 Like
8

sorry about that, that’s a bit odd :expressionless: I can’t understand why.

1 Like
9

same

1 Like
10

Looks great! It is loading, but its taking a very long time. Took around 1 minute on a 20 Megabit network.

Also, usually with roboto i tend to use poppins for headings.

2 Likes
11

That’s weird, It loads instantly for me wether Iam on my phone 4G or my laptop with wifi network. Can’t really tell what’s happening. Thanks for the advice, I went with Montserrat for headings to pair with Roboto for body.

1 Like
12

Montserrat was my 2nd option, was too lazy to type it :grin:

Also, regarding loading, the landing page is whats taking its time, not the actual dashboard.
I would consider lazy loading images since you have alot of them there.

2 Likes
13

If you inspect the images on the homepage, they all have the loading=“lazy” attribute. Or do you mean I should do it with a library?

1 Like
14

Not sure exactly what the issue is, at this point I doubt its a lazy loading. I will attach to you two screenshots from the Network tab in chrome dev tools with how longs its taking to load the page (with cache cleared)

and it went all the way down to 2.4 minutes before it got fully loaded. It’s weird though because your images really are lazy loading, but I have personally never used the built in browser solution for lazy loading.

I think it’s the window.on(load) function which is causing the site to look slow due with the preloader.

Here is a quick pingdom result

Load speed is fine, but requests is A LOT, so is page size. Doesn’t look like the lazy loading attribute is doing the job the way you expect it to.

2 Likes
15

Also, a side note. Even after the page has loaded 2 minutes later, the images under the fold would still be lazy loading, and I will have to wait before they pop into view.

2 Likes
16

Thanks for that awesome feedback. Looks like you’re right, looking at your screenshot, I can clearly see that the lazyload attribute doesn’t do its job. Maybe it works better on some browsers since I never exerienced this on my side. Good point. I’ll be switching to proper lazy loading with a library. Do you have any recommendations? What do you personnaly use? There are a bunch out there, so Iam not really sure about what to pick.

1 Like
17

Honestly, only used one lazy loading technique before, and did not rely on a library.

It is by attaching the image src to a data attribute, e.g. data-lazy-src=“YOUR_IMG_SRC_HERE”, and you can add a fixed width and height placeholder with a grey background while the images get loaded.

Alternatively, instead of the grey background, you can add a small version of your image with 100% width and height and filter blur to create an effect similar to how Medium loads their images, and while the src in the data-lazy loads, you can replace it with the original image src (using some js magic)

Finally, on image load (using js/jquery), you replace the actual image src, with the data src

Also, you can hook the above on load function with jquery waypoint or jquery inview, to only load the images when they’re in the viewport ( on scroll ).

This is one source that uses data-src as a loading method, haven’t checked it out yet, but it COULD be what you’re looking for

2 Likes
18

Thanks man, I’ll check it out.

2 Likes
19

Great comments… thnx… :+1::clap:

2 Likes
20

So I implemented something following your advice and here are the new metrics on page first load, like minus 65MB :joy: :joy: :joy: that was just ridiculous. This is much more reasonable (still on dev though, not live).

metrics

1 Like