Nice overview on the technique - it also shows a rather complex example. I moved away from designing in Photoshop, but hey to everyone it's tool of choice.
Webdesign talk - XHTML CSS, Graphic Design tutorials and Inspiration
Website for British Columbia Innovation Council (BCIC)
Don't kill a website SEO efforts during a redesign
3 Lessons learned from my latest website redesign
Retina Images for you website, 3 solutions - 1 Problem
You might consider upgrading your current graphics of your website for retina displays. Here are 3 solutions to do it in a very simple way ... but wait before you re-export all your images at a higher resolution. The new iPad and the iPhone 4S might not display the image at it's full size - if it is too big it will downsize it, making your efforts in creating a high res web experience a fail.
For more info read the following blog post, 5by5 Hypercritical Podcast and the specification from Apple of the mobile Safari webbrowser.
- http://duncandavidson.com/2012/03/photography_on_retina - http://5by5.tv/hypercritical/61 - http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15
#apple #newipad #retina #fail #images #webdesign
Embedded Link
3 Solutions For Serving High-Res Images To Retina-Display Devices
Free Web Resources Everyday - WebResourcesDepot
Google+: View post on Google+
Responsive Design breakpoint traps
Allessandro has made a good write up about responsive web design and analyzed some examples - the only problem I have is that he falls into the device/breakpoint trap as many do - me included. Most responsive website just look great at certain screen sizes - a normal Laptop Screen, the iPad, the iPhone ... everything in between looks often akward.
If the design has fixed widths then we generate white space (therefore the many minimal designs) or if we have fluid designs, we get strange overlays when sidebars don't move to the right place or we have too long text lines, that make the content unreadable.
And there will be more viewers with odd screen sizes than we have now in the future - so most of the responsive websites of today will be redone in a couple of years when they become unbearable.
Another downfall of responsive is that it's not so easy to optimize the user experience because you are bound to the same structure. If you have to load a new page on the desktop, you have to load it on the mobile view as well. I'm still on the boat of having separated mobile sites if you have major functionality changes ... if not than responsive is good enough. #responsive #design #webdesign
Embedded Link
Responsive Design: One Design for Each Job: Not Enough! For any web designer, thinking responsive means accepting a new challenge: to be creative not only to produce something that works well on desktop PCs, but also on tablets and smartphones; to create n...
Google+: View post on Google+
Free yourself from the 960 Pixel grid with Grid Calculator Basic Edition
Every serious web designers nows about the 960 Pixel Grid - it was the solution for designers who wanted to improve their design with a grid layout optimized for a standard screen resolution of 1024x768. It is still very popular, but with the advent of responsive/adaptive design and the need for designers to make designs on various screen sizes the 960 grid helps only with one size and the standard 12 pt web ssafe fonts. To calculate grids is a pain and is time consuming - making more than one for a project was not possible until now. Designers Bookshop has updated their Grid Calculator Basic Edition - which has now a focus on setting up Document Grids for Photoshop and Illustrator.
This means in short that you can make an optimized grid for your web project based on screen sizes, resolution and the font you are using in minutes - and even better, you can maintain gutter and leadings etc. through the whole project for different devices.
I'm a great fan of the Grid Calculator Tools (also have a look at the Pro Version for Indesign) and for only 29.99 it's a bargain and well worth a try.
#GridCalculator #grids #layout #webdesign #responsive
Embedded Link
Designers Bookshop – Grid Calculator Basic Edition The ultimate resource in grid systems.
Google+: View post on Google+
Donwload Section for Mobile Sites? - 5 Tips for a better User Experience
It's good practice to have a dedicated download section if a website is for a business that provides a lot of technical information for download. Especially B2B websites use the websites as a resource for providing access to brochures, drawings, etc. But in this mobile first times even B2B sites get accessed by mobile devices and downloading a file to that device is not always the best experience. Here are 5 tips for a better User Experience
1) Include a "Send Brochure to Email" Button I often find information I want to read later when I'm at my computer - the ability to send it to my email account is an easy way to remember me to read it and I know where i can find the brochure - in the email.
2) Provide links to PDF-readers Adobe has extended it's free Acrobat Reader series to mobile devices, but unlike the desktops not all smart phones users have installed them. It's much like a years ago where every website had a link to the download section of Adobe Acrobat - just now the links are for the app stores. Here are the links to the current versions: - Adobe Reader for Android - Access PDF files on the go: https://market.android.com/details?id=com.adobe.reader - Adobe Reader X for iOS - Access PDF files on the go: http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=469337564&mt=8
3) Use a third party service like Isuuu I used Isuuu on many websites. Mostly where the business had a publication or catalog they wanted to make readable on the web without transferring all the content to the website. The causes might be workflow related or just because it was just cheaper.
Issue has redesigned it's online reading experience beyond their flash player to HTML5 and makes it accessible this way to mobile devices and tablets.
4) Give an alternative URL If the brochures just are other versions of the content already present on the website you might just publish a link and a note to direct them to that page.
5) Don't get rid of the download section If none of the above solutions work for you don't just get rid of the section. Visitors might know your site from the desktop version and expect to find the download section. Just have the section with some copy stating that you don't provide downloads in the mobile version with a link to the full website. I people really want to get to the downloads they can reach it.
This are just a couple of examples and it would be great to hear other ideas - what are your solutions? #UX #mobile #webdesign
Google+: View post on Google+
What is still a pain for most web designers? Test a website in multiple browsers...
This is even more a pain if your are a freelancer and don't want to buy multiple licenses of Windows/OSX/Etc. There are many tools out there who take screenshots, but this new one is one step further.
An easy to use interface loads virtualized Windows/Mac/etc instances with the browser running. That means you can test hoover and real interaction of the website in the chosen browser. Great and cheap.
#webdesign #testing #browser
Embedded Link
Cross-Browser Testing Tool - BrowserStack Online way to test your website for browser compatibility. All versions of IE, Chrome, Safari, Firefox and Opera. Fix issues instantly.
Google+: View post on Google+
