Month: March 2017

Posted on

Stay, Footer! STAY!

How to keep that footer at the bottom.

One of the more frustrating things that I remember having to deal with in my earlier web design creations is trying to get the footer to stay at the bottom of the browser’s window even if there wasn’t enough content to push it to the bottom. However, if I had more content than the size of the display view, I wanted the footer to stay at the bottom of the content. To be clear, I didn’t want the footer to be floating and covering up content, I just wanted it to be at the end of content or at the bottom of the display if there wasn’t enough content to fill the display.

This type of footer is affectionately known at the “The Sticky Footer.” There are lots of options out there that I’ve used in the past that have worked very well, but there can be some limitations – mainly that you are working under the assumption that the footer has a fixed height. Not necessarily a deal breaker, but not that the greatest thing for today’s responsive designs. These solutions make it difficult to plan around changes in footer height due to the changing size of the contents within it.

From Footer Problems to Footer Solutions: Flexbox!

Flexbox is a new-ish formatting spec that came into existence around 2009 and has gone through several iterations before landing on the specification in 2012 that we use today. The flexbox implementation looks like this:

HTML:

<body>
   <div class="content">
      content
   </div>
   <footer class="footer"></footer>
</body>

CSS:

html { 
   height: 100%; 
} 

body {
   min-height: 100%;
   display: flex;
   flex-direction: column; 
}

.content { 
   flex: 1; 
}

This is the cleanest and version of the Sticky Footer that I’ve seen. Thanks Flexbox!

As awesome as this is, there can still be downside – remember that little mention about the iterations of the flexbox spec? It can make for a ton of additional browser prefixes added to your CSS if you have to support the older browsers.

Wanna know more? CSS tricks has a great post covering the 5 versions of the sticky footer here Sticky Footer, Five Ways and there are some other great articles to brush up on  the flexbox with Are We Ready to Use Flexbox? and this one on Using Flexbox: Mixing Old and New for the Best Browser Support.

Let me know what you use for your Sticker Footer solutions below!

 

 

 

Cheers!
-Matthew Vazquez

Posted on

Personas – What are they good for?

Why do we use personas?

For the web design industry, personas are of great importance and use for narrowing down your design goals and to have a clear and directed target audience. If you don’t know who you are designing something for, how do you know what to put into that product? How would you go about creating a walking for a hiker verses an elderly person or someone who is visually impaired? Sure you could create one that caters to all of the above people and that has everything but the kitchen sink thrown in, but that would be one expensive walking stick and how would you know that it would sell? How do you know that it meets the needs of the people who you are trying to get to buy it?

Personas are used in all types of areas. These are just a few just off the top of my head:

  • Engineering
  • Automotive
  • Consumer products
  • Marketing
  • Blog Creation
  • Website Creation
  • User Interface /User Experience design
  • Search Engine Optimization
  • App Development

So, how does one go about creating a persona? It just so happens that there are a number of really great articles out there that are super helpful in creating personas. Here are a few:

Hopefully this will give you some great ammunition to get you thinking and working with personas within your particular field. It may take a bit of effort to get it put together, but this is effort well spent and having a persona will save you much more time in the long run.

 

 

 

Cheers!
-Matthew Vazquez

Posted on

The Complete Usage of the White-space CSS Selector

What the heck is this white-space thing and where the heck am I supposed to use it? Why do we need something like this in our CSS? If you’ve ever wondered where, what and hows of the white-space selector, here’s your chance to get some learning in. This article takes you step by step through the complete usage of this handy-dandy little selector to bring your skill level all the way up to 11. Here’s a little sample:

Value: pre

The value pre works exactly as you would expect: The same as content wrapped inside <pre> tags. All spaces and line breaks are honored, creating output in the browser that is virtually identical to what is in the markup. Also, just like the <pre> tag, if everything in the markup is on a single line, the line will push the boundaries of its parent to keep everything in the output on a single line.

white-space: pre

Want more? The full article can be found here:

The CSS white-space Property Explained

What clever uses have you come up with for the white-space selector? Be sure to let us know below!

 

 

 

Cheers!
-Matthew Vazquez

Posted on

Expert Ideas for Better CSS Coding

The following is just a snip-it of a huge list on great ways to get your CSS in shape for your projects, especially when CSS can get pretty unwieldy. These are just a few of the ones (some are new to me) that I’ll be sure to implement from here on out:

  • Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique4], [Ryan Parr]
/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("flash.css");
@import url("structure.css");

<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>

 

Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life19]

 

Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven892413]

and here is THE one that I think I like most of all:

To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook68341816]

Check out the rest of the article here- it’s got a plethora of great ideas to  use:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

 

What are your expert ideas that really make your life easier? Be sure to share your ideas below!

 

 

 

Cheers!
-Matthew Vazquez