Live Training: Site Overhaul to Responsive Design – Update

Update time! I’m deep in the midst of my site overhaul. It’s very exciting and I’m learning even more about responsive design. It’s time to share more info with everyone. Read on!

One site I’ve created (which is on hold at the moment) is a small one. It’s for a services company. It won’t likely have a lot of content added down the road. It’s a static site. My site, on the other hand, has more content and I add more all the time. So that adds a layer of complexity.

There are two main points I’d like to share, based on my work so far:

  • You absolutely must design your content as well as the look and feel of the site. Absolutely. No way around it.
  • You must test on all devices as you go and tweak as necessary. It’s not enough to assume that the pages will just redraw and everything will just work. You have to check the content display and overall design as you go and tweak as you go. Then you know it’ll just work on all devices. To just take a theme as is and try and run with will never work.

The deeper I get into my site overhaul, the more I learn. I’m drawing upon all the skills I’ve accumulated over the years. Here’s what I’m doing:

Tech Writing

I’ve prepared content with responsive design in mind. I made a major content reorg on my site last week. See my previous liveblog post about that; you can see some details. I’m also very experienced with content management and “chunking” (boy, that’s an old term) into small pieces. Plus I’ve been thinking about mobile design since way back in 2009. (You can see some old posts on my 2moroDocs blog about that.) In any case, I’m definitely using my tech writing skills to prepare content that is concise and clear.

Some 2moroDocs posts:

Cut, Cut, Cut Your Content and Procedures

Minimal Procedure Content: Reasoning

Design

For years, I’ve worked with web design. I’ve been creating websites since you coded in HTML and even used frames. That’s how long I’ve working with the web. I love design, and am just drawing upon all of that experience.

WordPress

There’s a learning curve, and I’ve been at this for four years as well. I know where to go to tweak some items. I’ve also been diving into the PHP files to fiddle with the code and have it do what I want.

Ok – enough background. It’s time to start sharing more examples of some design and content decisions made along the way. Follow along. From this point on today, it’s a liveblog.

10.30.13 14.18

Ok. Time for a little graphic design lesson.

Here are some screen shots of my work in progress. This is a default home page design for the Minimum mobile-responsive theme produced by StudioPress. This is not going to be my home page. I’m doing something completely different. However, these design items will carry through my subpages. I wish I could show you my actual home page, but you’re just going to have to wait!

I’m showing you these now so you can see the types of design decisions that go into creating a site.

Image 1: Background photo with reduced height

Tailored Thoughts Website Design Draft

 

Image 2: Background photo with full default height

Tailored Thoughts Website Design Draft

 

Notes

Image 1: I really like this design. For what I’m doing, the height works better. The picture now looks a little dark to me, so I think I’ll try to lighten this a shade or two in PhotoShop and see what it looks like. Keep in mind, I’m not using this as the home page. But I plan to use the picture on subpages.

Image 2: You can see more of what I’m calling the Seattle colors. Note how this is working. The blues in the logo work well for the top of the page. The logo, the photo colors. It’s more blue/gray at the top. The green of the railing (a ferry railing, Bainbridge ferry run) then matches the menu background color. Obviously, I set up the menu so it matched the railing color.

Now, some design tips and explanations.

Page design generally follows this format. Eye initially goes to upper left corner, zigags down the page (think of a large capital Z). The blues in the top kind of subtly lead the eye down the page. The ellipsis in the logo helps with that. It directs your eye to the right. Then, as it happens, the ellipsis ends just about where the higher skyscrapers appear in the skyline. That wasn’t planned. I really lucked out with that. So that helps with subtly moving the eye down the page. The larger buildings next lead down to the ferry railing. The railing obviously leads to the menu bar. They’re pretty much the same color.

Bingo! The blues/grays are at the top, they lead and evolve into the greens. And that railing makes a perfect lead-in to the content that follows. I’ll tell you that the footer area is a slightly darker green. Not much, but slightly. That helps with the menu submenu listing. For the Services item, I have subpages. The dropdown menu uses the same color green as the footer area. It’s just enough to differentiate between the two.

……

That’s it for now. I have to get back to work on the site! I may or may not add more info today. We’ll see.

I hope you enjoy these tips and find them helpful!

If you need a new website, I’d love to work with you to create one. You can see some of the types of design decisions that go into them. This doesn’t even touch on the content decisions.

Contact me! Let’s get to work -

Related posts:

10.30.13 12.14

Here’s my new logo. I’m changing everything.

TT_logo1

That’s part of it. I’m also using greens in my site. Last month (September 3rd and 4th to be exact) I ventured into downtown Seattle to take pictures to use on my blog. After reviewing all of them, I decided to use some in my site and now I’m using what I’m just going to call “Seattle colors.” You’ll see….

The thought behind my logo is this.

The “Tailored” part is clean, crisp lines. That’s the structured part. The code, the writing methodology – the rules. The infrastructure. The “thoughts” part is the creative side. I combine both in my work. In other words:

Structured creativity

Re the Seattle colors: check out my Instagram account. I added photos to that from those days. I was testing use of Vine and Instagram while also just getting pictures to use. If you look at the ferry, Safeco Field, and Pioneer Square pictures – those are the colors of which I speak. Plus the water, of course.

 

Related posts:

 

 

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *


× three = 24

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>