Categories
Blog Digital Responsive Web Design Web Best Practices

2014 Web Design Trends

Trends we can expect to see this year for web development and design. Building on what became popular in 2013, here are some web design trends you can expect to see more and more in 2014.

1. Creative approaches to navigation – gone are the sidebars and the expected menu bar of years past. This year, you can expect to see more sites with creative navigation, tabs, layers, and animation. Off canvas User Interfaces seem to be on trend.

2. Simple and clean colours – more sites than ever are employing a monochromatic look with a pop of a single, usually bright, colour. This draws the viewer’s eye directly to the most important information.

3. Hero image – as the web becomes more and more visual, images are taking the place of content as “king” of the internet. As such, websites that feature large hero images on the home page are becoming more popular.

4. Unexpected typography – hand drawn and energetic fonts are something we will see more of in 2014 as we did last year. Look for combinations of unique font faces with clean text to create an eye-catching juxtaposition.

5. Video in place of text – videos are a great way to engage with your audience and add new depth to your search engine optimization. Now, we are beginning to see video used in place of lengthy text on the home page to eliminate clutter and enable viewers to interact with the brand in a dynamic way. Videos as backgrounds for pages is on trend.

6. Long scrolling page and parallax elements – we’re starting to see long scrolling becoming the norm for shallow sites with little need for navigation. For service-based clients, a long scrolling site may be ideal, especially if you are in a visual industry. As seen on my homepage, images in the background can scroll at different rates giving a layered look.

7. Image Filters – manipulating images for use on sites is a trend I expect to continue into the future. With the popularity of apps like Instagram, and the integration of photo effects into iOS7, we know that altered and filtered images are here to stay.

8. Responsive web design – it’s important to define your target market clearly and determine if a mobile responsive website is necessary for your particular brand. In most cases, it’s a great idea to have this from the beginning. A mobile first approach seems to be the way to go.

Curious as to what I can do to make your site better using these cool techniques? Contact me today for a quote.

Categories
Web Best Practices

HTML5 Canvas – Arcs

HTML5 is sweet and I have been experimenting with it’s canvas using Javascript and CSS to render a user interface and graphics. In the example below I am drawing multiple circles and arcs on the canvas tag. This could be used online or in an app for charting or statistics, even a clock.

Your browser does not support HTML5 Upgrade your browser now

Code Example Below:

var ctx = $(‘#stat-arcs’).get(0).getContext(‘2d’);
ctx.lineWidth = 20;

ctx.beginPath();
ctx.arc(124, 124, 120, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 100, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 80, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 60, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

ctx.beginPath();
ctx.arc(124, 124, 110, 1.5*Math.PI, 1.05*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#1E263C’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 90, 1.5*Math.PI, 1.25*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#435A6D’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 70, 1.5*Math.PI, 1.0*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’111111′;
ctx.strokeStyle =’#57708A’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 50, 1.5*Math.PI, 0.8*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#95AABD’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 40, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

Canvas Code:
... id="stat-arcs" width="248" height="248"...
Please note HTML5 does not work in IE8 or older, but those users see the text in between the canvas tags as seen below.

Results as PNG image in modern browsers as seen below.

HTML5 developer in Vancouver

Categories
Web Best Practices

Web Design and Cross Browser Compatibility

One of the biggest challenges of web development is making websites that are compatible in all of the major internet browsers. The main browsers are Internet Explorer, Firefox, Safari, Opera and Chrome. It can be extremely difficult to make everything work identically in all browsers, especially as your web design becomes more complicated, but I don’t think it’s impossible or that it always has to consume your entire budget on a web project.

With that said, there have been times where I want to boycott each browser, but with a little focus and research, there’s always a fix!

I see a lot of novice developers just learning how to code tableless designs complain that their website works perfectly in Firefox, but then completely breaks in Internet Explorer.  It’s one thing if your website is totally destroyed in IE6. I get it. It takes a lot of practice to understand why IE6 does what it does, and none of us will ever fully understand what Microsoft was trying to accomplish there. And even though I do always try and support IE6, I don’t expect everyone to do that. It’s a personal call from developer to developer.

With that said, there’s really no reason why a website you develop would work in the latest version of Firefox, but then be totally destroyed in the latest version of Internet Explorer. This just means that there are clearly some things that you don’t understand, and there’s absolutely nothing wrong with that; this is how you learn. Just don’t bitch about it in a forum and curse IE because you don’t understand basic web development concepts work, like the box model, for example.

Oh the box model, you say?

Yeah, I just threw it out there! We’re getting closer to the reveal of the Bobich Law of Browser Compatibility.

For those of you that don’t know, the CSS box model describes the boxes that are formed around elements of content in a Web page. Every element in a Web page is in a box or is a box. The boxes on Web pages are constrained by rules defined by the CSS box model.

Well, I already know about the CSS box model, so what’s your point?

This is all nothing new, right? Many developers know all about the CSS box model, but choose not to think about it until they see a broken website in IE.

I used to have a partner at the Advertising agency I worked at that was so adamant about W3C compliance that he would always say with his nose pointing up to the sky, “I design for W3C standards only. IE comes later.” Then after the site was essentially finished, he’d view his broken site in Internet Explorer and start going through and making changes in a stylesheet called with an IE conditional statement. No offense to him if he ever reads this, but while neatly commented, his HTML/CSS was quite sloppy and he spent way too much time trying to configure this sloppy CSS file for IE.

But would you believe there’s a way for your website to have totally W3C compliant CSS while still having all of your boxes be the same width in both Firefox and Internet Explorer?

So what the hell is it already?

It’s so simple, you’re going to be embarrassed I had to tell you, but this is a rule I’ve developed for myself and I always follow whenever I code anything. And finally, this is what I’ve dubbed the Bobich Law of Browser Compatibility:

Never set a width to a box that has right/left padding or right/left border, and conversely, never set a height to a box that has top/bottom padding or top/bottom border.

Easier said than done, Jason! I need padding and widths on all my divs, how will I ever trudge on?

Don’t worry, friends. I’m not going to just throw out something as mind blowing as the Bobich Law of Browser Compatibility without giving you some helpful information on how to work with it.

Keep in mind that many developers might disagree with the methods I’m about to share because they could be said to add too much cumbersome HTML markup to your site, but I don’t care. If you’ve purchased any of my Theme Forest themes, you’d know that I write extremely clean HTML and CSS that looks almost identical in most browsers.

Basically, on all of my major layout divs that need a width, I also add in a nested div that will have any padding or borders associated with it. Here is an example of a box that will be 300px no matter if it’s viewed in Firefox, Safari, Chrome, Opera or even Internet Explorer.

This is a box that’s 300px wide in all browsers with 10px of padding and a 1px border.

Here’s the code that produces the above box:

<style type="text/css">
.example-box {
width: 300px;
background: #f2f2f2
}
.example-box .pad {
border: 1px solid #ccc;
padding: 10px
}
</style>
<div>
<div>
This is a box that's 300px wide in all browsers with 10px of padding and a 1px border.
</div><!-- .pad (end) -->
</div><!-- .example-box (end) -->

Now, I’m not saying you need a div inside of every div in your website. If I were saying this, I’m sure Nick La would slap me across the face! Nick La runs the super awesome web design blog, WebDesignerWall. He’s even written a post about not having nested divs all over the place, and this is why I made sure to say I do this only on my major layout when I need to. So, I definitely agree that wherever possible, as Nick stresses in his post, that you should avoid extra divs.

For example, say you have some HTML like this:

<div class=”box”>
<h2>The Title</h2>
<p>The content…</p>
</div>

If you have a set a width to that “box” div and you want there to be padding within it, there’s no need to put another nested div inside when you can just add padding.

Categories
Web Best Practices

Photoshop “Save for Web” colour issues

I am Canadian, so I spell colour funny. It is the UK spelling, the Queen’s English some say.  I am also a Web Designer so in order for CSS and HTML to work colour must be spelled the American way, so I will use that spelling from now on. Anyway… in this posting covers how to “save for Web” in Photoshop and preserve color settings.

Three Steps to Color Perfection.

Step 1: Color Profiles

Color profiles define how Photoshop interprets the raw color data in your files. That’s right: That means they change how you see the colors. This kind of precision is great for photography and print design, but it’s got to go if we’re making a website. With no images open, go to Edit / Color Settings.
Color Settings

Fig. 3 : Changing to Monitor Color.

We’re going to essentially turn off all this profile nonsense by changing the top drop-down to Monitor Color. Let’s uncheck “Ask When Opening” while we’re at it….from now on, when you open an image that has a color profile, Photoshop will give you a brief heads-up that we’re tossing it out.

Step 2: Proof Setup

Now, let’s go up to View / Proof Setup / Monitor RGB. This is to make sure Photoshop won’t be showing you skewed colors on your nice new profile-less images. A note, though: If you’re on a Mac/PC and want to see how an image is going to look on the other’s default gamma setting, you can come back here and test using “Windows RGB” or “Macintosh RGB.” Just remember to switch it back, or you could accidentally be designing in (shudder) PC mode.
Proof Settings

Fig. 4 : Make sure you’re not viewing the wrong proof colors.

Step 3:

After all this hard work, Photoshop still wants to sneak color profiles into your images. Most web browsers ignore them, but new Safari and Firefox builds DON’T, and IE can be set to work with them too. This can result in the weirdest cross-browser headache yet, so we need to make sure the colors we save out are sans profile.
Convert to sRGB

Fig. 5 : Convert to sRGB is an evil setting.

Thankfully, it’s an easy fix: Open up any image on your machine and File / Save For Web. Next to the Preset option, there’s a sneaky little arrow…click it and uncheck “Convert to sRGB.” (Note: From what I can tell, this is only the default setting in CS3)

Congratulations

Your color woes are over! Or maybe not. If you followed these steps and your color accuracy test failed, leave a comment with your results.

Categories
Web Best Practices

CSS Font-Size

em vs. px vs. pt vs. %

One of the most confusing aspects of Cascading Style Sheets (CSS) is the application of the font-size attribute for text size and scaling. In CSS you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.

Meet the Units

  1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.

Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.

In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).

Font-size as the client changes the text size in their browser.

When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.

Conversion from Points to Pixels (and Ems and %)
Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%