Header: Social Media Buttons

My quest for the social media buttons as to make them with pure CSS, as I did with my main navigation. That means that the social medianess, as in the font or icon of each button, would have to be rendered by a font. I have yet to find a social media font that has all the ones I want: RSS, email, Facebook, g+ and Bloglovin. But then again if I made small images and put them inside the button, they would be easily scalable... hmm, food for thought.



I'm trying to stay away from images as much as possible because the nature of my blog means the content is already pretty image heavy. So as to not increase load times beyond that, I'm trying to minimize image sizes for the blog layout, because afterall those are the images that are loaded every.single.time a page on my blog is loaded. Make sense?

I wanted simple yet unique social media buttons. Not just a circle, not just a square, definetely not a bunting as that is being done wayyyy too much, but something different. After a lot of searching and pondering, this idea came into my head: a square with 2 facing corners that are rounded. And a border. And a radial gradient to up the fanciness :)

I used this article to help make it responsive. In the end, the tutorial was more complicated than it needed to be, and well, didn't even work. But I couldn't have figured it out without it, so it's worth a mention.

Basically all you need to do is set the width in %, set the height to 0, set the TOTAL padding equal to the width in %. Because there's text that I want centered in the shape, I set the padding-top first, then the padding-bottom for it to look like it's even on all sides. Of course you complicate things if you put a border, but again you can just use the border-box trick I mention here.

Then, round 2 opposing corners (I rounded by 40%, so they remain responsive), add radial gradient, and you're done. Each button is a seperate span element. I will need to change the font so the actual icons appear, but you get the idea.



Still need to add a hover effect, which might be a text-shadow, or invert the radial gradient direction.

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...

Header Layout

When I started thinking about this new blog design, I knew I wanted to make better use of my header. The space above the fold is very precious real estate, it's the first bit of your blog a reader sees, it sets the tone and feel of a blog.

As much as I loved my old header, it was just an image, and it was not very useful in any other way. Ok, I did have a menu below it, that was useful, but that's it.

It's become more and more of a trend to put different elements right within the header, for ease of use to the reader. Social media icons, email subscription, search bar are all a common part of the header nowadays.

But I also find that everyone does it the same way. I wanted to incorporate more into the header, but make it different than what we're used to seeing on other blogs. I needed take it up a notch, and make it just a little more fun.

I also gave a lot of thought to how the various elements in the header would rearrange based on the screen size; for big screen PCs, tablets, and smartphones. I might just be really complicating things! We'll see. I've been putting off tackling the header because of this; I just don't know if and how it will work.

But enough procrastination, I had to start somewhere.

First things first, allow more gadgets into the header part of the blog layout. This tutorial will explain how to do that, and a little more. Easy peasy. Then you have to tweak the sizes and play with floats as you add new gadgets to make it go where you want it to.

What I decided to add to my header are the following: logo, pages menu, tagline, social media buttons (including follow buttons RSS and email), search bar, and navigation bar (for content, as oppose to the pages menu).

Don't get me started on knowing to do a pages/menu bar, vs/and a navigation bar. I've thought a LOT about how to organize the blog, and I might still change things around; I'll probably write about that at one point. Navigation and blog organization is a HUGE thing for me!! And it gets all the more trickier with responsive design.

So, after a lot of thinking, at non appropriate times... (it really gets all consuming this blog design thing!), I've come up with the following layout for the blog, at desktop resolution:



I know it's busy. But hopefully I will be able to make it really pretty, functional, and... flowy, for lack of a better term. There's gonna be lots of trial and error!!

Now that that's done, I gotta do the graphic elements for the different parts. I'm a real big fan of hover effects, but I'd like the hover effects to be achieved with CCS(3), so I don't have to have 2 different images, and so it saves on load times. I've got a lot of great ideas, especially from this article: . It. will. be. AWESOME! I'll also probably be using effects like opacity, background color (with transparent elements in the image so the background shows through), make an image bigger.

BUT, and this is the sad part, I recently realized that tablets won't be able to see all my cool hover effects. sniff sniff. I'll probably try out the :pressed pseudo class (pseudo element? can't remember which is which right now), at least there will be the hover effect for the split second someone touches the button on a touchscreen. And probably :active too. Same effect at active as hover and pressed. That is the plan!

Now the thing will be not to overdue it. I think there's gonna be a fine line, and I'll probably be walking RIGHT on it's edge. I REALLY LOVE hover effects!!

TBC...

Continue Reading...

Choosing Media Breakpoints

One thing that has been nagging me in the back of my head and prevented me from moving forward is that I wasn't sure of the layouts I wanted to get for different media devices. I didn't know how many breakpoints I wanted, or where those breakpoints would be best situated.

Sure I've read of some in articles, they mostly reference the iPad and iPhone, and well, I'm kinda anti-Apple... So I didn't want to base myself on them but rather on actual resolutions.

So I took the time to look through my google analytics for my blog and see what people are viewing my webpage on. In my mind, I saw a total of 12 different possible breakpoints from all the data I analysed. Yes, that is a lot!! And I cannot create all of them, or well not all of them right away. I don't know if they will all even be necessary in the end, it will depend on where I go with the first ones. My goal might be to one day have the blog optimized for all those breakpoints (which seperates landscape and portrait in some cases).

I've read many an article saying to start responsive design at 320 and work your way up. Well, I don't have a smartphone, I cannot design for it right away, right off the bat. And besides, it's not the biggest chunk of my pageviews. It's still much more logical to start at a normal size screen. What is normal size? Well, it would seem between 1280 and 1439 px wide. Which is my work laptop. I'll make everything responsive so it'll pretty much fit any screen without a scroll bar in sight.

Then I'll go to smartphones, below 320, or maybe below 480 to start with, then redefine those later...

Then it'll be optimized for the iPad in portrait mode, or portrait below 1000, and above 480.

Then for big screen larger than 1920.

Then we'll see. Ideally these are all the breakpoints I could imagine myself doing (in size order):
1) <300 both landscape and portrait(cuz these are almost squares), but there are very few it would mostly be for older phones 2) >301 <479 portrait 3) >480 <599 portrait 4) >301 < 601 landscape (could be divided into 2 if I'd really want to, this would be the very last resort though) 5) >600 < 1000 portrait (tablets' most popular resolution) 6) >600 <1023 landscape 7) >1001 portrait (maximum size for portrait)
8) >1024 <1279 9) >1280 <1439 (most popular resolution and default one) 10) >1440 <1919 11) >1920

So yes, lots of work ahead of me!! If I choose it. I just really needed to know the grand plan to be able to devise how I want my header to rearrange, because it's gonna be the most complicated part to code I think. I've got such grand plans indeed for it! But the more I read, the more I realise not quite everything is possible here. Especially if I want it to be responsive. It would be easier if I just wanted it adaptative (pretty much fixed size but changes layout on breakpoints). I don't want to start working on the header layout just to realize something is not possible for the smallest viewport and have to recode everything.

It will be epic!

TBC...

Continue Reading...

Responsive Design: Setting the Widths, and Background Color

So I was gonna do a post to say I needed to add a background color (white) to the parts with writing: post, sidebar header, then as soon as I did that I realized I needed to play with the margins and paddings, which need to be in % if I'm to do a responsive design, so what the heck I'm gonna start the responsive design thing right now with the width of the containers. Good place and time as any to start.

So yes after a couple of lines of code to make the backgrounds white to be able to read properly, I get this:



And then with some adjustments to the width and padding of the main containers (header, outer-wrapper, main and sidebar), I get this:



And it's already responsive!! I've also been coding my images inside my posts to be responsive for the long run. They are set at width 95% so they take up as much space as possible.

So here are the dets for the containers. As of right now, my outer wrapper is set to width 80%, my header width 96% with 2% paddings on each side (so total 100%), my main post area is 65% with 3% paddings on both sides and 1% margin on the right (for space between it and sidebar) (so total is 72%) and my sidebar is 21% with 3% paddings on each side and a 1% margin to the left (total 28%). Yes, I played around a lot with those #s to get what I wanted, and it might still change as I add the graphic elements and other features.

The thing to remember when you are setting these widths is that the % is based on the size of the PARENT container. outer-wrapper is inside the body (which is the entire window), header main and sidebar are inside outer-wrapper. Setting the widths of the header is easy because it takes up the entire width of the outer wrapper, but main and sidebar share the width, so their total width needs to fit inside the outer-wrapper. It's really quite easy once you get that concept down. And also remember that paddings and margins need to be counted towards the width. If it equals more than 100%, it won't look right. It won't be cut off but it won't look right.

If you're not sure what the difference between margin and padding is, check out this article from Blogger Buster. But quickly, margin is the space outside the container, and padding is the space inside the container.

You can try out the responsiveness by resizing the browser. Everything should adjust and fit as the screen gets smaller or bigger. Of course this is just the beginning for responsive design, the very base. I'll be adding media queries so that the layout changes as you get smaller, to better suit tablets and smartphones. I'm so excited for that!!

Continue Reading...

Setting the Body Background Image

The background image, or graphic, was one of the first graphic elements I made for the new design. I knew I wanted I pattern, and for it to be predominantly white, yet still quite colorful.

I'd found this graphic designer, Delicious Scraps, and I loved her stuff because you could use them to create your own graphics with them using your own color scheme. Perfect! Exactly what I needed since I hadn't yet found a scrapbook kit with a color scheme I liked and elements I was longing for. And I can pretty much guarantee no one else will have the same background as me!

So, first order of business: make the background image. Oh wait, back track a second. First order of business: choose a color theme!! Ha! Ok, well since I've already started with this post, I will cover how I chose my color scheme in an upcoming post, that sound good?

Ok, second order of business: make the background image. I looked through all the free pattern templates at Delicious Scraps and chose the one I liked best. This one to be precise:


Curtesy of Delicious Scraps

I wanted each layer of circle flowers to be a different color (the solid vs the paller one), and the dots an other. They all come in different files when you download the template. But I could not figure out intuitively how to do it in Photoshop! I thought I'd be able to do it with the overlay property, but it did not give me what I wanted at all!!

So I turned to all mighty Google, but I wasn't sure exactly how to phrase what I wanted to do. My first couple of searches came out fruitless, and I was almost ready to give up when I came upon this tutorial (for digital scrapbooking). I almost discard it because there were no pictures and it was using a different version of photoshop than me, but I figured I'd better try, and it worked!! Exactly what I wanted!!

I was now able to color every layer a different color, and because they had a transparent background, I could easily put them one on top of the other. Hooray, background graphic: Check!

With the background image in hand, I had to figure out how I wanted to place it. Here's a good tutorial to know your choices: How To Use a Background Image for Your Blog .

I wanted my background image to be scalable, proportional to the width of the window of the browser, since I'm going for a responsive design. I don't know if I'm making sense... I knew from my past (current?) background image that it looks slightly different for every device/resolution seeing my blog; it's set to background fixed and no-repeat. Someone with a big screen/resolution (Desktop computer) would see quite a bit of the colored part of the background (right, below) and that's the way I intended it to look like when I designed it; whereas someone on a smaller screen/resolution like a 15" laptop (my work laptop; middle, below) would have the background cut off where the lacey borders are and barely see the rest of the colorful background. And who knows what someone on a tablet or phone would see, probably not much if it follows the trend. (Note to self, check on bf's tablet and iPhone)

Click to enlarge in LighBox

The point is, I don't want the flowers to look huge in the background of a smartphone. Which is what I think it would do if I code it the same way as I've previously coded it. I also needed to figure out the biggest size of monitor it would be seen on. If I didn't make the image wide enough for the biggest screen, then there would be white space somewhere to compensate.

With that in mind, I thought my best bet would be to make the background image itself responsive, but was it possible? Apparently, with the new CSS3 rules, it is! Check it: CSS3 backgrounds. It would still mean that anyone with an older browser would not see it properly, but I think the majority update their browsers, right?

So here we go. Try 1, I set background image to fixed, no-repeat and a width of 100%. BTW, the image I made is 2000 px by 1000 px. And I always prefer fixed, I don't like it when it scrolls, I find it too distracting, especially when it's a busy pattern.


Please don't mind that the text is unreadable now. I'm fixing it after, and it's quite easy: just color the background of the main sidebar and header containers white.

Problem numero uno: If you're on a widescreen viewing the blog, the background isn't tall enough to cover the whole height of the screen! Which means the background image needs to be higher than it is wide for widescreens in landscape mode. But, thinking ahead, for portrait mode, then I would need it to be wayyyyyyy higher than wide, which would make for a huge file. There's gotta be an other way. (If you see how to fix it at this point, unlike I did, you can skip to the end ;) )

Try #2: Let's just see what it would look like without specifying the width 100%. (I'm really kicking myself for not thinking of the right fix!!)



Ok, well it fixes the above problem (I think, can't check on more devices...), but I don't like the size of the flowers, I really liked them smaller. And anyway I really want it responsive. Even if I were to adjust the image to have a higher density of flowers, it wouldn't scale.

At this point, I had to leave it be cuz I had other things to do. And then it came to me while I was taking a shower. It was so simple really, why hadn't I thought of it before?

Try #3: background width to 100%, fixed, repeat-y!!!! Duh! If it's not high enough, just repeat the pattern vertically, as long as it is a (seamless) pattern, it won't even show.

And with that, TADA:



Perfect! Actually, I might edit down the background image to the minimum repeating pattern, yet still keep the same width (might also make it less wide, and therefore the flowers slightly larger). That way, the file size of the background image will be smaller, and it should lead quicker. The background image and header image are the biggest graphics of my current blog, and what slows it down a lot right now.

One of my objectives with this design was to minimize the loading times by optimizing the images (not make them too big), and using more CSS to do what I want to do. Which is what my next task will be: make a white background for the containers containing text so they are easier to read. That or/and make the container sizes responsive. Should be easier enough.

Ha! Cuz adding the background was so easy, right?!

TBC...

Continue Reading...

Research

Hello, this is my test blog for testing my new blog design over at Color Me Domestic.

I am writing test entries to verify that everything works as intended, and I thought I'd document my progress here as well, kinda more journal style. It won't be pretty, and I'll probably ramble on a lot, but it doesn't matter. I doubt many people will read it.

So I started my new blog design officially in February. I made the logo and background, and then it kinda came to a stop. Isn't it weird how the more you use your creativity, the more you WANT to use it. I find I have to make a great effort to get going, but once I've started, it's hard to stop.

Needless to say, I stopped after making those and didn't really picked it up again. I thought about what I wanted a lot though, I just didn't really research it more until this week (April 15-19).

Now i really want to make my own template from (almost) scratch. And I want a responsive design. What's a responsive design you ask? Well, it's when your design adapts to the size and shape (or resolution) of your screen, no matter how big or small it is. This means that your blog can be the best it can be for big PC size screens AND small phone screens. And also different if it's landscape or portrait. Yup it's possible! It's the new way to go. It's all thinking about the future and making your website fit future devices.

Not only that, but some elements of the blog design move around as the screen sizes change. It really is so cool! Oh and your images, text size, etc, also adapt as well. Want to see a few examples? Of course I've been reading all of this at work, so I don't have the articles that I was reading just now, and I don't remember what I googled bc googling just now doesn't give me the same stuff.

Here's a few sites I need to check up on that look quite useful for designing responsive designs:
http://bradfrost.github.io/this-is-responsive/patterns.html also has one more responsive image maps which I will most probably need.

Anyway. So I've been looking to start with, at how to build a template from scratch on a normal blog, ie not responsive, because well that's the basic. I already know and understand a bit of CSS, but I think I have a long way to go still. But it really all makes sense when I read it, it's not gibberish, so that's good! I don't know why this stuff intrigues me and I don't get bored. I'll leave it at that for now and continue looking around and learning :)

Continue Reading...