Floats vs. Column-Count

If your website contains a heavy amount of information, chances are that you’d benefit from having a multi-column design. You’ll be able to fit all of your information in sizable chunks without having the user scroll endlessly. Question is, how do you employ a multi-column design?

There are two ways to accomplish this: 1) you can use multiple tags and float them next to each other; or 2) you can use CSS3 column-count styling to set the number of columns you want for a certain block of text. Let’s examine the pros and cons of each.

Float Styling

Pros: Float styling has been around for a while, and so this particular style has a lot of browser support (even Internet Explorer 4.0+ supports it!), so you can be rest assured that anything you style with floats will work on almost everyone’s browser.

Cons: Floats—when it comes to creating multiple columns for text—are rather impractical. If your content doesn’t change often it’s not too bad, but if you know you’re going to be changing around your text a lot floated <div>s will quickly become a hassle to deal with. Adding or subtracting text can make your columns look weirdly uneven, and so you might have to go back and update your spacing so that it doesn’t break your design.

Column-Count Styling

Pros: One <div> tag styled with column-count is MUCH easier to maintain than multiple <div> tags styled with floats. This style automatically adjusts your content to fit into the multiple columns so adding or subtracting content is no problem.

Cons: This is still a relatively new style (just introduced with CSS3) and so there is not a whole lot of browser support for it. If your target audience includes those who don’t necessarily keep up with the latest browsers, chances are that column-count will not work in their browser, leaving your text as one huge block instead of your pretty multiple columns.


 

Conclusion: Which solution works best for you will most likely depend on who your target audience is. If you’re designing a website for an audience who are tech-saavy and like to use the latest and greatest technology, you’ll probably be safe using column-count styling for your content. However, if you’re designing a website for an audience that don’t use technology often (such as people 60 and older) or don’t have access to technology (such as people with low income), you want to avoid doing anything too fancy that is not supported by older browsers.

Simple CSS3 Transitions

If any of you have take a look at my portfolio lately, you may have noticed something new. If you haven’t noticed something new, or just haven’t looked at all, I encourage you to take a look at the portfolio page now. When you hover over one of the portfolio pieces do you see how the work title fades into a different background and font color? This was made possible with the help of CSS3 transitions.

You can do TONS of things with CSS3 transitions: you can change colors, heights, widths, position, shape, opacity, and more! If used effectively (don’t oversaturate your website with them) you can make your website more dynamic, interactive, and memorable.

Here’s a simple step-by-step tutorial on how I added CSS3 transitions to my portfolio to create a simple fade effect, but it’s easy to change these attributes to fit what you need for your own project.

  1. First, have your HTML elements set up: You can’t do any transitions if there’s nothing to transition! This is the setup I have for my code:

    <div class=”portfolio”>
    <a href=”#”><img src=”image.jpg” /><span class=”workTitle”>Work Title</span></a>
    </div>


    In case you can’t tell what’s going on, here’s the run down. I have an image (<img>) and a span tag (<span>) with the class of “workTitle” that present my portfolio piece thumbnail and my portfolio piece title. These two elements are encompassed within an anchor tag (<a>) which links the visitor to that portfolio piece’s individual page. All of this is finally encompassed within a div tag (<div>) that has the class of “portfolio”.

    Note: If you don’t know what these tags are, or what classes are, I highly recommend looking up some HTML tutorials before you continue.

     

  2. Style your HTML elements: There needs to be a starting point for our HTML elements; they need to have some basic styling that will serve as their “default” state. Since we’ll be changing our work title’s background and font colors, this <span> tag MUST have these styles already set. We’re going to set the background color to aqua and the font color to a dark gray:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    }


     

  3. Add your hover styles: We want the work title to change colors when the user hovers over the portfolio piece. This is a little bit tricky, because we want one element to change (the <span class=”workTitle”> tag) when we hover over another element (the <div class=”portfolio”> tag). Normally when you create hover-based transitions you’re changing the specific element you’re hovering over—in this example that would mean we change the <span> tag when hovering over the <span> tag specifically—but in this case that would mean the visitor HAS to hover over the work title for it to change. We want to be able to have the work title change colors even when the user is hovering over the image as well. Therefore we must target the <div class=”portfolio”> tag. In order to do that, here is the code we’ll be using:

    .portfolio:hover .workTitle {
    background: rgb(38, 38, 38);
    color: #FFF;
    }


    Basically we’re telling the browser that when the user hovers over the tag with the class of “portfolio” (our <div> tag), we want the background color and font color to change to these colors for the tag with the class of “workTitle” (our <span> tag).

     

  4. Add your transition: Now comes the fun part, adding your transition! The transition will be affecting our work title, so we must add the CSS3 style to the <span> tag with the class of “workTitle”:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }


    So what are we looking at? In order to make a transition we must call the transition property. The syntax of this property is as follows: style property > duration > timing. In this example, I am targeting the background property and I want it to change over 0.3 seconds with a timing of ease-in-out (this means it will have a slow start and slow end, speeding up in the middle). You can change these attributes to whatever makes sense for your project. You can change the duration to last for 120 seconds (I wouldn’t recommend it though) or you could change the timing to ease, linear, ease-in, ease-out, etc.

And you’re done! You now have a beautiful transition that will make your website more visually interesting. You can change most any step in this tutorial to make it work for your website, but be careful: do NOT overuse transitions! Using transitions sparingly is much more effective than using it everywhere you possibly can.

Responsive Web Design

It was much easier to design websites back in the day where the only thing you had to view your website was your computer. There was only one screen size available, and so there was only one screen size that you had to consider when developing your design.

That’s no longer the case. Nowadays the number of screen sizes are growing exponentially as more and more devices get released. You now have to consider a wide range of devices: smartphones, tablets, phablets, desktop computers, televisions, and much more. In order to optimize your content for all of these devices, you must employ responsive design on your website. Responsive Web Design (or RWD) is the process of designing and developing websites that are able to react to user behavior and adapt to changing mediums (screen size, platform, orientation, etc.). Using RWD is important because it allows you to deliver web pages of variable sizes to ALL of these devices without having to create a new website for each and every screen size, which would just be tedious and awful.

responsive design

You can type in “responsive web design” into a search engine and pull up thousands of resources that go in depth about RWD concepts. Here are some of those basic concepts:

  1. Set the Viewport: The first thing you should do is throw this into your <head> section of your website…<meta name =”viewport” content=”width=device-width, initial-scale=1.0″>What does this do exactly? The meta viewport tag modifies the virtual viewport of the device, which in turn changes the behavior of the browser. The width=device-width matches the width of virtual viewport of the device to the physical width of the device, and the initial-scale=1 controls the zoom level when the page is first loaded. In short, this will make your content resize appropriately on every device.
  2. Do not use fixed units of measurement: Back in the day you could design a website down to the last pixel, having a fixed width and height for every element. However, pixel units are not RWD-friendly. Avoid pixels and stick with relative units like percentages (%) or ems. These relative units will adjust based on the screen size you’re using to view the content; for example, a <div> box with a width of 70% will ALWAYS have a width of 70% no matter if the screen size is 1000px wide or 500px wide. Percentages are best used for boxes that wrap content and images, while ems are best used for font sizes.
  3. Use CSS Media Queries: Using fluid units of measurement will certainly help you create a responsive design, but it will only get you so far. There will be several points where your design “breaks” (called breakpoints) and you’ll likely have to change some of your CSS styling to fix these breaks. However, in order to have these fixes only affect your design when the design actually breaks, you’ll have to utilize CSS media queries. These media queries will query your device to find out information such as browser or devices width or height, resolution, orientation, and much more. Based on the characteristics they query, they will target that characteristics and only have style changes take effect when the conditions are met. For example, say you want the background to change from black to white once the screen size gets smaller than 500px. This would be the code you’d put in your stylesheet:@media screen and (max-width: 500px) {
    body {background-color: white;}
    }
  4. Mobile first?: You may here the term progressive enhancement used when designers talk about RWD. Progressive enhancement is the idea that if you start designing a website at a mobile size and work towards a desktop size, you will ensure that your website will look good across all screen sizes. Designing for mobile devices certainly has more restrictions than designing for a desktop computer, and it’s much easier to add content rather than subtract from it. However, I personally do not think it’s a necessity to design starting with mobile first, and actually I always design my responsive websites starting with desktop sizes and going towards mobile devices. I think it comes down to a matter of preference; if you’re more comfortable with adding content then start with mobile, if you’re more comfortable subtracting content then start with desktop. Despite this, I agree that progressive enhancement is probably the best practice.

There are some things to consider before deciding if RWD is right for your website. The biggest item you should consider is whether your content is appropriate for small screen sizes. If your target audience never uses smartphones to look up your content, it would be a waste of time and money to design for mobile devices. Sometimes you may find that it might be better to create a web app for mobile devices completely separate from your website. While responsive design is something that is becoming more and more necessary as new devices get released, do take the time to consider if it’s right for your website.

Sources: [ Responsive Web Design Basics – Web Fundamentals ], [ Responsive Web Design – A List Apart ], [ Responsive Web Design: What It Is and How to Use It ]

Designing for Mobile Devices

Before we have a discussion about responsive design (which we will have very soon), I thought it might be a good idea to first examine what it takes to have good web design for mobile devices. When dealing with mobile design, it’s a constant battle to fit all of your content on a very small screen. Here are a few tips that will help you figure out how to present all your information while keeping user frustrations to a minimum.

  1. Simplify and optimize core content: With a desktop website, you can put in as much information as you’d like without problem (well, don’t put in TOO much). With mobile devices, the screen size is much smaller, and so you need to be choosy with your content. Only present the most vital information in small, scannable chunks and cut out the rest. Doing this will benefit your website in several ways: 1) you reduce the amount of scrolling a user has to do; 2) you decrease the loading time for your website; 3) relevant information is much easier to find; and 4) you have more available space so you can increase font size, reducing user eye strain.
  2. One-column designs: When viewing websites on a desktop computer, it’s very likely that you’ve seen many designs that use multiple columns. This makes viewing information easy, but on a mobile device this multi-column design will only make your text extremely tiny and difficult to read. You want to reduce your design to one column only, that way your images and content can utilize all the available space possible.
  3. Make buttons/links BIG: It’s easy to click on tiny links on a desktop; you have a tiny little arrow that you can move with precision with your mouse or trackpad. On a mobile device it’s very unlikely the you have this kind of accuracy so you must accommodate. Make buttons big and text links long, as this will give users more area to hit with their fingers.
  4. Consider hiding navigation: While you could have a large, button-style navigation at the top of your page, another space-saving option would be to hide your navigation. This is usually done by having a small icon with a menu symbol (usually three horizontal lines) that opens up to reveal menu links when the user touches the icon. The advantage of this is that you can have the icon fixed on the screen so that no matter how far down the user is on the page they can easily access it without it being obstructive.
  5. Keep file sizes small: Mobile devices are not going to have the same connectivity that desktops have. Loading rates are going to be much, much slower, and so it’s essential that you keep your file sizes as small as possible so total loading time is reduced. File sizes can particularly spike when it comes to images, so consider optimizing your images to appropriate file types and sizes (although you should be doing this anyways!).
  6. Use a responsive layout: If you’re designing for mobile devices, chances are that you’re not designing for just one device. With a vast multitude of screen sizes available, it’s best to design a responsive website. This means using relative units of measurements like percentages (%) or ems, rather than absolute units like pixels. In particular, you want to have images that scale nicely across screen sizes. Responsive design will be covered in more detail in another article.
  7. Reduce user input: If there is one common aggravation that most users have experienced, it’s trying to fill out a registration or some other form on a phone. It’s tedious to type out your information, and it’s even more irritating when your session times out as you try to hit submit. Therefore, you should try to keep form inputs to an absolute minimum. If a user is trying to register to your website, have them only provide a name, username and password; if you need more information beyond that, have them fill it out at a later time so they can complete it at their convenience.

As always, there is much more to consider when it comes to mobile design than what is listed here. However, I feel these seven tips are probably the most important to keep in mind the next time you’re designing your website.

Sources: [ A Look Into: Designing for Mobile Devices ], [ Mobile Web Mastery: 25 Tips on Designing for Mobile Devices ], [ Mobile Website Design: 30 Pro Tips ]