Overclock.net banner

1 - 10 of 10 Posts

·
^^That's my user name^^
Joined
·
9,920 Posts
Discussion Starter #1
I've taken over a position temporarily and hope to make it permanent. I'll copy exactly what I took over and create a "easter egg" of the site's home page as it was when I took over. For now, here's a "wayback"

https://web.archive.org/web/20170911174634/http://oregonmilitaryfamily.org/

Here it is now

http://oregonmilitaryfamily.org/

For mobile users, scroll to the bottom. The mobile view did not exist when I took over and I'm hoping to scratch that project and make the desktop mode responsive. I'm lucky enough that they have Adobe CC, including Muse and Photoshop and Illustrator. So, that being said...

Thoughts so far? Tips? etc?
 

·
Meep
Joined
·
5,592 Posts
First of all, congrats on taking control of the site, sims like a pretty great thing to be part of.

Here's some feedback:
Nav: Move the text in the buttons down a bit, it sticking to the top of the screen like that looks off.

Logo: The logo looks really messy, looks like a low resolution capture that was stretched, I'd retrace it in illustrator,this way you have a proper vector drawing again.

Image Slider: The arrows on the side look messy and even sit above the images, depending on the aspect ratio of the img. The buttons also don't look very nice, I'd place some simple fairly opaque ones over the image, and make them centered. Alternatively, you can just use a pre-made image slider/image gallery might want to get a lightbox too, just make sure they're free to use. (or you can just code them yourself, I've done it but honestly, they're such good ones available for free, no need to reinvent the wheel.)

Footer: you've got 4 different link/font colors, some underlined. I'd reduce that to max 2 colors, and maybe drop the underline on the webmaster link.

Others: The Military helpline number is kind of unpleasant to read(bright red on blue), I'd look for another color that contrasts a little nicer.
 

·
^^That's my user name^^
Joined
·
9,920 Posts
Discussion Starter #3
First of all, congrats on taking control of the site, sims like a pretty great thing to be part of.

Here's some feedback:
Nav: Move the text in the buttons down a bit, it sticking to the top of the screen like that looks off.

Logo: The logo looks really messy, looks like a low resolution capture that was stretched, I'd retrace it in illustrator,this way you have a proper vector drawing again.

Image Slider: The arrows on the side look messy and even sit above the images, depending on the aspect ratio of the img. The buttons also don't look very nice, I'd place some simple fairly opaque ones over the image, and make them centered. Alternatively, you can just use a pre-made image slider/image gallery might want to get a lightbox too, just make sure they're free to use. (or you can just code them yourself, I've done it but honestly, they're such good ones available for free, no need to reinvent the wheel.)

Footer: you've got 4 different link/font colors, some underlined. I'd reduce that to max 2 colors, and maybe drop the underline on the webmaster link.

Others: The Military helpline number is kind of unpleasant to read(bright red on blue), I'd look for another color that contrasts a little nicer.
I'm definitely going to make the navigation "thicker". I kinda like it on top, but I'll keep looking at other sites. I have a good vector of the logo. Not sure what happened, probably fell into a batch edit, will fix. That's a good idea with the lightbox, I'll see if I can do that soon. I overlooked the font on the bottom, good eye. And as for the Military Helpline, it sucks being colorblind lol. I'll ask one of the ladies at the office to help me! :lachen:

Thanks for the feedback!
 

·
Premium Member
Joined
·
14,339 Posts
Nice! That background (while I love me some Crater Lake) is really distracting. If you really want the full screen image, I'd recommend having a solid color behind the body of the site (you can use some transparency like the footer if you need to) to keep focus on the content and not make it look so busy. (an example: https://pixelarity.com/highlights)

The drop shadows are a dated design element that doesn't get used nearly as much these days and I think having a more solid background behind your elements could make them unnecessary.

The header is really thin so I would personally give it a lot more room to breath, maybe double or 2.5x the height with the links centered. The footer is really busy, I'd consider simplifying the layout to maybe 3 columns of information and links, with the styling consistent between them.

All in all, looks like all the content is there which can be the hard part so now I'd just find a website template you like and try to achieve the same look and feel. Not sure what your budget is (if you have one!) but there are a lot of great HTML5 templates that exist that just need to be populated with content. They usually have mobile considerations built in by resolution so you don't need to develop two sites either. It's a great cause with great programs so you definitely want to make it is easy to navigate and find the right content.

edit: Lastly, if you aren't currently, I'd recommend having a test server or subdomain to try things out on to avoid messing with the live site. It's easy to skip this step (I do it too much!) but it can avoid a lot of headache down the road.
 

·
Still here...
Joined
·
3,320 Posts
I've taken over a position temporarily and hope to make it permanent. I'll copy exactly what I took over and create a "easter egg" of the site's home page as it was when I took over. For now, here's a "wayback"

https://web.archive.org/web/20170911174634/http://oregonmilitaryfamily.org/

Here it is now

http://oregonmilitaryfamily.org/

For mobile users, scroll to the bottom. The mobile view did not exist when I took over and I'm hoping to scratch that project and make the desktop mode responsive. I'm lucky enough that they have Adobe CC, including Muse and Photoshop and Illustrator. So, that being said...

Thoughts so far? Tips? etc?
Don't count too much on Muse; Adobe released the news today it was EOL.

Edited:

That said, you'll still be able to use Muse, it just won't be updated anymore to keep up with changing web standards. OS updates will be available for a year.

Anyways, keep at it what you're doing; as time progresses, you'll get better and better as you learn more and more. I started hand coding web sites in 1995 using text editors, which was a great way to originally learn html. Then came dhtml, css, java and javabeans, javascript, php, ruby, and so on and so forth. Toss in the do's and don't of layout and design, add a touch of usability, and you'll get there.
 

·
^^That's my user name^^
Joined
·
9,920 Posts
Discussion Starter #6
So I did a lot of those things, cleaned up pages, and fixed the logo! I'm hoping to get a unique image for each team page, but the top pages will remain Crater Lake. Sucks that Muse is reaching EOL, I'd be pissed if I payed for it
 

·
Premium Member
Joined
·
4,054 Posts
I'd recommend putting your search bar and help line inside of the same div so they are "stuck" together, I'd also recommend not styling IDs and instead style the classes, figure out unique classes to use.

You can drop the position: relative from your ID u49418 with that you can start remove those -100000px margins which are not a good practice.

I would also recommend if you have complete access is to start by adding a bootstrap CDN to your html and working through bootstrap to re-create the site, from there you can start to make the site mobile responsive, and understand bootstrap classes. As an example btn-primary is going to be blue while btn-success is green, you can restyle the color but instead use one of the btns that is closely matched to the color you want to use and re-style, this helps others come into your code and easily recognize what needs to be fixed/changed.

Looks like you have a newsletter on the calendar page, I would recommend trying to get people to the page to sign up for the newsletter, draw their attention.

Lastley if you have a gmail account there, have them get a google analytics account and add that to the page to start tracking who is coming to the site, where are they going and what do they end up doing?

This could keep you busy for a bit.

(I am a web designer/front end developer)
 

·
^^That's my user name^^
Joined
·
9,920 Posts
Discussion Starter #8
I'd recommend putting your search bar and help line inside of the same div so they are "stuck" together, I'd also recommend not styling IDs and instead style the classes, figure out unique classes to use.

You can drop the position: relative from your ID u49418 with that you can start remove those -100000px margins which are not a good practice.

I would also recommend if you have complete access is to start by adding a bootstrap CDN to your html and working through bootstrap to re-create the site, from there you can start to make the site mobile responsive, and understand bootstrap classes. As an example btn-primary is going to be blue while btn-success is green, you can restyle the color but instead use one of the btns that is closely matched to the color you want to use and re-style, this helps others come into your code and easily recognize what needs to be fixed/changed.

Looks like you have a newsletter on the calendar page, I would recommend trying to get people to the page to sign up for the newsletter, draw their attention.

Lastley if you have a gmail account there, have them get a google analytics account and add that to the page to start tracking who is coming to the site, where are they going and what do they end up doing?

This could keep you busy for a bit.

(I am a web designer/front end developer)
Maybe I need more coffee but I don't understand much of that at all. I've only been using Muse, I am not writing code. Trying to keep things simple for now.

I'm also thinking I want the mobile site to be it's own. I'll let the Desktop site work to Desktop and Tablets, but I'll make a phone site. There's so much more info that just works better on a desktop site, and a lot of people who use the site still aren't used to hamburger menus and things moving around when they resize the window. I'm basing this off correspondence with some retired guardsmen.
 

·
Still here...
Joined
·
3,320 Posts
I'm also thinking I want the mobile site to be it's own. I'll let the Desktop site work to Desktop and Tablets, but I'll make a phone site. There's so much more info that just works better on a desktop site, and a lot of people who use the site still aren't used to hamburger menus and things moving around when they resize the window. I'm basing this off correspondence with some retired guardsmen.

You touched on a couple of interesting points. Here's some help:

Mobile friendly and responsive web design: two pretty interchangeable concepts--depending on who you're talking to--aspiring web designers/developers should familiarize themselves with. Employing their principles, you don't need two separate web sites, one for desktop users and the other for mobile device users viewports (another word you should understand) when you could build everything you need to accommodate both into one framework.

You can use the information you garner from the links I shared to help explain the whats and whys of things like hamburger menus to your potential web viewers/users.

The other points you touched on have a lot to do with knowing who will be viewing/using your handiwork and understanding their behaviors when it comes to using the web (akin to something like audience analysis in the world of writing, often described as personas when it comes to the web). I've somewhat of a special interest in the cases you described, as I'm a 62 year old male, retired from the USAF in 1992.

Today, I'm a web designer/developer, usability expert, and server administrator, pretty much bestowed with full stack credentials.

Enough on that for at least the time being though :)

When it comes to those who will using/viewing what you put together (e.g., your retired guardsmen for instance, and/or anyone for that matter), it will pay to learn how to explain things like hamburger menus (e.g., mobile friendly sites) best to them. If you find that the majority if not just about all of your of those people will be using a desktop, it follows that you probably wouldn't need to be too concerned about whether what you end up putting together is truly mobile compliant. If that ends up being the case, you could simply focus on the desktop version of your web site and be done with it.

OTOH, it is 2018, and we've reached a point where we're sending potentially autonomous vehicles into space equipped with their own generic personas (there's that word again), even if we haven't quite figured out how to actually get them we're we want to go yet. While someone like me might say (and has already implied) "don't worry padowan, you'll get there eventually," it would be best if you grasped what I'm referring to above first, before rushing into something like your doing now. In the end having that knowledge will help make your life (read: your work) a whole lot easier, and you'll be far better equipped to deal with older farts like, uh, me, for instance.

Feel free to field additional questions if you've got them, and please don't feel put off. Some of us are here to help and know we all have start somewhere. In the end, it's the journey not the destination that will dictate whether it was all worth it or not.

All that said, you might want to take a look at what amounts to my current web sites (you can access the main one via my profile). I haven't updated their content in years (ALL of my work comes by way of referrals today) and they're certainly not mobile friendly, but I do keep their frameworks up to date.
 

·
Premium Member
Joined
·
4,054 Posts
I would just open up another instance of Muse which I believe you are using and copy paste the current site in to that and start working from there, you're going to break a lot of things.

As iamjanco put it, it is 2018 and building sites mobile friendly is the "norm" these days and there are a lot of fun ways to achieve that.

https://codepen.io/travisboss/pen/QOMgbQ
https://codepen.io/travisboss/pen/rYzjPN
Here is a flexbox that is mobile (my codepen) responsive to give you an idea of the benefits of simply building mobile friendly. I have a lot of animated css things on my codepen page as of right now feel free to look through but I do not think they will help in the beginning.
 
1 - 10 of 10 Posts
Top