Footer

I know I'm not done with the main content part of the design (blog posts, comments, sidebar), but I really wanted to get started with the footer. Just making it presentable, and well, THERE.

For now, I just want the footer to be the place where you can find more posts of mine, however you want to find it. Whether it be by category (via an other iteration of the main navigation), by label (which I suppose is just an other way of organizing the categories, just more messy I find), or by date (via the blog archives), anyone can find something else to read once they are at the bottom of the blog page.

So, I wanted to do a simple 3 column footer. Simple,ha! No such thing as simple when your coding apparently. Unless you've done it a million times, maybe.

The hierarchy should go like so:
footer-wrapper
footer
main navigation, labels, blog archive (all side by side)

But, making a 3 column is proving to be more difficult than it should be (apparently a common problem amongst even the best designers, so I don't feel so bad now). I want them to all be equal size, so I put all width 33.3333%. And yet they appear just one on top of the other, taking 33.333% of the width still. After trying a few things with floats (one float right, one float left, but what about the 3rd since no float center...) and it still not working, I google and found that your suppose to have them display as inline-block (because divs automatically use the next line, like an enter would in a word processor, so you need to tell it not to do that) (here). It works but they are all aligned with the bottom of the container box instead of the top, weird...



If I try to put them as all float left, like someone else suggested, then the background color disappears? Fixes my top alignment problem, though. Why does it not do that with my header, then , since I use floats on everything? Cuz the last div (main navigation) is not floated?



Ok, so let's try adding an other element below those 3 columns. I think I might have read something about this way back when.



Woohoo, that worked! With a clear both added though, or else it appears below the archives widget.

One thing that is driving me absolutely MAD (as in crazy, not angry, though a bit of that too) right now is that even if I do width 100%, there is still a bit of space on either side. I do not get it. The only bigger container is body, which if I put as 100% will move the footer slightly to the right and make it bigger than the window size, and it's got no padding or margin. I specifically took the footer out of the outer-wrapper to be able to have it full width. Websites do this all the time, so what gives?!

First battle won! TBC...

Continue Reading...

Content Main Navigation

Continuing on my quest for the header graphics and layout, the next big element is the content navigation. I already decided on my Main Navigation categories, and sub-categories previously, now it's time to find a nice way to display them and make them... navigatable.

I had a hard time coming up with something here. Most blogs I frequent have just a simple text navigation. Some have effects on hover, but most do not. That's too plain for me. I also wanted the navigation links to be easily made responsive for the different designs. I knew I wanted only the 3 main categories to be displayed, and then the sub-categories appear on hover, but I wasn't exactly sure HOW that would work, or how I want it to look.

While I mulled over my possibilities for coding this part, I went ahead and tried to make some graphics for the main navigation. I wanted them to keep in with my doodle graphics that I'd already made for my pages navigation and my logo. I came up with these:



I wasn't 100% sold on them though, I couldn't figure out a way to make the space between each tag/category more transient, gradual, whatever, since I wanted each of the categories to be a different color. And also, I made the space between the 2 lines transparent, so that on hover there would be a background color that would only show through that part, but instead all I see is a colored line along the bottom on hover, as you can see for the first category in the picture above. I can't figure out why it's doing this.

Then I finally found a tutorial for a navigation bar that had what I wanted, except it was text based, no graphics. I figured I might as well just try and make the navigation work, and then worry about whether I can change the text to graphics, if I still wanted that.

The code I found, a dropline on hover navigation bar, is based on list items, which actually conventional menu bars are based on, not just images with links all in a line like I did my last one. The thing with list items is that you can easily have sub-list items, aka Categories and Sub-Categories. Also, text is more easily scalable while still keeping it's crispness at whatever size, which will be super important for viewing on high pixel density devices (aka retina screens).

Took me a long time fiddling with this code to make it work the way I wanted it to. It's one thing to find the code, and another finding a TUTORIAL with the code. I had to figure out what each line of code did exactly, since it's not exactly explained... and which code was redundant, because there was redundant code.

Here are a few things I changed to suit my needs:
- changed the text-align to center
- changed the width of the li a to 33.3333%, since I have 3 main navigation... The thing I haven't figured out is why I need to set the width to li a and not li only... but do whatever works right?
- changed the li background color to white
- apply gradient background color and add round upper corners to li a elements so they are defined more as individual tabs
- applied different background colors for the 2nd child and 3rd child of the li a so each main category is a different color like I wanted
- changed the active and hover state of li a to have a white background and for the text to be colored the respective color; added a colored border to keep the tab definition, but since border are fixed px and not % to make them look good, it's harder to make them fit and be responsive, so had to change the width of li to a guestimated # that would not break the page, in this case 33%; also had to add a border to the non active state or else it would appear as if the tabs are growing/moving to the right on hover.



Up to that point it was fairly straight forward, it was the sub-list that gave me a lot of trouble, both in understanding the existing code, and changing it to what I wanted. For one, the sub-list inherited most of the code from the main list, like the round upper corners, so I had to override by adding a 0px radius to the upper corners.

Second, the sub-list ul li is by default a little to the right of the list, like a "Tab" indent, or nesting of the sub-list under the list, which I could not figure out how to get rid of. The reason why it's not evident for the main code which I am basing this on is because he put a background color to the container containing the ul, and he used fixed pixels. If I did the same using % for the width so that it's responsive, that container extended past it's own container (past the header container) because of the indent, it keeps the same width it's just moved to the right. So I had to set the background to white, and make it less than 100% or else it would extend past still.

And this is why sometimes it's good to explain to someone, even if that someone is invisible. I just realized that if I set my background to transparent, then I CAN just move the ul container and make everything flush!! This won't be responsive if I move it by %, but with -40px at the left margin everything's good and responsive!! 40px seems to be the default indentation for sublists in this case.

So for the sub-list I changed:
- set upper corner radius' to 0em
- set margin-left to -40px

After all that, I could not get the sublist to be the exact same width as the main list, because of the border I added to the main list. Though even adding borders to the sublist didn't work. Finally, I found a bit of code that worked its magic. Basically, the problem is that the border is not part of the width but added to it, so this bit of code tells it to be included in the width. Magic I tell ya! I found it here.

The one thing that will most probably cause me trouble is when I want to add more sub-list items, I'll have to change the set width % to accomodate for it, or else it will go below the existing ones. Also, I need to work around the fact that if a item text is longer than the 33% width, it will do a line break and continue writing, whereas I would want it to shift the other list items for the to be one after the other on the same line. So I might have to fiddle with this part a little more, remove the tab definition (rounded corners) for the sub-list and not give it a defined width, and not center the text but left align it. Yeah, I'm probably gonna have to do that... but I'm pretty tired of fiddling with this part of the code, I want to move on to something new for a bit.

With that, I'm pretty satisfied with my navigation, and I'm not planning on adding a background image to them. But, I do want to change the text font, which is an entire different post, as this one is pretty long. And also because I haven't figure out how to do it yet.

Continue Reading...

Pages Navigation

Last time, I talked about blog content organization, and I mentioned the pages bar, briefly.

To recap, I'm making a few pages, you know, those essentials that aren't quite blog content, but still essential or expected. I'm talking About and Contact, Buttons page and Parties and Features page that I decided to present as pages to free up some valuable sidebar real estate. They are nice to have, but can be quite cluttersome, so having them out of the way at the top and bottom as individual pages seemed like a smart move. I'm really hoping they will be easy to locate, especially the button page since it's less common to have them as a page, but not unseen. Well ok, I'm really still on the fence about the buttons page. It wouldn't take that much space in the sidebar section, but at the same time how many people actually use the button? TBC...

Quite a bit more unconventional is seeing a resource page and an archive/sitemap page, but I wanted to create them. The resource page because I want to give credit to the wonderful (mostly) free digital art I use around the blog; we're talking fonts, shapes, tags, doodles, paintbrushes, etc. The Sitemap I'm still a little on the fence about it, I love sitemaps for Wordpress blogs, gives an other way for people to find your content the way they want to find it (archived in chronological order, or by label/category), and includes ALL your content. Every single page.

Those are the 6 pages I'm planning. Sometimes you also see a Home tab with them, but I find that redundant seeing as the header or logo should point to the home page of a blog, or website. I really hope it doesn't confuse people, and I'll see if I need to add it later, but really the more I think of it, the more I think it's just convention for it to do that, so I don't see there being a big problem about this.

Not everyone separates their pages tabs from their content navigation tabs, but the blogs and websites that do do that have really attracted me lately. Actually, a lot of them have the pages bar at almost the very top of the blog page, sometimes above the header/logo, and then the content navigation below it. That's what I decided to do, even if I don't have that many pages, or categorical navigation to showcase.


I'd also like to have simple text links of those pages in the footer section of the blog. Websites do it like that, and I think it's expected to have links to that kind of information at the bottom of a page, too. The footer is often under utilized and neglected, but really when someone gets to the bottom of your blog you don't want that to stop them from continuing finding more stuff to read, so it's really quite logical.

Wait til you see what I have up my sleeve for graphics and coding for these bars, I'm really excited about them!!

Continue Reading...

Blog Content Organization: Navigation

Everybody's got their own way of organizing and displaying their content. Some do it well, some not so well (just a fact...). Nothing frustrates me more when I find a blog post I really enjoy than not being able to find more content to enjoy on that blog. Needless to say, I don't stay there very long.

So far, I've been trying to divide up the subject of blog content organization. It's such a huge portion of the blog, and quite multifaceted when you start thinking about it. And sometimes one doesn't realize just how much thought does, and should go into planning it well, because it's more "behind-the-scenes" stuff.

But here's what it really boils down to: can your readers find more posts to read on your blog? How easily can they find it? Is it intuitive? Is it well presented?

And here's a really big blog pet peeve of mine: I hate it when people slap on a label page for navigation in the navigation bar. Whether it be for a series or a category, it just looks awful and is so hard to navigate and find what you are looking for.

Here's what I expect from navigation, and you can very well disagree with me, but I think navigation should show you a glimpse of the content, as much of it as is relevant to know whether I want to read the post or not, without seeing the whole post and without having to click through pages and pages of archives to see more. And that's exactly what labels don't do.

A label is just a filter really, only displaying the posts with that label, and displaying all of the post. Unless you have truncated posts, which in that case can make it manageable to browse through as long as it's just a small snippet, labels are awful IMHO. And labels are already there in a widget type thing most of the time on a blog. If I wanted to view posts in this manner (which I personnaly don't) I would click on the particular label. When I click on a navigation menu, I expect to see a list of blog posts pertaining to that subject where I can CHOOSE which ones to read with ease. Also, it really helps not to have to load all the content, and pictures, you don't want to read.

That's my 2 cents on the matter, and that's how I'm choosing to display MY navigation, or well how NOT to display my navigation. Navigation takes work, and there just is no adequate shortcut for it. So at the very least, have a Project Gallery, and if you feel up to it, further separate and sort your content for easier navigation.

As I mentioned in the last post, I'm going to display my 3 main categories in the navigation bar upfront, one beside the other, then when you click on one it will open up, in a drop-down menu, the rest of the sub categories.

And here's where you need to consider touchscreens. There are no hover effects on touchscreens, so if you set your drop-down menu to open up on hover, it will not work on tablets and smartphones. I've recently come across this problem on my new tablet. It's a pain not being able to open up the drop-down menu. The only thing that makes it better is when at least it opens up a page where you can see the sub-categories and choose on. And again where labels DON'T work.

I need to look further into how to make a drop-down menu that opens when clicked; I'm sure it can be done.

I still think labels are a good idea, but they shouldn't be used instead of proper navigation. They should be their own separate navigation system. You often see them in the sidebar, which is where I'm probably gonna put them, but I'm also considering putting them in the footer section. I haven't decided yet. I'm working from the top down and I'm still in header mode.

An other thing is that I want to separate my navigation into 2: actual posts navigation bar (detailed above), and a pages navigation. I'm talking the About Page, the Contact page. Things that don't evolve over time (too much... ie static), that don't really lead to much content, but that are still quite essential and expected in a blog.

I've seen this done more and more on blogs and I find it very well presented, so I'm implementing it on my own blog.

Continue Reading...

Blog Content Organization : Labels and Categories

Content organization is something you want to start thinking about early on in your blogging journey. The sooner you start, the easier it is to maintain, the more likely you are to get started and keep it going. No one wants to organize 100+ posts worth of content in one shot; ok maybe some people who love to organize (I started when I had about 40 posts because that's when I started to have enough stuff to organize into categories). If you want to just dab your toes in it to start, I recommend a Project Gallery type of page. You don't need to categorize yet, but all your projects are in one place and easy to navigate. But after a while, you'll want to start separating your content a bit more.

If you are on Wordpress, you're very lucky to have Categories and Labels. Oh how my organizer self would love that! But alas, I'm still on Blogger, so it's all one jumbled thing: Labels.

The way I use labels is I have category labels (craft, DIY, org, tips, blogging, personnal, and the like), sub-category labels(season/holiday craft, sewing, office org, kitchen org, food tips, tech tips, etc), material labels (paper crafts, wood crafts, paint crafts, etc), room labels (kitchen, bedroom, bathroom), and I think that's pretty much it for now. If at some point I see that there are a few posts that have something in common, I can easily just add a label to group them together.

Having them organized, or knowing how you want to organize them, is one part, the first line of defense if you will. The other part is knowing how to display that. I'm doing a navigation bar in the header section of the blog for sure, separate from the pages navigation. I'm probably gonna scatter some other organization in the sidebar and footer, but I haven't quite decided what will be where yet. One step at a time!

Blogger also provides a couple ways to display your organized content, Archives that organizes by date, and Labels that simply displays all your labels. That's probably what I'm going to use in the sidebar and/or footer. But honestly, not many people search with labels, which I'm not surprised, it can really be overwhelming!

Which is why I want to use the header navigation efficiently as the main way for readers to browse my content.

You can display whichever categories you want in the navigation bar, but personally less is more and I want it to be concise. I thought the best way to do it would be to have the big categories displayed outright, which then leads to the sub categories (either a drop-down menu or on the page that is linked). If I put the sub categories up there, then I think there would be too many and it would just be overwhelming; again personal preference, as I really love hierarchical categories (categories within categories, and so on...), it just makes sense in my mind.

But I'd prefer not to rearrange my whole hierarchy of categories and sub-categories every few months. This has been rather hard for me, coming up with categories that are broad enough, but also distinct and intuitive enough that someone else would be able to find what they are looking for.

I haven't yet decided if I'm just doing one single page (like the project gallery), and then those links in the navigation would be anchors to sections on that one page, or different pages for the main categories and then anchor links to the sub-categories sections. I just don't have too much content, but I'd like to plan for the future at the same time. Decisions, decisions.

Here's where I'm at so far: 3 main categories, with their sub-categories in parentheses:

1. Craft and DIY (seasonal and holiday crafts individually or together, sewing, crochetting, decor, wall art, built it)
2. Homemaking (organization, cleaning, recipes, tips for the home, green living, thoughts in general)
3. Technology (tips, blogging, apps, social media, etc)

Here's where I go back and forth. Do I split the main categories more? Crafts could be one, DIY an other, it's just hard sometimes to seperate the 2 (like my sunburst mirror, is it a craft or a DIY? it's definetely decor though). Basically, to me Crafts and DIY, covers everything handcrafted.

Then there's Green Living that could be an indivudual category, but I also think it fits well with the homemaking global category. This is more things you DO to make a home, rather than MAKE, you know? But there could be some overlap, say if I make reusable ziplock bags, which is sewing and green living, but I think that's ok, too. It's just because of my green series I did in October, I have a lot of green posts! Though they are mostly round-ups.

The Technology category is basically a main category because I didn't think it fits anywhere else, but it's still something that I like to cover, just not as heavy as the other categories. Technology just englobes everything we do, not just homemaking, hence why it's its own category.

I dunno. Some I'd like to take out of sub categories and make main categories, but they ARE sub-categories, and then if I make THEM main categories the other sub categories will feel unloved :( lol Am I putting too much thought into this? Probably...

TBC...

Continue Reading...

Blog Content Organization: Project Gallery

Blog navigation, to me, is one of the most useful, and essential part of a blog. You want any readers coming to your blog to be able to find more stuff to read, which means more pageviews for you! So you have to help them find what they want, and more importantly, what they didn't even know they wanted!

At the beginning of your blog journey, you're gonna dab in a bit of this, and a bit of that. You may not know what your categories are, and you may not want to commit yourself right away. That's ok. I suggest you start a Project Gallery as soon as you can, though! You don't need to categorize, but as long as readers can easily find all your blog posts, that's what you want. Have a thumbnail of your most descriptive image, and your post title with it, that will suffice.

My Project Gallery was one of my 4 navigation buttons in my first blog design, and I think it really helped readers to find more content they might be interested in.



I've been using InLinkz Project Manager (formely Link Manager)(which is now unfortunately no longer free, but for 12$ a year I paid for it) to manage my Project Gallery. It does it all for me without me needing to code anything, just need to enter the information. Only thing is that I don't know how it will work with my responsive design, so I might need to change that out.

It doesn't matter how you do it, but as long as you have all your projects on one page, with a descriptive image and title, your readers will be happy. I say have both the image and title because I'm visual and I decide what I want to read most of the time based on the image, but sometimes I need to read the title to know what it's about, and sometimes it's the title not the image that intrigues me. Give your readers choices, not everyone browses the same way, and there's nothing wrong with that!

After some time blogging and x number of posts, you'll start seeing a pattern and categories will start to form themselves. That's when you want to further categorizes and sub categorize your posts. I'll talk about that next post.

Continue Reading...