Rounded Corners With jQuery

1 Comment

Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly.

Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one:

The “jQuery Corner Plugin” (jquery.malsup.com/corner/) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible.

Here’s how to implement it:

Guidelines for Adapting Web Site Designs for Mobile Delivery

1 Comment
Page Content

People on a mobile device are not ‘browsing’, but rather they are looking for a specific piece of information. 
Use the clearest and simplest language instead of a discursive style for site content.

Divide pages into usable but limited size portions.

If pages are too large they will take a long time to load. There are limitations on some mobile devices as to the largest page they can accommodate. Also, we don’t want our users taking a big hit on their (sometimes) limited data plans.

On the other hand, if a page is too short then the user may require multiple page requests to read the relevant information.

Scrolling

The layout of the page should be such that the user can use a simple repeated scroll. The majority of mobile sites scroll vertically, so elements should be “stacked” in this way. Some content requires a secondary scroll, such as maps or some images, but should be avoided wherever possible.

Above or Below the Fold of a web page?

5 Comments

Designing for the web can often be a tricky task, there are many variables to take in account, some of them of technological nature, some of them of human nature. The fold is something that involves a little bit of both.

What is the fold?

If you’re not familiar with the idea of the fold on web-design, we could say in a nutshell that it is the area of the site that your users will see without having to scroll, therefore, making that region very valuable. Now, calculating how big that area is, is a slightly more difficult task, it involves screen sizes, resolutions, browser type, operational system, how many toolbars the users have, and so it goes. But we’re not going to go that far this time, the point of this post is to argue that the fold may not be as important as it’s been said.

It is commonly said that users won’t scroll bellow the fold or won’t pay too much attention to the content bellow that line. I would agree that to a certain extant. I can’t deny that for most of the sites that area is the most important. That is the first impression you user will get, so there are some important tasks to accomplish on there such as:

The Unpredictable Temperment of Creativity

2 Comments
The Unpredictable Temperment of Creativity

Creativity is a picky little thing. At times it flows effortlessly, but sometimes when you need it the most it is trapped beneath the ice of a frozen lake. You can see that it is there and that it exists, but when you reach for it you just end up hurting yourself. The voice of creativity is muffled beneath the ice, but you can hear it leading you on a scavenger hunt to find the tool(s) that will break the ice and set it free.

Have you ever walked into a room that smells fantastic - perhaps of freshly baked cookies or something else Christmas-ey (insert aroma here)? After 10 minutes or so you don't smell it anymore - your nose gets used to it. Your brain is no longer interpreting it as anything. You have now become it. Then somebody else walks into the room and comments about how great it smells! Introducing the concept of "a fresh perspective" (nothing new to anyone).

Get your Drupal site some traffic

3 Comments

First of all, in order to get lots of traffic to your site you need to design an attractive Drupal site. Spend the extra dollar for a great design and you will see your returns from the community in no time. I see a good drupal site as being a large part of SEO; if the site is not usable or does not draw attention, it won't encourage users to return to the site.

To help avoid this problem, and encourage traffic, my tip is to submit your site to design galleries. For instance, you get your website listed on some of the most popular CSS Galleries, you will be drawing in 1000+ hits on that day, which eventually spreads the word and brings more galleries to list you. This not only draws in a new crowd but it also keeps the regularers visiting your site. Some of the largest CSS galleries are http://www.cssmania.com and http://bestwebgallery.com. But not to worry, there are tons of other galleries that are great, and the best part is you can submit your website for FREE!

Now, for those drupal sites, you can get a focus audience of Drupal developers and designers. Here is a list of my favorite Drupal CMS Showcase websites that you can submit your site to:

Top 5 Educational Institution Websites

Comments

Recently, I spent time doing some research for a project that consisted of re-designing a website for an educational institution. I wanted to see what some of the higher profile universities and colleges were doing with their sites, but my findings were that most of them were completely outdated from a design standpoint, and not overly usable. The most common things I found were homepages that were extremely wordy and navigation systems that were far too complex. With tuition prices always on the rise, and the ever-growing importance having a strong online identity, I really feel that an Institution's website should be a priority. Especially since it is often the first thing that people see (from all over the world) when researching their education.

With that being said, I did come across a few diamonds in the rough. Here are the top 5 best. The most surprising thing to me is that Harvard, MIT, Yale and other notable institutions didn't make the list...not even close.

5) Northern Alberta Institute of Technology

www.nait.ca

Using Axure for Building Wireframes

5 Comments
Using Axure for Building Wireframes

For a lot of our Drupal development projects, developing web site wireframes and information architecture is the first step in the process. A lot of web developers use Microsoft Visio or OmniGraffle as their wireframes tool.

At Appnovation, we have been using a tool called Axure RP for creating wireframes. Axure is a tool that is specifically designed for creating web site wireframes. As a result, all of the tool bar elements are strictly catered towards the web design world. We really enjoy working with the Axure for a number reasons:

1) Drag and Drop Elements
Using Axure, a web designer can easily add form elements and place holders to the page. Since all of the tool bar elements are designed for creating web site wireframes, there is no need to search for the right icon. This is the case for Visio since there are so many different elements available on the tool bar.

2) Export Wireframes as HTML

My Local Habitat

2 Comments

I'm interested in hearing about other peoples local environments - developer or designers! What applications do you use the most and how do you use them together to streamline your workflow and achieve maximum efficiency? I like to think I have it down, but I guess what it all boils down to is what you are comfortable with. Still, I long for less keystrokes, if only one.

Lately I've been growing irritated with my text editor - TextMate for the mac. Some negative things about it are really becoming quite apparant to me, one thing in particular is the searching capabilities, especially when dealing with a really large project. It takes at least 3 - 4 minutes for me to find something (on this one particular project) and lately it's just been hanging. Maybe the answer here is a re-install, but another answer would be to try something else. Any suggestions (other than Coda)?

Appnovation Technologies: Website Re-design

0 Comments

Well, the Appnovation website is due for an update. We’ve grown since our last redesign, and Justin/JT/@mepho—our trusty web designer—has been given the go-ahead to take our site to the next level. He’s nibbling away at the project, in between larger mouthfuls of client gigs. Chances are good that he will have more than one idea, and the resulting mocks will be posted here (here’s one now!)

This mock satisfies a few requirements given to our designer for the front page:

  1. That there be a slideshow of our projects;
  2. Clear link to our blog;
  3. Clearer visual representation of our featured projects;
  4. Better logo representation;
  5. A link to our Appnovation people;
  6. At the bottom: a callout about Appnovation, and a link for clients to click in order to request a quote.

Appnovation Redesign

JT has satisfied these requirements and hopes that he has time, in the near future, to play more with the redesign.

25 Best Looking Drupal Websites

10 Comments

There is this perception that Drupal websites have a static type of look and cannot be customized to look any different. Well this blog posting is to prove a point that Drupal is more versatile than it may be presumed. Here is my personal top 25 favorite list for the best looking drupal sites covering various industries and professions.

The list is not in any order, if I have missed any great ones please feel free to comment.


Fox Searchlight
Fox Searchlight


DrupalCon 2009
DrupalCon 2009


Battlefield Heroes