Site Progression - What do you think?

[tankman1989]

Well, I'm redeveloping my site to make it a little easier to use, but this won't be my final revision. I plan on creating a site who's layout is what I want and then have a pro add in some finishing touches to "jazz" it up.

New site, partial design

The main difference is that the topics are listed with buttons under the header and you don't see the text change color when the link is clicked.

I'm just stuck trying to figure out how to do drop-downs from this or should I have each button open to an entirely new page (with the same header buttons) where a list of topics are displayed in yet more buttons. These buttons will the ultimately lead to the final destination of the specific information for that topic.

I am really a fan of drop down links so maybe I'll have to think of something other than this to do. I was just having fun with Photoshop as I don't really know how to use it but am teaching myself.

Also, is there a way to scale the site so that it can be used on mobile phones?

 

[anglian]

Definitively looks 100% better with the buttons under the logo instead of text links.

There are 1001 ways to drop downs to your buttons, just google for "dropdown menu code" and find something you can work with.

Keep up the good work!

 

[tankman1989]

Definitively looks 100% better with the buttons under the logo instead of text links.

There are 1001 ways to drop downs to your buttons, just google for "dropdown menu code" and find something you can work with.

Keep up the good work!

Thanks for the comment. I originally coded the first site under a real time deadline and knew nothing about web design. I just figured out how to make buttons and don't even know if I'm doing it the "right" way, but it seems to work. I use photoshop to create a standard height for each gif and then put the text in and then encapsulate it with a background "rounded rectangle". The button is actually square so there is white around the edges and I don't know how to make the button translucent so that it would blend with any background color I choose. Any ideas?

 

[tankman1989]

I'm having a difficult time figuring out how to "stack" all my menu's under the topic buttons listed under the header.

On the original site, I had a vertical listing of horizontal text based links (see above) and didn't have limitations on the amount of topics I could list. Now, with the buttons I need to use a drop down menu list but I still have some subjects which I can't figure out where to place them such as:

-client software
-recommended software
-documents
-submit payment

I would like to have a "misc" button, but that just isn't proper. Any suggestions on how to handle these odd topics that don't fit under a specific heading?

 

[nightkingdoms]

The best way nowadays for doing buttons is with CSS. I believe that IE9+ and every other browser supports the rounded corners in CSS now. The way of doing it with GIFs or PNGs inside a table or DIV is too tedious and obsolete now (not to mention unpredictable in each browser) when you can simply define it's style once in CSS, apply the class to a button tag and if you want to change it, it will change them all at once.

What I would suggest if you're trying to learn HTML/CSS is taking a look at the CSS specs on W3C's site. If you're just looking to do it quick and dirty, I would highly suggest not reinventing the wheel and using something like jQuery UI or Bootstrap. jQuery has a ThemeRoller where you can customize the colors/looks. Bootstrap doesn't but there's plenty of sites that do for free. Both should give you a strong and quick platform to build a web site design from. And, if you want to combine using a toolkit plus learn CSS more, it's a good way to play with it in usable bites.

All of the web sites I have made for my company - mobile or desktop - were made with some platform whether homebrew or toolkit. It makes development quicker, cleaner and more consistent. A good example of this is the application I just finished. With a few PHP tricks, some browser peeking and Bootstrap I was able to make the app fully desktop, tablet and smartphone compatible without doubling my efforts and by using a responsive layout design.

The toolkits don't replace knowledge nor the need for it, but it gives a consistent set of resources that you can lay the groundwork with and build from. A lot of the resources are the same if not highly similar to what developers have been using for years but in a more-logical and structured way like, for instance, removing the top and left margins so that position 0,0 is literally the first pixel position at the top-left of the screen. We all removed it, some do it by hand, most build a CSS file they include, but these put the best practices like this in one place, plus some other good stuff.

Edit: As for buttons, you can do square buttons pretty easily. Create a CSS style and give it a name like navbtn. Apply the background attribute to the color you want, same for the font-color/size, set the padding to 10 or 15. Create a regular link and have the class equal the navbtn. There you have it. If you want it to change color, add another line to the CSS with the hover attribute (e.g. navbtn:hover) and only put a different background color of a few shades lighter than the normal one. Then you have existing links that will have a colored background that lightens when you put your mouse over them, but still basically function as links. For rounded corners, it gets a little trickier, though. lol

 

[Paul Rodgers]

FYI dropdowns suck on mobile platforms.

 

[nightkingdoms]

FYI dropdowns suck on mobile platforms.

Ya they do. lol The best thing for mobile is either lists or big buttons. You also have to remember the typical screen width of a mobile without scaling is only about 350 pixels wide so it needs to be longer, not as wide as you normally do.

On my application I ran into this. The menu goes across laterally on the top. Doesn't look so good on a mobile because it breaks it into several lines or zooms further out to compensate, depending on the manufacturer.

I fixed it by determining if it's a mobile and switching it to a list that goes vertically instead, set at 345 pixels wide.

For my company site it's nothing but big buttons using the jQuery Mobile toolkit.