The new iPad’s retina display pretty much doubles the resolution and now have an overwhelming 2048 x 1536 resolution screen rather than the old and usual 1024 x 768 resolution one. It has 44 per cent greater color saturation and 3.1 million pixels which is about over a million more number of pixels than HD TV. It’s pretty good for the digital world – better display, crisp readability and what not but has made web designers’ workload more. Quite a lot more. A big problem here is with the images we put/ use on our websites. They might end up looking worse as the ones we use are mostly web optimized for faster loading and what not. Displaying the same images in the new retina display of 9.7″ will make it look blurred.

So, how to deal with this issue?

Well, we can use better looking images. Better looking images will incur larger file sizes, which will lead to longer page loading times. So, the 4G feature in the new tablet from Apple may help compensate?

There’s a better solution – Go Responsive!

You can make your site responsive by adding custom media queries. With media queries you can have separate images for both the high resolution and low resolution. However, you will have to maintain two sets of images (high resolution and low resolution) and since they’re supposed to work with CSS they won’t help solve image element problems.

Mark Bloomfield suggests one very handy trick:

@media

}


This is not the full solution but a good way to start adapting to the new retina display. HD web is something that we all, as web designers and developers, have to catch up and start creating solutions.

Got good tips or want to add something to this article? Comment below.

Find the slides, here:

View the full project on Behance

(In no specific order)

UX DESIGN LABS

THE RANDOM LINES

PEPPER SQUARE

IT 2 MAX

iCREATORS

SPARKLIN

To really think about design, you need to learn and think about everything other than it. Design is a vessel: the most important part is what it holds. As makers of things, the work gets better from outside influences, and gives us clarity about the purpose of the work: to inform, to persuade, and to delight. We’ll spend some time ruminating on what it means to delight our audiences, think of different ways to do so through mechanisms like storytelling, and realize that the real benefit of making anything is to nourish lives.

JESS3 designed and animated this for the JESS3 lecture at AIGA Baltimore in Feb 2010.

In a recent talk at An Event Apart Eric Meyer talked about some of the visual effects we can achieve with CSS today. Here’s a few of them that you’ll find very handy (and some will also improve the user experience):

• If you have a label around a form field, you can add a border and padding. You can omit the ‘for’ attribute when you wrap an input in a ‘label’ element. This makes the entire element clickable not just the radio button but the label too.
• Transforms don’t apply to inline elements. To apply them you need to send display type to inline-block or block.
• A pre-processor like LESS or SASS does not require you to include vendor fixes –it can add them when compiled.
• Font smoothing can be used to lighten up text in Webkit browsers. Use –webkit-font-smoothing: antialiased.
• When you apply styles to form elements, Opera will stop pulling from controls from the operating system and start using it’s own form elements.

Luke Wroblewski has compiled the notes from the talk and the above is an excerpt from his original post, here: http://www.lukew.com/ff/entry.asp?1531

Many small scale design firms or freelancers don’t provide Search Engine Optimisation (SEO) as their main service. However, web designers should try to create search engine friendly websites to eave scope for better SEO techniques later in the future. Apart from providing a good, flexible, scalable markup and organized, neat css, try to make integrate the following basic steps into your sites:

1. Have descriptive headings and titles throughout the site
2. Make sure the client provides copy that’s optimal and makes for clear for web reading
3. Have an easy to navigate (sometimes easy to remember), clean URL structure
4. Keep your site-map organized
5. Set-up google analytics, webmaster tools for xml sitemaps etc
6. Include useful META descriptions
7. Keep your images, filenames, titles and alt tags optimized
8. Consider the most common 404, 403 and 500 website errors and handle them appropriately
9. Resolve old URLs, if applicable
10. Use neat, semantic mark-up. Keep content (HTML) and design (CSS) separate

The good thing is, a designer/developer can manage to incorporate these steps with a fundamental knowledge of SEO. Popular web design, development website Site point (http://www.sitepoint.com/ultimate-seo-checklist/) has put up a detailed SEO integration checklist that will help you learn the fundamentals.

“We all build websites for humans! It’s implied. Why do you need for a post for that?”

We web designers often find ourselves in a situation where there’s plenty of opportunity to make fast money by building fast and cheap sites with absolutely no brainwork behind them. They show no respect or feeling for the relationship we build with our viewers or web audience.We could create new websites with stock photography, clichéd templates and 10-year-old rusty copy that we assume makes everyone happy. Or we could follow a different path where we consider that preserving the human touch and showing ourselves in our work isn’t optional, it’s essential.

Now, why so much drama over this “human” thing in design in the first place? First off, it’s one of the fundamentals of the term ‘User eXperience’, after all we do thrive to provide the best experience. It’s that hidden attribute to any website that makes it distinct from all others. We, as users, want to see something very unique, even if we are visiting a daily news blog, we want to read, view something that’s pleasant to us while not thinking about how many lines of code have been written behind it.

Think of it like this: when you visit a restaurant, do you even once think about the meal’s nutritional value? I doubt it. You went there to fulfill your body’s need – the tasty steak or the delicious kebabs to fill your stomach while satisfying your taste buds, the immense pleasure of the experience of that meal will form the memory in your brain, one which you will carry for a long time.

Read the full post at PIXELONOMICS blog.