Cullmann Design Blog

Icon

The Retina Display for Web Designers in 5-Minutes

Apple’s ultra-high pixel density displays have been available since the launch of the iPhone 4 in 2011 and more recently, the iPad 3. The newest iteration appears for desktop computing in their MacBook Pro line. Many speculate (and this is a safe speculation) that a stand-alone Retina display, or all-in-one iMac is soon to follow.

What does this mean to web design and the people who design and develop websites? Quite a lot of changes. The need for a change was already called for. Smartphones are outselling features phones. The arrival of the tablet as a major platform is clear. Content syndication for everything from Kindles to TVs is a mandatory for content creators. The Retina display is simply another platform with its own needs and user preferences.

The concept of Design (with a capital “D”) must change. Designers, and those who hire them, need to abandon the idea of precise control over how a user is presented with content, pictures, and branding. The very idea of visual design needs to give way to addressing the user’s (or viewer’s, or reader’s) needs.

This is going to be as true for the Retina display as it is for a smartphone or tablet. Images may have to be presented cropped, expanded, or perhaps omitted entirely based on screen resolution, physical size or connection speed.

The ultra high pixel density of the Retina display will become a playground for high-end visual websites that are able to provide a massive amount of bandwidth, fast servers, and a hungry audience looking for an exciting new experience. This will be a minority of webs users though. How will designers and developers address this gap in capabilities? How will a website owner serve content to an Android phone on one end of the spectrum and the 15.1 million pixels of a 15” retina display at the other?

The simplest solution is that web designers will rely much more heavily on typography. Typekit, Fontdeck, and Google all offer impressive libraries with support on many platforms. There is already a resurgence of type-driven design that is supporting desktop and mobile. The Retina display’s clarity will be the perfect vehicle for such design.

Responsive web design, another growing trend, is another solution. By using the browser’s dimensions to change the design structure, a designer can address a small smartphone screen and a desktop experience by changing type proportions, the size of images, and even hide elements.

Server-side technology is already being used to dynamically alter content based on user and connection variables. Providing high resolution images to target a user’s platform would be complicated, but something skilled developers could deploy. Popular frameworks also support this kind of implementation so that designers with access to their webhosts can upload a variety of different sized images to support all types of users.

It’s not clear how the design and development community will respond to this new challenge, but it does, from a design perspective, shake up how visuals can and should be approached. This will also be a watershed moment for developers as new and more targeted methods are created to push content to bit-hungry users everywhere.

If this subject interests you and you’d like to learn more about designing for multiple devices and a wide variety of users, visit A List Apart, a great resource for standards based design techniques or Dan Cederholm’s website Simplebits.

5 Mac Apps I Can’t Live Without

5 must have mac applications for designing and developing websitesI work day-in and day-out designing and building websites. In this post, I’ve compiled a list of my “must-have” Mac software that I consider best-in-class and a “requirement” to get through my day: 

  1. Mozilla Firefox
    I was an early adopter of Mozilla’s browsers. Communicator was bloated, but the release of Firebird was a big change in what a browser could offer. It’s a fast, reliable and completely cross-platform solution. What makes Firefox such an important tool for me is the eco-system of extension. I don’t use many extensions, but the ones I do are indispensable. Web Developer, by Chris Pederick is a fantastic extension that offers inline editing of any website, visual outlining of structural elements and classes as well as many other tools to help debug websites. Firebug is another must-have for anyone working on websites or apps. It duplicates some of the functionality of Web Developer, but offers additional features and an interface for more involved probing into code. The shortlist of extensions also includes XMarks (previously FoxMarks). This is an online bookmark synchronization tool that allows you to share bookmarks accross all of your browsers, regardless of platform. It’s very handy for anyone who has multiple development environments. FireFTP is the last in my list of extensions, but not to be forgotten. A fully-capable FTP client embedded directly in the browser. The performance and interface are excellent and it’s performance make it a great choice for quick FTP chores. By installing Firefox on any machine, Mac or PC, I then have an adhock development platform that is consistent and reliable with little set-up. The recent release of Firefox 4 has drawn me back into Mozilla’s camp and away from Google’s Chrome as my primary browser for surfing.
  2. Photoshop/ImageReady
    As someone who designs websites, getting away from Adobe Photoshop is difficult if not impossible. There are other solutions available, some of them free, but few can compare to the industry standard. It’s expensive, complicated, uses massive system resources, but it is used by everyone and ubiquitous in the industry. Adobe has discountinued the low-rent little brother to PSD: ImageReady. ImageReady was a capable software package that held 90% of the utility that most web designers used in PhotoShop. Currently, Adobe’s only low-cost solution for working with a PhotoShop file is Adobe Elements. Adobe is experimenting with browser-based versions of PhotoShop, but for most people who are looking towards making a living from their craft, performance and features are still falling short of their needs.
  3. TextWrangler
    A simple, elegant and wonderfully designed text editor for the Mac, TextWrangler is a favorite. I prefer to hand-code and avoid WYSWYG editors-TextWrangler is light, smart and provides all of the elements I need for coding. Like the application itself, there isn’t much to say. It works. It’s stable. It’s very well designed. It’s free. I have downloaded TextMate several times, but despite it having great features and an equally fantastic interface to TextWrangler, I find myself back in the Bare Bones camp again and again.
  4. CyberDuck
    Although I use the in-browser FTP client FireFTP for quick chores, Cyberduck offers a more sophisticated application for file transfer and management. It is a very well maintained open source project and has support for FTP, SFTP, SSH, WebDAV, Google Storage and Amazon S3. It’s easy to use and reliable. There’s not much more to ask from a free FTP client. Cyberduck is now available for both Mac and PC,.
  5. VMware Fusion
    Working on a Mac can give you a false-sense of security when reviewing your website designs. Having access to a Windows OS (or multiple Windows builds) for development and testing is critical for designers and developers. VMware Fusion provides a virtual operating system that is snappy and accurately emulate the user experience on the Windows platform. It’s also very luxurious to be able to have alternate operating systems on one machine that can travel with you for easy testing and access to PC-only software. VMware will also support multiple Linux builds for those of you who need to virtualize hosting environments.

5 Mac Applications that every web designer and developer needs

Many of the software options I use are open source or made available at little or no cost for users. I believe in sharing successes and also compensating people when they do great work. Please make sure that if you use software often and enjoy it, that you donate to the developers and organizations. In many cases, a few dollars can go a long way in recognizing and motivating the generous people who write these fantastic apps and tools.

 

Change Your Direction (On The Cheap)

iTunes University and Continuing EducationI like to learn something everyday. It needn’t be an epiphany or the secret to life, but I really like the idea that every evening comes to an end with some fact or bit of knowledge that I hadn’t had that morning. I have to admit that I get a tremendous amount of these daily facts or learning from the internet. Never has such a wide variety of subjects or shear amount of information been so easily accessible to so many and so easily.

Enter iTunes U

iTunes U is a hosted resource offered by apple through iTunes. It’s a basic and very cool framework for anyone to create a comprehensive course or online learning experience to be distributed via the iTunes network. Although I am leery of closed infrastructures like iTunes, the scale of audience you can reach and the dominance of Apple’s consumer media devices makes this a fantastic new playground for educators and organizations. Content creators can apply to enter the iTunes U store, upload and create a custom page for their institution. The content can be arranged (and once published searched) by subject, topic or institution. There is space for an institution summary, class syllabus and individual class description. Classes can be distributed as audio or video. Content creators can also control the distribution and allow access by parties via controlled or free distribution. The classes can be updated real-time like a regular semester class or cumulatively as a retrospective.

Why Do I Love iTunes U?

There are a lot of educational resources available on the internet. Many universities and colleges, including my own, have offered classes and courses via video or audio files and virtually. What iTunes offers—and Apple excels at—is the ability to market good ideas and make them great. Great, in this case, making them appealing to a mass market. Apple has put a veneer on eLearning and attracted schools of all calibers and with a massive catalogue or cumulative offerings. NYU, Standford, MIT, Harvard-all offering a curriculum for anyone to download—and for FREE.

The available resources range from the typical academic pursuits to the practical. Some are a great place to start if you want to extend your career or even create a new one. My recent syllabus includes learning to develop iPhone applications (courtesy of Standford) and some tips from NYU on psychology. If you’re just getting your start on web design and development, take a look Julia Turner’s Design for the Web or Motion Design using Flash.

LiveView For Mac

If you design or develop for any of the web, iPhone or iPad LiveView is a must-have app. Essentially a screencasting tool, it allows the user to place a “virtual” device on their host mac and share that marque view with an iPad or iPhone via WiFi. Great tool, genius idea. John Hicks has posted a video that does the product justice.

Quick demonstration of how LiveView works from Jon Hicks on Vimeo.

A Case For The iPad (and Closed System Development) Part 2

iPad Development and Application Eco-SystemApple’s announcement of the iPad this week and the incredible growth of Apple’s AppStore, I thought it would be appropriate to share my thoughts on software distribution and marketing in a closed eco-system for software. This post is the first half of a two part series on closed eco-systems, like the Apple AppStore, for application development and distribution and the effect that will have on customer adoption.

Last week, I had written the first in a two part series on software development and distribution on closed application store eco-systems. I had used Apple’s AppStore as an example partially due to the release on Apple’s newest device the iPad and also because the AppStore is by far the most successful example of a single distribution system for software developers. In part 1 I had outlined the benefits to consumers and developers in using a closed system like Apple’s. Part 2 will show some how control can negatively impact those who create content for AppStores and those who want to use software on their devices.

To be clear, Apple represents one of the most aggressively closed systems for both developers and consumers. The platform itself only allows for loading of native applications from the the Apple AppStore. Beyond creating a web-based application that is optimized for the device itself, there is no way to implement a solution that is not specifically endorsed by Apple. Other mobile platforms such as Android, BlackBerry, Symbian and Palm all offer methods for users to install applications directly onto a device without the need to have their wares approved by a governing entity. Being able to distribute a piece for software on your own website, your own terms or with any licence agreement gives developers flexibility and channel that is better suited for innovation and support to the end-user.

The ability to work beyond confining terms and license agreements allow developers to push platforms and solutions that allow the the mobile industry to grow and be challenged. This was true with the explosion of Palm in the late 90′s and continued in a smaller scale with platforms like WindowsMobile, Symbian and recently with the open-source based Android operating system. The adoption of a popular piece of software can challenge manufacturers to change hardware, create a new use-case or even extend the life of a product. Software developers can also support a product far beyond the “end-of-life” that a manufacturers support. Ironically, Apple is a prime example with users of their Newton still supporting and improving the platform. If it were not for devoted developers still writing software and loading it directly onto the devices, many working Newtons would have long-ago become plastic paperweights.

AppStores are positioned as a solution to preserve quality and integrity for the end user. Each application is screened and tested to ensure that it is free from anything that may harm the end user or expose them to an unpleasant experience on a manufactured device. There are too many iFart applications or virtual lighters to allow one to speculate the definition of “quality in taste”, but the model holds true for most in maintaining security and safety for the end-user and their data. It does represent an issue that Apple (nor BlackBerry at the time of publishing) has disclosed the criteria for what parameters are used to judge if an application should be allowed or rejected from their AppStore. This presents several issues for application developers poised to pour many, many hours into an application’s development. The first is “how do I know if my application will be accepted?” the second “what do I do if my application is rejected?”. Neither of these are clear beyond the requirement of developers to adhere to the Software Development Kit (SDK) specifications provided. This is not a consequence of an open system where a developer has several solutions if the hardware manufacturer does not approve or endorse an application. For most devices, there are several methods to install or append software to a device by either I/O access (USB, FireWire, etc.,) or via a networked solution.

Having a focal rally point for comments would seem to be an ideal way to communicate with and distribute user feedback for a developer’s software. In an open system, comments and reviews are distributed all over the internet and users looking for a solution must sift through search-terms and potentially irrelevant material to discover a solution. AppStores put search-term results in logical formats and focus a single point-of-distribution with a link, install option and user reviews in once place. This may not be a good solution if your product is #2, or #3 (or lower) in the search results. Users searching for a solution via Google, Bing or any other search engine may find results different depending on their search history, the terms that are searched or how much they may have invested in their own marketing. An open-system gives a more fractured option list, but a better opportunity for the less popular, and potentially, more appropriate application or content for the searcher. Reviews can also be reached in this same matter rather than shown in aggregate in a single AppStore page.

Apple App StoreAs a follow-through thought on marketing, you have to think about the financial implications of participating in an AppStore. For some, BlackBerry and Android for instance, there is no commission taken for sales within their eco-systems. Both of these examples are not market-leaders and participation by developers are required to help build the brands. The developers are a corner stone in the platform’s infrastructure. Apple has a slightly different model. Developers pay a 30% charge for every sale. Apple, a market leader, presents a different marketing position. The Apple user base has only one choice to find and install applications: The Apple Store. If you are a developer for iPhone, iTouch and now iPad applications, the AppStore 30% is the only game in town. This is one of the more influential criteria driving developers to more open solutions like Android and, one can speculate, creating a market amongst thought-leaders and geeks to purchase more open-platform devices like the Google Nexus One and Motorola Droid. The popularity of the iPhone and it’s AppStore has set a president and a trend for software distribution that I hope will be contained to the mobile platform and not to the computer industry in general.

That same distribution method is also changing the model for how companies are using the web and “Apps” for marketing and customer conversion. Many of the most popular applications in the AppStore (and Android Portal) are no-cost solutions allowing customers to interface with paid-services or free-mium services. Pandora, DropBox, Box.net and Amazon are only a few examples. Many of these services leverage easy access to position advertising or easily provide consumers access to their content from anywhere they may be to monotize interactions. Native apps and even having an application, a brand footprint on an always-connected, intimate device like a mobile phone is ideal for encouraging interaction and brand loyalty. 2010 will show that there will be a saturating of the market with Apps and brand touch-points. Those not already in the market will have to fight against early incumbents for mind-share and a coveted place on the user’s home-screen (the new prize in marketing real-estate).

Dichotomy: As a developer I am frustrated by the confines that the AppStore represents. As a marketer, any AppStore can be a new distribution channel and focal point to drive customers to interact with your brand from anywhere at anytime. The Apple iPhone, a market-leader, and soon the iPad (success is to-be-determined!) will provide ambitious developers willing to work within Apple’s confines an opportunity at wealth. For those who want to think beyond those confines, platforms like Android and BlackBerry are an opportunity to spread their wings and push the devices they develop for to the limit.

About Cullmann

Chris Cullmann is a Creative Director and Online Strategist. He works for Ogilvy CommonHealth Interactive Marketing, a digital agency dedicated to healthcare marketing. His professional and personal portfolio includes interactive websites, viral and social media, and online education applications. His portfolio and observations about the design and marketing industry can be found at www.cullmanndesign.com

The opinions expressed on this site are my own and do not reflect those of my employer or those who I am professionally connected.

LinkedIn Profile

View Chris Cullmann's profile on LinkedIn

Follow Cullmann

Follow Cullmann on Twitter

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera