Why Use Real Fonts on the Web?

Search engines understand text, but using text in an HTML webpage typically means using fonts available on the end user’s computer. That doesn’t give designers a lot of choice. There are now many techniques available to supply a font the browser will download and use, greatly expanding the design possibilities. The text remains live so search engines can fine and understand it and edits are much easier.

CSS Image Replacement

One approach to using non-standard fonts on your website is to use images. Images alone would not be very search-engine friendly though, so using CSS to replace the HTML text with images gives you the best of both worlds — text for search engines, and rich, appealing images for users. This may be the only option if the font license does not allow web embedding.

Here is a great article from CSS-Tricks showing the variations of this technique. Read more ›

JavaScript Tip: Nested Arrays

Sometimes, you’ll need to store an array within an array. Sometimes, you’ll require even more nesting.

Note: although it’s possible to nest a number of arrays, I’d advise against it, as working with many array indices can be confusing to work with.

Let’s start with two simple arrays, which we’ll call them x and y. We’ll fill x with some values:

Read more ›

WordPress Tip: Sidebar.php

The sidebar.php file usually  consists of only minimal markup needed for outputting the widgets in the side-column widget area, which was registered in functions.php. You can do that with dynamic_sidebar(), and by passing the ID of the widget area wanted, which is side-column, again as registered in functions.php.

This means that the sidebar.php is pretty straightforward to say the least.

You can also have conditional sidebars (i.e. this site), that change content based upon what page/post is being requested.

Reference: http://codex.wordpress.org/Customizing_Your_Sidebar

Viewport Meta Tag

By default mobile devices such as iPhone or Android zoom out on webpages automatically when they are viewed to give the user a more expansive view of the page, meaning everything appears smaller, but also, more pixels are squeezed onto the screen. If your page is optimized for mobile devices or responsive design (via CSS media queries and changing the layout of webpages accordingly), then all of a sudden this “zoom out” behavior only gets in the way. It means that the CSS media queries will match the dimensions of the “zoomed out” device’s, and not its actual size.

So whenever you’re optimizing a webpage for mobile devices or responsive design, the first step is to define the viewport meta (introduced by Apple)  tag to alter/ disable the “zoom in” behavior of mobile browsers, and that’s with:

The above is the device to display the page without any zooming, so how much the device is able to fit on the screen is what’s shown initially.

Within the content=”” you can enter a load of comma delimited values such as width, height, initial-scale, minimum-scale, maximum-scale and  user-scalable, such as:

width: The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-width” to set the viewport to the physical width of the device’s screen.

height: The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-height” to set the viewport to the physical height of the device’s screen.

initial-scale: The initial zoom of the webpage, where a value of 1.0 means no zoom.

minimum-scale:  The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn’t able to at all.

maximum-scale: The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn’t able to at all.

user-scalable: Sets whether the user can zoom in and out of a webpage. Set to yes or no.

To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape, you can add an initial-scale and maximum-scale property and limit both of them to 1:

History API

Session history is an HTML5 add-on that extends the capabilities of the JavaScript history object. This sounds simple, but the trick is knowing when and why you should use it.

If you’ve never noticed the history object before, don’t be alarmed. Up until now, it’s had very little to offer. In fact, the traditional history object has just one property and three basic methods. The property is length, and it tells you how many entries are
in the browser’s History list (the list of recently visited web pages that the browser maintains as you skip from page to page across the Web). Here’s an example that uses it:

The most useful history method is back(). It lets you send a visitor one step back in the browsing history:

This method has the same effect as if the visitor clicked the browser’s Back button. Similarly, you can use the forward() method to step forward, or the go() method to move a specified number of steps backward or forward. All this adds up to relatively little, unless you want to design your own custom Back and Forward buttons on a web page.

But HTML5 adds a bit more functionality, which can be put to far more ambitious purposes.
Read more ›

Progressive Enhancement

To learn more about JavaScript techniques, you can take the JavaScript class

Progressive enhancement is the fundamental base for all front-end development. At its most basic level, it is creating a functional separation between HTML, CSS, and JavaScript.

Progressive enhancement is a layered approach to Web design, where focus is put on content, the user, and accessibility. The first step is keeping your HTML, CSS, and JavaScript separated, but we don’t refer to them as HTML, CSS, and JavaScript. We refer to these three “layers” as structure, presentation, and behavior, probably so the methodology can be accurately applied to other areas beyond the current state of Web design.

Regardless, it is a bottom-up or inside-out building model for a website or application.

You first focus on the content and mark it up with semantic and meaningful HTML. This is the first layer, “structure.” After the content is properly marked up, we can move onto layer two, “presentation.” On the presentation layer, we deal with CSS. The third layer of progressive enhancement, “behavior,” we deal with last.

Read more ›

CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions. Read more ›

Page 13 of 18« First...10...121314...Last »