Critique my website?

Tengis

Tengis

Supreme [H]ardness
Joined
Jun 11, 2003
Messages
5,951
Anyone willing to look over my site and give me some pointers? I don't consider myself a professional but I have been working with web design for the better part of 15 years as a hobby. Built my business site on top of Wordpress with a bunch of customized CSS. I have changed quite a bit on the site in the last year since I launched it - I am very indecisive.

I'm hoping to get some design pointers on what I have done and maybe any suggested changes to make the design flow and be more consistent. I have made about 20 different versions of the home page. The current home page got the most thumbs up from family and friends but I still would like to spruce it up a little.

Website is ronin imports (dot) com.
 
Two things distract me just at the begin: the font for your headers and even more the big fat "like me in Facebook" ; the later one even before the business is introduced.

I would first talk about the business and later ask people to like it (but many pixel smaller)

Else when trying to navigate from my iPad through the other area it reached slowly. If not done try to use minified libraries to reduce download times.

One more thing: make sure you have the right to publish or better own the impages you used (like the violet car on the intro)
 
You aren't the first person to say that about the font. My goal was to use something with a little bit of character versus a generic sans serif derived font (or similar). That stuff is easy enough to change site wide, and I actually have changed it about a dozen times. Suggestions?

I made that version of the homepage recently and do agree that it needs some more substance. The homepage has a hand full of large images though, Ive experienced slow loading when I am mobile on my phone. I was thinking maybe have the site load alternate versions of the images for mobile?

As far as the images go, the picture of the violet car was taken by a buddy of mine. I believe all of the others on the homepage I took while at Tokyo Auto Salon.
 
Agreed - that font is bleh.

The giant moving like button and yellow/green pointer are annoying.

Your site is slow loading.. even for wordpress. It looks like a large chunk of your images are 600kb to 1.5mb big. Resave/optimize those to 30-50k.
 
Run "YSlow" or some other clientside performance analyzer against the site. As others mentioned, the load times are longer than expected; this is something where an analyzer will help identify areas to improve.

Aside from that, could you elaborate on 1) what your goals are for the redesign, and 2) what you are going to use to measure the success of your efforts? You've certainly spent a considerable amount of time on the overhaul (e.g. 20 revisions), and all of us would like to offer suggestions toward your goals.
 
PTNL, we have a few products we are developing that we will be selling exclusively on our website. We anticipate traffic to pick up quite a bit. By the time those products are live on the website we are going to have a number of other smaller items on the site to be "impulse buys" (keychains, stickers, etc). The goal is to have a website that looks good, looks unique to this particular market (a lot of the websites for importers are really really bad), and (obviously) serves as a platform to get people to buy stuff.

I think the problem with slow load times might be the amount of large images on the homepage. I just did some checking and there is more then 7mb of images. I also imagine that Wordpress isnt the most efficient platform to build a website on top of which could be part of it.

Goals: I want a functional, modern looking homepage that draws people into the site. Once I have the homepage finalized then I can go through the other pages and tweak the designs to be consistent.
Measure Success: Thats a good question. I have site tracking stats that I can watch but I am not sure what I can use other then that.
 
Pretty poor load times. The content is quite bad, too -- you should have an editor go through it. There are encoding problems, as well.
 
Poor load times everywhere? Or just the home page?
 
I'm looking at the encoding issues... I'm really not sure how to fix most of that stuff with this being wordpress.
 
Well, I woke up bored at 3am and tried to do some optimization. I guess it worked out decently?




First Test

speed1.JPG





Second Test with some images reworked to reduce overall size

speed2.JPG





Third test with some minify stuff installed and configured in Wordpress

speed3.JPG





Fourth test to reduce even more images to reduce overall size

speed4.JPG
 
modi123 said:
yellow/green pointer are annoying
Click to expand...

In Japan its a magnet/sticker you put on your car used to signify that you are a "new driver". Its basically been adopted as the universal "JDM symbol".
 
Ive made a number of changes to the website. Anyone have any input on the newest revisions?
 
I clicked around tonight and I have the following:
- site loads slowly. Opening multiple subpages as new tabs causes the animations to stutter,
- when you go to contact, and scroll down, once you get below google maps, the maps 'steal' your mouse focus and the map view scrolls as you scroll down the page,

- in 'wheels', I clicked a random thumbnail and lightbox (?) failed to open. It got stuck on a white square. When it did work, the loading of thumbnails within lightbox is unnecessary and slow. Also, obscures the picture you're actually looking at. And I think the filename should not be visible because it's sometimes pretty random,
- the delay when lightbox loads and the resizing effect are slightly frustrating. I think you could make the images simply pop out front and center with less fanciness :)
- within 'lightbox', the top left and top right icons sometimes don't show up, I think that's what mikeblas meant by encoding problems.

- there is no need for the top nav bar to resize. The large version as well as the smaller one are both fine, the animation and opacity change is unnecessary. Consider having the transparency 'on' all the time but very subtle
- on the front page, as I'm scrolling down, I can't miss any of the three large images that immediately do a horizontal flip. Consider adding a delay, or removing the effect. When large objects animate, it can be distracting,

- navigation breadcrumbs (under the menu buttons) sometimes disappear against the background and they're in an odd place. Make them slightly bigger, maybe a bit higher, or even place them above or below the subpage's title

- vehicles->inventory is pretty solid, while the shop is an example of choppy performance and slow load times.

You're not that far off from a nice site, but I'm not a pro neither.
 
Hmm. What browser are you using? Im not able to reproduce the lightbox stuff and a few of the other issues. Im going to look into changing the lightbox.

- The map on the contact page is actually a parallax effect - it moved as you move down the page. It shouldn't be scrolling at all when the mouse is hovered over it (I have that disabled).

- The three images on the main page actually flip on mouse over and shouldnt be flipping automatically. Are you on mobile browser?

- I actually agree on the top bar.
 
Tengis said:
Hmm. What browser are you using? Im not able to reproduce the lightbox stuff and a few of the other issues. Im going to look into changing the lightbox.

- The map on the contact page is actually a parallax effect - it moved as you move down the page. It shouldn't be scrolling at all when the mouse is hovered over it (I have that disabled).

- The three images on the main page actually flip on mouse over and shouldnt be flipping automatically. Are you on mobile browser?

- I actually agree on the top bar.
Click to expand...

Oh, I know what you mean about the map then. Any chance you could make it smaller, so that the movement of the map is not detrimental to performance? I'm on an old E7500 @ 3.9GHz.

Yes, the images flip only on mouseover. However, I'm the kind of user that keeps his cursor on screen and scrolls down with the wheel, so I simply can't 'avoid' them as I'm scrolling down. Adding a small delay would do the trick IMHO. I'm on 1280x1024.

My browser is a desktop Firefox - This Weeks' Edition :p (51.0.something).

For the lightbox - I would go with a version that only does the zoom. No background dimming, no animation aside from maybe blur in/blur out.
Also, for some reason, after I spent a while on the page, the lightbox issues (encoding and blank image) resolved themselves. Sort of - it failed to load fully at first but did after a while.
Note - these aren't dealbreakers. Site is interesting and pretty useful. Just a tiny tad over the top? I saw you compressed your images,but perhaps lower their resolution, too. Just by like 20%.
 
Tengis said:
Well, I woke up bored at 3am and tried to do some optimization. I guess it worked out decently?
Click to expand...

You should be aiming for 1.5s or better. Ideally 1s or lower. Example client results for comparison and its a very image heavy website running WordPress:
Screenshot%202017-03-01%2010.18.45.png


1) Full static caching if you haven't already. Something like WP SuperCache + nginx or Varnish so you avoid hitting PHP-FPM wherever possible.
2) Make sure your hosting is on PHP 7.x
3) Say no to hosts using Apache. Nginx is a good choice.
4) Use a object cache with memcached or redis.
5) Make sure its on HTTP/2. The performance benefit multiplexing lots of resources is large. This is particularly relevant with WordPress since the ecosystem of plugins and themes is terrible for enqueuing a large number of individual stylesheets and javascript files and trying to concat things is a pain between caching and updates.
6a) Run your images through ImgAlpha (where relevant) and always ImgOptim or the CLI tools those mac apps rely upon. If you want to do this automatically for media library uploads you can use a plugin like EWWW for WP.
6b) WebP all the things if you don't mind dealing with the headache of serving up different image formats to different browsers.
7) Put it behind CloudFlare and setup cache everything rules with exceptions for wp-admin and preview etc.

Or better yet use Statamic instead of WordPress and you will thank yourself for having a modern platform (Laravel) with all the modern tools and development practices you cannot employ in WordPress. ;)
 
Statamic looks interesting. I guess the only problem I see is that I plan on using various features of Wordpress that allow stuff to sync: payment processing, accounting, inventory (etc). I do not consider myself an advanced web developer by any means so I dont even know if Statamic would be good for me.

I made some changes to the site and it seems to be loading faster. Apparently my site is already HTTP/2 by default through my hose because I have an SSL certificate. I am going to go through and check the images like you suggested.
 
I don't know how much control you have over you pictures, but seriously how come image compresion has become such a lost art in optimzing sites?

Your logo went from 40,734bytes to 24,966 with a simple png optimization tool ( no picture data changed)
IMportcar2.jpg went from 200016bytes to 180066bytes (10% reduction in size.)

it take a split second to optimize the huffman table in jpeg pciture
it take a few secong to quickly optimixe png files

A few minuttes of computer time and the site would maybe take 15-20% less bandwidht and load faster.


Anything else i have absolutly no knowledge about to help you with :(
 
Your primary goal is to direct people to the store, but the call to action simply doesn't stand out.
 
SvenBent said:
I don't know how much control you have over you pictures, but seriously how come image compresion has become such a lost art in optimzing sites?

Your logo went from 40,734bytes to 24,966 with a simple png optimization tool ( no picture data changed)
IMportcar2.jpg went from 200016bytes to 180066bytes (10% reduction in size.)

it take a split second to optimize the huffman table in jpeg pciture
it take a few secong to quickly optimixe png files

A few minuttes of computer time and the site would maybe take 15-20% less bandwidht and load faster.


Anything else i have absolutly no knowledge about to help you with :(
Click to expand...


I usually export/save them from Photoshop. I guess I wrongfully assumed that Adobe was compressing/optimizing them enough.
 
Tengis said:
I usually export/save them from Photoshop. I guess I wrongfully assumed that Adobe was compressing/optimizing them enough.
Click to expand...

adobe does a horrible compression optimization.
and if not for smaller files you can reap the benefit for higher quality (on jpg)


Google has invested alot of ressources into kaking an jpeg optimiser
https://github.com/mozilla/mozjpeg
I'll try to find a compiled version if you need it

I can recommende ECT for a good PNG optimizer
https://encode.ru/threads/2274-ECT-an-file-optimizer-with-fast-zopfli-like-deflate-compression

all command line though.


I will say that you got a start fomr using png for log stuff and jpg's for photo stuff. it very rare these days to see people using the correct image format. to many people just destroy their logo with .jpg
 
Solarlight said:
I'm a newbie in web design, I build websites using mostly Joomla. And I think that your site looks pretty nice. I can't give you a good piece of advice, but I want to say that it is great that people ask for the feedback. It helps them to make their websites better and there is a lot of useful information in posts for the beginners like me. Thanks and good luck!
Click to expand...

Thanks! My site is built on top of Wordpress with a bunch of custom CSS. At some point in the next few years I will end up moving our website away from Wordpress, but for now the simplicity of adding products, cars, etc along with the plugins to sync things across accounting software and such is all too convenient.
 
Still looking for any input on the design. Specifically, I am hoping to have someone give me some input on the way Woocommerce is displaying the store. I will be adding about 50+ products by the end of the year and I would like the store to look as good as possible.

I have been toying with the idea of rebuilding my website on top of a purpose built ecommerce theme.
 
I'm not sure how everyone here feels about DotNetNuke, but it is pretty easy to use for ecommerce, there are several nice themes available too
 
There are couple of woocommerce boosters plugins that allow custom form and page changes. For example "woocommerce booster plus", that can be nulled or purchased by ur decision. Anyway u can also try to order html-js type of site from web-studios without such kind of headache from common bugs and other WP mess.
 
You could do better mate. Optimize the photos better PLEASE.
 
Low content - Add more content, it is too far on the rankings and your website doesn't have analytics. market it on social and search
 
You must log in or register to reply here.
Back
Top