50k-site build

Tuesday, 3 September 2013

Create a Web Clip Icon for iPhones - For Dummies

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

How to ...

Here’s how you create a Web Clip icon and specify it in the code of your page:

Use a graphics program, such as Photoshop, to create the image you want to serve as your icon.
The image should measure 114-x-114 pixels and be saved in the PNG format.
Note: High-resolution devices display the icon at 114 x 114. Older iPhones display it at 57-x-57 pixels, iPads display 72-x-72 pixels. You can create one of each size, or you can let the device scale down the image automatically. Also note that you can use a JPEG image, but if you want to make sure the icon works on all devices, saving it as a PNG image is the safest option.
Name the image apple-touch-icon.png and upload it to the root directory of your website.
(Optional) If you want to save the image in a subdirectory or you want to use a different Web Clip icon for the home page than you use for internal pages in your site, you can add this code to the <head> section of any web page to specify the name and location of the image.

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

Background

Much like you can bookmark web pages in a desktop browser, you can save a link to any web page on an iPhone or iPad by clicking the Export icon circled in red in the top figure and then choosing Add to Home Screen, as shown in the bottom figure.

A Web Clip icon looks just like the icons that come with native iTunes apps. When a visitor to your website adds a Web Clip icon to her Home screen (the desktop of her device), it creates a link to your website, much like a bookmark in a desktop web browser.

This Web Clip icon gives your visitors a great shortcut back to your web site, and it’s a powerful way to keep them thinking about you. Unfortunately, many users of the iPhone and iPad don’t even realize it’s possible to save a link to a website in this way.

Here’s how it works: When a user taps the middle button in the button bar at the bottom of the iPhone or iPod touch, Safari offers several options.

When you choose Add to Home screen, a small image, called a Web Clip icon, is saved to the Home screen of the iPhone or iPad with a link to the web page. This link makes going to a website by clicking an icon just as easy as launching an app. Click a Web Clip icon, and the iPhone and iPad launch Safari and open the page in a browser in one slick action.

As a web designer, you can create an image to serve as your Web Clip icon. If you don’t, the iPod touch, iPhone, or iPad saves a screenshot of whatever is displayed on the screen and uses that as the icon. It's a good idea to go to just a little extra effort and specify the image that you want to use as the icon on the Home screen.

In this figure, you can see a Web Clip icon created from the main image used in this design. This image is cropped and simplified to serve as a better icon than a screen capture of the entire page, which would include the text and other images at such a small size that they would be impossible to read.

Monday, 2 September 2013

Web And Design Trends 2013 | ByPeopleByPeople

This is why a clean 960px grid still rocks (give a chance to 1200px too)

Studies reveal as a matter of fact, that many users are switching to even wider screens and higher resolutions, so designing in yet old 960px grid is a good choice, but have in mind that 1200px grid layouts can become more popular. 16:9 aspect ratio screens are becoming a trend instead of the 4:3 ones, this will make in the long run absolutely worth to take advantage of that leftover space.

More users prefer widescreen resolutions

Statistics show how 1024×768 resolution (4:3) has been decreasing its popularity, contrasting with the 1366×768 resolution (16:9) that has been more popular.

Of course the idea of the 1200px grid is not new at all, but it’s not widely implemented due to the common belief that 4:3 resolutions are still the main rule referring to big screen devices such as PC’s and their portable variations. There are nice tools like Boilerplate which allows the creation of content from the 1200px grid, but can be customized to start from 960px or any width.

Another one is Percentage based CSS grid system, which dynamically adjusts responsive content starting from a 1200px layout, and it turns out to be a nice approach. Hence, if you’re having huge expectations and want to take advantage of a widescreen resolution, think outside the 4:3 box, and get used to this idea because it will become trendy for sure.

Sunday, 1 September 2013

Feeling blue: why tech designers may want to give the color a rest — Tech News and Analysis

By Rani Molla

Jul. 10, 2013 - 1:24 PM PDT

3 Comments

Summary: The color blue is ubiquitous in tech design — maybe too much so. How we got so hooked on the color may have to do with biological evolution.

In the tech world, it seems like blue is everywhere. Many of the big-name tech companies—Facebook, Twitter, LinkedIn, Tumblr, Skype, Pandora, the list goes on—use blue for their logos, interfaces and design. Of the Apple’s top-25 all-time top free iPhone apps, more than half are blue.

These days, tech companies believe strongly that design is a value-added part of their products. So with all of that attention to design, why are they so blue?

We’re less aware of changes with blue

Sarah Allred, an assistant professor of psychology at Rutgers University and a specialist in color perception, says we notice aberrations less in blue. Blue has the shortest wavelength of any color. At very short (blue) and very long (red) wavelengths, the differences between cone photoreceptor responses are smaller, causing people to be less sensitive to small changes in light. The result of decreased sensitivity is increased stability in perception.

That means that very small differences in execution won’t be as noticeable for blue as with other colors—which could make it a good choice for continuity over multiple platforms and diverse branding.
Also, Allred says that lab findings consistently show that people associate the color blue with feelings of “peace and clarity. ”

As to why blue elicits peace and clarity, Allred said, “there is less agreement.”

And then there’s the theory that our fondness for blue is evolutionary. “The idea would be that over the course of evolutionary history, our mammalian ancestors who sought out blue were better able to survive, since lots of blue (water, open sky to see potential predators, etc.) indicated a good physical environment,” she said.

Those same evolutionary theories of color preference cause people to associate the color red with negative emotions such as rage and danger—not exactly what you want to promote your social media app or tech site.

Blue is safe

Neil Wehrle, VP of user experience at the NYC incubator Betaworks, and his team have created numerous mobile apps for a wide range of tech companies. He says blue is frequently the go-to color.
“In the Western world, blue has a connotation of stability,” Wehrle said, adding that it’s a self-reinforcing trend. “I think there’s sort of a process of familiarity where designers at some point are used to seeing a blue icon and subconsciously incorporate it into their icon and app design as well.” There may also be an element of: Blue worked for all these other popular companies — it will surely work for my business, too.

Wehrle also points out that different hues of blue have different connotations. “Darker blue is a little more conservative; lighter blue is more energetic.” None of the connotations are bad.

blue

Do we want conformity?

For a brand-new app that hasn’t been tested yet, blue can be used to help people feel more comfortable with the product. It makes it seems safe and reliable, like all the time-worn blue icons in your app doc. But conformity has negative sides, too.

Especially in the tech sector, where companies are supposed to be revolutionizing the way we live, the status quo seems lazy, if not cowardly. If companies are afraid to innovate even their design, why should we believe innovations in their actual business are substantive?

Also, using the same color makes it difficult tech companies to stand out from the crowd. Already many apps feel derivative: an Instagram of this, a Pinterest of that. One app or icon appears just like the next.

The hesitance to change, however, is understandable. Complaints shrieked through the Twittersphere when Apple unveiled its new design for iOS 7. But when all the hubub settles, designers will eventually embrace iOS 7, making flat icons and pastel colors the new norm.

Until then, get used to blue.

We’re holding our annual RoadMap conference in November in San Francisco, which will focus on experience design for the tech industry (tickets will go on sale shortly).

How to Use Parallax Stacks in RapidWeaver

Published on 4 Jun 2013

Parallax Stacks is available for Stacks (v 2.0+) at http://onelittledesigner.com

This stack overrides theme styling and creates a beautiful parallax animated and smooth sliding navigation page. Easily add background and foreground images into Parallaxing sections.

Live demo at http://www.onelittledesigner.com/rapi...

Making Animated Webpages with Parallax v2.0 in RapidWeaver

Published on 17 Jul 2012

Parallax greatly simplifies the use of advanced CSS3 animations and transitions - it's drag and drop simple without any coding knowledge required. For the free version of Parallax, visit http://www.nimblehost.com and join our mailing list.

10 Infographic Tools to Drive Traffic » Web Marketing Today

10 Infographic Tools to Drive Traffic » Web Marketing Today
March 22, 2013 • Kevin Webster

High quality infographics can be an excellent source of website traffic. It’s becoming easier for businesses without a design staff to create interesting and attractive representations of data that will be important to their customers and prospects. Here are 10 tools that can help you create traffic-driving infographics.

Visual.ly

Visual.ly allows infographic designers to share their work, and also provides a design platform for people without design skills to create attractive infographics on their own.
—

Many Eyes

Created by IBM, Many Eyes allows you to upload a data set — the information you want to visualize — and then select a style, to present it as a graphic.
—

Gephi

Gephi is a Photoshop-like application that arranges data in visual patterns. While it’s a stretch to say it creates infographics, it can assist you in visualizing and understanding data. Once you understand your data, you can use another, enhanced tool to display that data to your audience.
—

Daytum

Daytum allows you collect and organize data that you can then use for infographics and other forms of data visualizations.
—

Wordle

Wordle creates very simple — yet powerful and attractive — infographics based on word clouds. By weighting the value of words, you can create an image that depicts the importance of one concept over another.
—

TimelineJS

TimelineJS allows you to feed “events” from multiple online sources into an interactive timeline. While not purely an infographic, a timeline about your industry might be an excellent way to draw in web visitors.
—

Gliffy

Gliffy offers a free trial of its online diagram-creation tool, and features a simple-to-use interface to create all sorts of visually appealing graphics.
—

Prezi

Prezi allows users to create presentations with interactive infographics, curated videos, animations, sounds, and text from multiple sources.
—

Vizualize.me

Vizualize.me creates infographics of resumes based on your data on LinkedIn. Consultants or freelancers can use this representation as a sales tool infographic for their businesses.
—

DataMarket

If you need information for creating an infographic, DataMarket offers continually updated data about numerous industries and topics, worldwide.

Sunday, 14 July 2013

RSS vs Atom, you know, “for dummies” | Webreakstuff

By: Fred Oliveira

18-07-2005

Development, RSS, Standards, Web 2.0

RSS seems to be on the tip of every tongue nowadays, and I’ve been realizing not everybody has a clear idea of “what” it is, or how it differs from Atom (that “other feed type”). This post hopefully clears up the mess in everybody’s mind about the differences between RSS and Atom and is loosely based on the comparison chart here and Atom 1.0′s specification, dated July 12.

Okay, so what are these things?

Both RSS and Atom present a webmaster with ways to give users access to his content without making the user load up their webpage. While this is a very loose scope, many other uses arise from this simple activity – examples: it becomes possible to have headlines from other websites in your own, to aggregate news with an application so you can catch up on them later, to follow what a load of websites are talking about with one swoop, etc. Basically, the reason for all the hype is that possibilities are in fact, endless (well, you know. Almost endless).
Anyway, i’ll be bold enough to assume you have a clear idea of what RSS and/or Atom is and the last paragraph was boring enough to skip. Let’s get on to what was promised. A comparison between the two, because that seems to be important:

Comparing RSS and Atom

Put simply, they are similar and accomplish the same things. However, most people seem to forget about Atom and go with RSS all the time, even if the recently proposed Atom 1.0 standard does – from a technical standpoint – seem to be a little more logical than RSS. Here are the main differences:

While RSS has two main publishing protocols, Atom has one standardized approach. This waives off some of the interoperability issues between using both the Blogger protocol and MetaWeblog (the two protocols for RSS publishing). Best approach: Atom
When it comes to required content on a feed, Atom is much more restrictive, needing more data in order to be valid. RSS has a more loose approach. This has generated some discussion: ultimately, I like how Atom requires “last update” timestamps, but I like how RSS isn’t as restrictive to be standard. Best approach: Both have their strong side
RSS requires escaped HTML or plain text, while Atom allows for other forms of data. This increases human-readability of an Atom feed, even though it complicates the publishing process (because you have to specify the kind of data you’re publishing). Best approach: RSS (assuming that a feed is meant for automated consumption – human readability is a task for the reader or aggregator)
Atom clearly distincts partial content from excerpts, while RSS doesn’t. This clearly makes a difference, because there’s no way to know when an item on an RSS feed is a full story or an excerpt (that requires loading the original page in order to continue reading). Best approach: Atom, clearly.
Autodiscovery is standardized in the Atom specification, whereas in RSS there have been several ways to discover feeds, to this date. Best approach: Atom even though it is not a grave situation for RSS.
Aggregating and extracting content is one of the most important issues, and the one that clearly gives Atom an advantage. RSS allows content only inside a single monolithic rss document including several entries. Atom on the other hand allows for single Atom Entry documents, that make syndicating, aggregating or reusing single entries of a feed a much easier process. Best approach: Atom

Wrapping up

Reading about these differences (many, a little more technical, are not covered in this article) made me realize Atom 1.0, drafted 12th July, may in fact be a better mechanism to allow for content syndication, even though the business and software machine is oiled on the RSS concept. This doesn’t mean we’re all going for a sub-par technology because other (improved) versions of RSS are bound to emerge in due time, but for now, Atom does seem like the best-fit choice.
Technical users may want to follow the following two links for more relevant information about both Atom and the differences between it and RSS 2.0:

I hope this post clears up some of the confusion between the two formats. Feel free to drop me an email (or leave comments) if you have any comments, suggestions, or questions.
Update: Scott mentions in the comments something in forgot in my wrap-up paragraph. According to the RSS roadmap, RSS 2.0 is the “final” version of RSS, meaning future revisions of the standard will emerge under a different name.