Design Critique

[SilverSerpent]

I have this design that I have been working on, and it is my first real website design for someone other than myself. It’s been designed in the browser but I stitched it up into a JPG since it’s not online yet. The site is a landing page for a hardware supply store’s trade show that is coming up in October, and is meant to give information about the suppliers as well as the show itself. It is responsive, but nothing fancier than a little rearranging for the suppliers boxes, resizing the header text, and turning the nav into a dropdown. I’ve been trying to grow my skills in the design part since I feel like a already have a fairly good knowledge of the development side. Any opinions will be greatly appreciated!

-Edit by mod: moved to Design Den-

[SilverSerpent]

Thanks! It is actually up now, but is still in development so it may look weird at times. And yes, the tiles do flip over on hover

[SilverSerpent]

That’s really odd. I had tested it in FIrefox 21 on my Mac and it worked just fine, but when I updated it to 23 the scrollbar appeared. Should be all fixed now, thanks for noticing!

[SilverSerpent]

I was thinking the same thing about IE, I just haven’t gotten around to that yet. I figured that as long as it’s still functional I could put off trying to wrestle IE into making it look pretty for as long as possible! And I downloaded the Bebas kit directly from FontSquirrel so I’m not sure why it would be fuzzy.

Edit: In IE10, I had to disable the flip because instead of showing the back face of the card, it just showed the front face reversed. I’ll reenable it so people can see what I mean. On caniuse.com, it says that IE10 doesn’t support the “preserve-3d” property, but it says that’s only for nested 3d elements. Does anybody have a clue what’s causing this?

[Historical Forums User]

I don’t really like the green border around the items on the Show Specials page , but maybe that’s just me ? Also maybe you could put some work into the Contact Us section – use callto: in the anchor. You could also change a little the layout of the Name , Phone and Email list items and maybe add 1px padding-bottom to the ul so that the black border on the left spreads equally (my stupid pixel perfect eye). To my opinion it would be better if the FIND OUT MORE ABOUT… text on the back of the card is centered , but that’s just me :) Anyway the design is pretty clean, good job, I really like it :)

[Historical Forums User]

It’s is also a very good idea to put target=”_blank” on the anchor tags in Manufacturers and Show Specials so that the links open in new tab and the user does not leave the website :)

[SilverSerpent]

Thanks for the critique! The green border is to show which manufacturer has a pdf available, if you look now you will see that some are disable because they do not have a pdf. We had to implement this because our manufacturers don’t all give us their specials at one time, they may be spaced out over a month or two. As for callto, is there any advantage to using this over tel like I currently am? From what I have read, tel is a standard and supported by all mobile devices while callto is mainly used for Skype and is not a standard.

I do agree with centering the text on the back of the cards, I tried for a long time and could not get it figured out. The way I have tried (based on this pen) doesn’t work because I use a padding-bottom on my cards to make them perfectly square who knows why. Here is a stripped-down pen that I am trying to get to work to apply to my site. If anybody wants to try and figure out what I’m doing wrong, please feel free because I sure can’t.

As far as the target="_blank" goes, I have applied that now to the specials page because it links to a file instead of a website, but for the manufacturers page where it links directly to a website I am considering just leaving it alone because from a usability standpoint people may be used to using the back button instead of closing out the current window (keep in mind that many of the people who will be viewing this site may not be very technically-minded and may get confused by this). What are your thoughts on this?

Finally, I have updated the footer to my site to include an address and phone numbers as per my client’s request, but now it seems a little busy to me, or is that just me? Thanks again for your opinions and sorry for such a long post!

[Historical Forums User]

Well, about the contact information I meant that you could stylize the contact section. You are right about the tel: leave it that way. I will check you implementation of the cards and see if I could center them. As for the footer, maybe you could put that contact information under Name, Phone and Email too :)

[SilverSerpent]

Ok thank you!

[Historical Forums User]

Now it seems to be working just fine. I wrapped the text in another span and gave it a class=”text” , then relatively positioned it and used that trick . You could use margin-top:-25% as well but transform is better. By the way, always clear your floated elements (maybe you know it but just forgot). You could see the changes here.

Hit me up if there’s anything unclear :)

[SilverSerpent]

Why didn’t I think of that… Thanks! I really appreciate all the help you’ve given me :) (and I had just forgotten to include a clearfix on CodePen, the site itself does have it)

[Historical Forums User]

Maybe you could add all of the vendor prefixes for transform as well just to be sure :)

[Historical Forums User]

I stumbled upon the line-height and vertical-align:middle not working as well , but then just realized it’s not worth trying so just used position :D

[SilverSerpent]

I’m using prefix-free to handle all my prefixes so I should be good. That was the point I had gotten to as well, I just didn’t think I had any other options!

[Author]

Posts