- This topic is empty.
August 20, 2013 at 10:13 pm #147651
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-August 21, 2013 at 10:34 am #147733
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 hoverAugust 22, 2013 at 1:53 pm #147890
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!August 22, 2013 at 2:11 pm #147892
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?August 27, 2013 at 6:34 am #148224
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 :)August 27, 2013 at 8:46 am #148232
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 :)August 27, 2013 at 10:32 am #148245
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
tellike I currently am? From what I have read,
telis a standard and supported by all mobile devices while
calltois 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 squarewho 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!August 27, 2013 at 10:59 am #148251
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 :)August 27, 2013 at 11:32 am #148256
Ok thank you!August 27, 2013 at 11:38 am #148258
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 :)August 27, 2013 at 11:43 am #148260
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)August 27, 2013 at 11:44 am #148262
Maybe you could add all of the vendor prefixes for transform as well just to be sure :)August 27, 2013 at 11:46 am #148263
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 :DAugust 27, 2013 at 11:50 am #148265
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!
- The forum ‘Design’ is closed to new topics and replies.