Posts Tagged ‘Techniques’

We are pleased to present below all posts tagged with ‘Techniques’.

Advanced Layout Templates In WordPress’ Content Editor

As a Web designer, I often find myself building WordPress-based websites that will ultimately be updated and maintained by clients who have little to no experience working with HTML. While the TinyMCE rich-text editor is great for giving Web content managers of any skill level the tools they need to easily style and publish their posts to a degree, creating anything beyond a single column of text with a few floated images generally requires at least a basic understanding of HTML.

multi-col-layout-featured

This article shows you an easy-to-implement trick that enables even the least tech-savvy of clients to manage multi-column content layouts within the comfort of the WYSIWIG editor. And for you advanced users, it’s still a great way to standardize and streamline your content entry.

Read more...

A Quick Look Into The Math Of Animations With JavaScript

In school, I hated math. It was a dire, dry and boring thing with stuffy old books and very theoretical problems. Even worse, a lot of the tasks were repetitive, with a simple logical change in every iteration (dividing numbers by hand, differentials, etc.). It was exactly the reason why we invented computers. Suffice it to say, a lot of my math homework was actually done by my trusty Commodore 64 and some lines of Basic, with me just copying the results later on.

Circle

These tools and the few geometry lessons I had gave me the time and inspiration to make math interesting for myself. I did this first and foremost by creating visual effects that followed mathematical rules in demos, intros and other seemingly pointless things. There is a lot of math in the visual things we do, even if we don’t realize it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it.

Read more...

Conversation Techniques For Designers

Designers are visually literate creatures. We use visuals to express our ideas, whether by building wireframes, sketching interfaces or pushing pixels. As a result, the majority of knowledge captured when we design a product is some form of “corporate memory”: a combination of assets and documentation. This creation of visual artifact is widely regarded as our most effective means of communicating thought through a product. However, creating a product takes more than just documentation, and much of it is communicated not visually, but verbally.

Conversation Techniques Cover

Due to the growing popularity of iterative product development, the spoken word has become an integral part of the design process. The shift in focus from documentation to collaboration has put greater emphasis on communication. Now more than ever, there is a need to articulate a design “voice” during the early stages of conversation about a product, and to maintain it throughout the process — although this is easier said than done.

Read more...

How To Make An eBook

Making an eBook is easy, regardless of your coding experience. This is good, because 99.9% of your time should be spent on writing and getting your book out there, rather than on technology. Any electronic book can be called an eBook, but because over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook, I’ll focus on the formats for those platforms: EPUB, Kindle and PDF.

The current version of EPUB is based on XHTML 1.1, which was officially proposed in 1999. That was the year when Internet Explorer 5.0 was released and grabbed over 50% of browser market share from Netscape Navigator. This is great because XHML is an open standard that many developers know; unfortunately, it’s very old.

Read more...

Searchable Dynamic Content With AJAX Crawling

Google Search likes simple, easy-to-crawl websites. You like dynamic websites that show off your work and that really pop. But search engines can’t run your JavaScript. That cool AJAX routine that loads your content is hurting your SEO. Google’s robots parse HTML with ease; they can pull apart Word documents, PDFs and even images from the far corners of your website. But as far as they’re concerned, AJAX content is invisible.

AJAX has revolutionized the Web, but it has also hidden its content. If you have a Twitter account, try viewing the source of your profile page. There are no tweets there — just code! Almost everything on a Twitter page is built dynamically through JavaScript, and the crawlers can’t see any of it. That’s why Google developed AJAX crawling.

Read more...

Create An Animated Bar Graph With HTML, CSS And jQuery

People in boardrooms across the world love a good graph. They go nuts for PowerPoint, bullet points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and everything is always “moving forward.” Backwards is not an option for people who facilitate paradigm shifts in the zeitgeist. Graphs of financial projections, quarterly sales figures and market saturation are a middle-manager’s dream.

How can we as Web designers get in on all of this hot graph action? There are actually quite a few ways to display graphs on the Web. We could simply create an image and nail it to a Web page. But that’s not very accessible or interesting. We could use Flash, which is quite good for displaying graphs — but again, not very accessible. Besides, designers, developers and deities are falling out of love with Flash.

Read more...

Optimize Images With HTML5 Canvas

Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.

Let’s refer to an image that I came across recently in my job. As you can see, this image is of stage curtains and has some (intentional) light noise:

Optimizing an image like this would be a real pain because it contains a lot of red (which causes more artifacts in JPEG) and noise (which creates awful artifacts in JPEG and is bad for PNG packing). The best optimization I could get for this image was 330 KB JPEG, which is quite much for a single image. So, I decided to do some experiments with image enhancement right in the user’s browser.

Read more...

↑ Back to top