Archive for August, 2011
Web Governance: Becoming an Agent of Change
Designing Fun
Showcase of Web Design In Argentina Pt.2
 |
Last week we brought you the first installment of an inspiring look at the state of the web design industry in the country of Argentina. This week we cap off the look with more insightful interviews, site showcases, recommendations and more. Let’s dive right in.
Excerpt from Part One
The design industry in Argentina consists of thousands of freelancers and agencies. Through commentary, interviews, links and a big showcase of websites, we’ll introduce you to some of the most talented designers and studios in the country. Your opinions and suggestions are welcome. Please share your thoughts in the comments section at the bottom.
Web Design and Creative Agencies
Argentina has a number of highly professional Web and creative studios. These studios have impressive portfolios, and clientele that includes prestigious brands such as Coca Cola, Western Union, Disney Corporation, Intel, Philips, PepsiCo, Chevrolet, Samsung, Nike, HSBC and Hewlett Packard.
Claudio Lucero of Naked, and Matias Dutto and Juan Pablo Sueiro of Social Snack, have kindly taken the time to answer my questions. Let’s meet them in the interview below.
Q: How did you get into the Web design world? Was it hard for you in the beginning?
Social Snack: Our team entered the Web world in two general roles: creative direction and executive production. Social Snack executes media and entertainment jobs using new social technologies. We use design throughout the whole process.
Each project involves different design disciplines, including interaction, aesthetics, art, photography, information architecture and content. Our methodology involves three design dynamics, called the 3i: interface, interaction and image. The last one integrates art direction.
Executive production is designed to synchronize all streams of work to make a project come to life. The creative direction creates a basis on which projects can become unique and memorable.
The digital world requires a lot of energy, curiosity and self-learning, both from the beginning and day by day. Understanding the industry helps, in order to better interpret customer needs and chart a vision of the future. We believe the key lies in energy and timing.
Naked: I come from the music world. I’ve been a musician for a big part of my life until a friend and I started a tiny software company, developing apps for small businesses in the old Visual Basic software. At that time, my knowledge of coding was pretty non-existent, but this friend taught me everything I needed to know to start programming. I soon grew bored with desktop apps and started to pay attention to HTML. It was 1995, and the Internet was nothing like what it is today. I used to spend whole nights learning HTML and Photoshop, designing little ugly experiments that I called websites.
Long story short, I became a bit better at that and was hired by a dot-com company in the late ’90s, spent a couple of years there until it went bankrupt (it wasn’t my fault, I swear), and then I decided to start a career as a freelancer. From then on, Web design has been all I’ve done for small, medium and big clients until we founded Naked with Andrea, my main partner.
Yes, it was hard at the beginning. I didn’t know anything about how to get clients, and marketing wasn’t as easy as it is today. There was no social media, no Google AdWords, and I didn’t have any money to invest in promoting my little business, so I used the Yellow Pages and started emailing a lot of shops trying to convince them to do a website with me. That didn’t work out very well, but in the end the people who I worked with in my prior job started sending me some contact info from their clients, and it all took off from there.
“Our company, Naked, is constantly investing time and other resources into finding the most talented creatives in our country. And because 100% of our clients are from the US and Europe, having a team with a lot of experience and that is willing and able to explore new ideas as they relate to interactive solutions is very important to us. We think this is what helps to align our brand with our mission: to help international studios succeed in their outsourcing needs through top-quality service and competitive prices.�
– Andrea Chiste, Project Manager
Q: How have you evolved professionally? Has Argentina’s environment influenced your work?
Social Snack: I would define it with two key words. One of them is “dynamic”: the practices in Web production change precipitously. Rules and trends change all the time. The other is “evolution”: for us, it’s all about being alert. That’s the game.
People spend a lot of time online, and this increases exigences and controls of the final product. Users recognize interfaces designed with intelligence, and enjoy the art of each website.
The final aspect of our job relates to the number of hours we dedicate to observing the trends and changes that new technologies bring. We evolve professionally as pilots do: flight hours determine our handicap. In this profession specifically, the key is to be self-taught. Results and learning depend on us.
Working in Buenos Aires is an enriching and positive experience. Our headquarters is in Palermo, the most international and cosmopolitan area of the country. Diverse people cross and converge each other, mostly Latinos and Europeans.
Instead of minimalism, we look for simplicity. We focus on seeking an identity that has its own features and that reflects all of these influences. The identity emerges from this mix of influences from all over the world, and from this neighborhood.
Naked: Not really. When I started out, I was crazy about all those big names in Web design, such as David Hillman Curtis, the guys from WDDG, one9ine and Enginethree. I loved their work and how strong their style was. But frankly, I couldn’t find anything like that here in Argentina and still can’t find it today. So no, I don’t think I was very inspired by the new media design community here.
My professional evolution had more to do with art direction, concept creation and content strategy than with graphic design. I’ve always focused on business goals in my designs, instead of trying to make the cutest thing ever. I like to keep the design as simple as possible. This is something our clients are happy with. They’re always telling us that it’s very hard to find designers who think this way, who think about business objectives first and then about the design.
Q: Can you tell us something you have learned that has helped you in running your business? Is Argentina an “easy� place to get established or to expand? Is your business focused on an South American audience, or are you open to a worldwide market?
Social Snack: We recognize that this job is always in “in progress” mode. At the same time, there is a deadline and a budget.
It’s important to understand that, unlike a magazine cover, online products never end and you can always improve them. They have to always be tested, corrected and analyzed.
But every deadline has a budget and limited timeframe. A motto that we have is, “The pizza has to arrive, but it has to be hot.” Being on time is really important. We take it seriously. What we’ve learned from all this is that you have to negotiate expectations with yourself and with the Social Snack team.
On the other hand, Argentina is not easy. It’s a country with many economic hardships and with a basic technological infrastructure. That is a positive, too: people here are very flexible. They can adapt to conditions and are very dynamic. Schedules are another advantage: we are aligned with other major capitals of the world.
In its beginning, Social Snack focused on Latin America, because naturally our relations and contacts were stronger in this region. But this year, we’ll start the process of expansion.
Naked: Here’s what we’ve learned, short and to the point:
1. Always write a proposal detailing how you plan to meet the client’s business goals (this is very important to the client), what you will do, how long it will take, how much it will cost. And if they approve it, make them sign it so that everything is well documented.
2. Always have a contract detailing everything about your working policies, from overtime rates to your intention to use this project as marketing material in your portfolio. If you haven’t defined these policies yet, do it now—believe me, you will need them later.
3. When hiring creative or technical people, try to work with them as freelancers first whenever possible. This will lower the risk in getting to know each other. And in spite of their impressive portfolio or coding skills, go with your gut when it comes to saying, “You’re hired.”
4. Relationships are good. Encourage social behavior. Engage in conversations with other agencies, designers, developers. You never know when you might need a partner or strategic partnership. When done right, it can greatly improve your small business. Argentina is definitely cheaper than other cities, way cheaper than New York or London. So getting established here is probably easier, although sometimes the government tries to make everything difficult for us.
Regarding our market, we just work with international clients, mainly from the US and Europe.
Q: What’s the scene in Argentina like? Are Web designers and developers well paid, in your opinion?
Social Snack: We think that the best designers and developers get very good pay wherever they are. In the online production industry, locality is irrelevant to income. On the global scene, talent rules.
Argentina has incredible design studios that work for the whole world. The characteristics of Argentina’s design are appreciated worldwide, and that is reflected in the income of professionals here.
In Argentina we have very high costs, but that’s only one among many competitive variables, and not the most important one.
Naked: I think if we take into account the international rates for these kinds of jobs, then no, we’re not very well paid here in Argentina. The most convenient thing to do is to work for other international agencies or end clients. Though that can be a problem sometimes, especially if you’re not used to that level of responsibility or your English is not fluent enough.
Q: Is being a Web creative considered respectable work in Argentina?
Social Snack: Yes, of course. Although it’s necessary to educate people about the whole professional dimension of creative Web direction. Online production requires a lot of practices and new disciplines that do not rely on the work of one person only. Each website requires a team of specialists and coordination among them. Not every client gets that yet.
Naked: It is respected when people understand the level of Web business you are running. Loads of freelancers are charging less than $10 per hour, and I don’t think that’s very respectable. And don’t get me started on their work quality. This can only ruin our industry and the general opinion of the Argentinian Web scene.
Q: How would you describe the current situation for those who want to start a career in this field? Is job demand high?
Social Snack: As we mentioned before, job demand is very high. Argentina is very attractive because it has very competitive costs. Whoever chooses to work with professionals in our country discovers that we possess a great creativity and flexibility and that we are very friendly people.
It’s a very good field, with huge demand both internally and externally. Any designer who sets out to realize quality projects and takes care of every detail will surely have good income.
Naked: This is probably the best time ever for someone who is starting his or her interactive career here in Argentina. More and more international agencies out there are ready to outsource projects to us, and this is due to the high proficiency in development that they can find here. Also, the currency exchange rate is very convenient for clients who are paying in (US) Dollars and Euros, which makes it even better as a commercial opportunity.
Q: Do you see any remarkable differences between Argentina’s designs, and the ones in the US and Europe?
Social Snack: We hope to find them all the time! Anytime we collaborate on a project, we try to make these differences visible.
Argentina is a land of emerging trends. We consider two lines that exist in every design: one that standardizes certain practices and another that is more creative. Argentina has both, and it’s a very good place to discover creative work.
There’s an online production stream that creates trends during the year and they become standard. Buenos Aires is one of those places where trends grow all the time. You need to pay attention to those Argentinean designers.
Naked: Clearly, yes. As I mentioned before, it’s not easy to find the kind of top designers who you can see at, let’s say, Firstborn or Rokkan. The big stars are hard to find. Sometimes an unknown freelancer trying to make a living in some province far away from Buenos Aires, our capital, turns out to be a very talented designer or developer. That’s why we’re always striving to find these talents wherever they are.
Q: Where do you get inspiration from? Name a few of your favorite sources of inspiration.
Social Snack: We find inspiration everywhere. It’s true that we look at galleries and projects of studios that we like, but we also go further than the digital world. We seek metaphors for interfaces in disc covers, art galleries, modern architecture, everywhere! Our website Cultura Positiva has been mentioned in many showcases this year, and it was inspired by a photograph!
Naked: FWA, Communication Arts, a lot of blogs, portfolios of other agencies that we love and respect and, naturally, Smashing Magazine, including the Smashing Book. Actually, I find inspiration everywhere: movies, concepts I see in TV ads, music to define moods and styles. Typography alone is a huge source of inspiration, too: beautiful type releases all kinds of visual ideas.
Q: Are you following the work of any particular designer or developer in Argentina?
Social Snack: We love BBDO Argentina’s work, especially that of Fernando Barbella, who is creative director of the agency. We saw some memorable campaigns, such as Pecsipedia, among them.
Naked: I like the work of the guys from POGO; although they don’t do much interactive work, their offline portfolio is nice. Also, there’s a fantastic industrial designer, Fernán Etcheverry, whose work inspires me.
Q: Do you have any thoughts about design trends in Argentina? What has been your favorite design trend or style?
Social Snack: For 2010, a trend we are seeing is layouts as posters.
Naked: I love typography and writing strong messages using beautiful typography in Web design. And the use of big—and I mean huge—type, has been a trend for a while that I always find lovely. Academy is a great example of this, even though it’s not from Argentina particularly.
Also, I don’t know if it’s a trend, but the use of WordPress to build and maintain certain kinds of websites that are not blogs, such as one-page portfolios, is a great idea. Now designers can put their portfolio online in record time and keep it updated without much hassle.
Q: Are any techniques widely used by Argentinian Web designers?
Naked: I can’t identify one in particular, to be honest. You can find very different styles among Argentinean designers, as many as you would find anywhere else.
Q: Do most customers want English-language or Spanish-language websites?
Social Snack: They prefer to have both.
Naked: Because our clients are mainly from English-speaking countries, they choose English for practically all of their projects.
Q: Are there any issues unique to Argentinian website design?
Naked: I think we Argentinians are very creative people. I don’t know if it is because we have had so many crises throughout our history that we struggle to learn new ways to succeed or what, but clients everywhere are very impressed by our level of creativity. In Spain for instance, our clients keep telling us that we come up with interesting and inexpensive ideas for art direction. Being creative is easier if you have a huge budget to spend, but it’s not that easy when not so much money is on the table. I think we are good at that.
Q: Can you tell us something that you think Argentinian designers should improve on?
Social Snack: In our experience, one thing that needs to be improved is our use of methodologies. There are many great project directors, but it’s important that all of the disciplines come together in one methodology.
Naked: There is always room for professional improvement. Perhaps this country doesn’t have as many Web design celebrities as other countries (Joshua Davis, Zeh Fernando), and so I think the overall quality of Web design could be improved. We’re talking about trying to be among the best in the world, so that we can be in a better position to compete in the international market. But I’m sure we are on the right path.
Q: 2009 was an exciting year for Web 2.0. What’s your relationship to social networks?
Social Snack: Our slogan for the company is “All media is becoming Social & Snack.” Our job is entirely focused on the social contexts of branding.
Naked: We definitely think it’s a powerful tool. We try to keep learning about it everyday, and it has been great for our relationship with other professionals in our community. For instance, a dear friend and partner of ours, Gabriel Peart of Brazil, who is a very talented Flash developer, contacted us through Facebook, and this led to a wonderful working experience through project collaborations. And this happened when we were in need of such a Flash guru. Now he’s hosting the FDT workshop at Flash Camp Brazil. Amazing guy.
We are starting to use Twitter a lot, and we have found some skilled people through LinkedIn whom we ended up involving in our projects, in one way or another.
Q: Do you enjoy the work of any designers in particular? Name some of your favorite creatives in Argentina.
Naked: Actually, the designers who inspire me the most in Argentina don’t come from the Web design arena but from different disciplines such as illustration and photography. Here are some of them: Lisandro Schurjin, Santiago Guerrero, POGO, Florencia Mazza.
Q: Are any regular meetings or design-related events held in Argentina?
Social Snack: Buenos Aires is unique for having bars and cafes on every corner, with chairs and tables in the street. It’s a very chaotic city. Thankfully, in recent years, there have been a lot of activities. Just to name a few: Trimarchi, Design Meeting of Palermo’s University, Pechakucha, Barcamps, Sustainable Design Festival, TEDx Buenos Aires, Barcamp, Wordcamp.
Naked: Yes, plenty. Actually, in July 2010 there will be a big event here in Buenos Aires that includes 350+ workshops, conferences and courses hosted by highly experienced professionals, and people from all over Latin America are coming. Signing up is completely free for everybody. The even will consider all aspects of design, including the Web, industry, photography, movies and advertising.
Q: Can you share a few of your favorite website designs?
Naked: Sure. I’m a Flash guy, though, so some of my favorites pieces include (in no particular order): PUMA, Hello Monday, GE Smart Grid, Resn, Hiroshi Seo. I could go on and on.
Q: Would you like to share any upcoming projects that you have planned?
Social Snack: We are writing in a blog part of our methodology for the production of creative projects. Taking out time to share our vision is a big challenge, but doing it is very important.
Naked: At the moment, we are working on our own new website, but it’s too soon to share the comps. We are defining the main concept, trying to visualize what it’s like to be truly “Naked” with design; to be totally nude, innocent, without any disguise and thus completely honest and transparent. We are just beginning to explore these ideas. Next, we will shoot some photos with this in mind.
We’re definitely in love with our jobs.
Showcase of Web Design and Creative Agencies in Argentina
The designer and director of Camboya, a design and interactive publicity agency, gave me his opinion of the Web design scene in Argentina: “From my point of view I see a dichotomy. On one side is incredible, invaluable talent in developing technical and conceptual work. But on the other, slow economic growth in the country is seriously compromising this. Infinite fights for lower budgets, little willingness from the clients to develop ideas from the conceptual and technical stage make it hard for designers to deliver their talents, being constantly mired in the bureaucracy of budgets and daily briefings. So, I think we’re at the stage of constantly evangelizing new media, and those innovations, values and potential are leading us in a new direction, as is happening in other European countries and even Brazil, which has a high level of design and interactive experience.�
“Design must go beyond mere aesthetic factors and solve specific problems. It must be a tool that changes and improves everyday life. The success of our work is based on a rational and precise methodology that allows us to identify problems in the studio with our clients. By analyzing their needs and acutely observing the reality that surrounds them, we generate creative and practical solutions designed to suit them.�
– Hoffmann Estudio
I recommend you also visit the following:
- Cayetano DG
- WeikUp!“At WeikUp! we believe that a solid graphical approach is built from an optimal methodology that is capable of revealing the specific problems of the brand and project itself. Understanding and interpreting the client’s own ideas is key to developing fully original and functional results. Teamwork, interaction between different perspectives and a constant exchange with the client are key factors in a successful project.�
- pyxis dzine
- Micromundo“We believe that design in Argentina arises from multiple perspectives. We get our vision of trends from leading countries, and we get our perception of social and cultural reality from here. This condition gives our designs peculiar characteristics. We believe in honest work and in the responsibility of both accepting a project and performing it with professionalism.�
- Blag Studio
Related Resources
Here are a handful of other websites that you should check into for a glimpse of the Argentinian web design scene. This section is the yang to the Blogs featured in part one.
A useful resource:
Design galleries:
Design portals and publications:
Typography resources:
Further Showcase Of Websites in Argentina
Here is the remaining selection of websites made by Argentinean designers or for an Argentinean audience that we will feature in this showcase. We have featured throughout the posts a range of personal websites, corporate websites, portfolios, blogs and various styles and platforms.
More Places to Study Web Design in Argentina
Again, there is still no complete and well-conceived career path for aspiring Web designers, but Argentinians who want a career in design, animation or the arts still have some valid options. Here are a few more of them:
More Universities
- Universidad John F. Kennedy
- Universidad de Morón
- Universidad de Palermo
- Universidad Nacional de Còrdoba
Other institutions:
Argentinian Web Designers And Developers To Follow On Twitter
There’s no better way to follow the design scene in Argentina than by contacting designers easily and directly. Twitter is the most popular instant messaging tool, and some of Argentina’s talented designers can be found on it.
- @mbavioWeb designer.
- @horaciobellaThis Web designer specializes in usability, accessibility and information architecture. Visit his website.
- @germanferrariA CSS, XHTML, PHP, jQuery and WordPress enthusiast. He also blogs.
- @ignacioricciA lover of graphic design, XHTML and CSS design, and WordPress. Visit his portfolio.
- @vanegazzeA graphic and Web designer.
- @jorgemudryA PHP, MySQL, (X)HTML, CSS and AJAX programmer.
- @rickteruelA Web designer and developer.
Another instant messaging project worthy of highlighting is Tablosign. Tablosign is a microblog that involves several designers and that publishes links, tools and useful tips. In essence, it combines several of the ways that people generate and deliver content on the Internet today: microblogs, Twitter, Delicious, blogs, thumblelogs. Accordingly, small entries are made that summarize an idea, piece of advice, opinion, or link; all design-related, of course. Among the Argentinian designers who participate in this project are Germà n Ferrari, Diego Mattei, Alejandro Cano and Horacio Bella.
(al)(rs)(rb)
Review Of Cross-Browser Testing Tools
|
|
At some point in the future, the way that all major browsers render Web code will likely be standardized, which will make testing across multiple browsers no longer necessary as long as the website is coded according to Web standards. But because that day is still a way off (if it will really come at all), testing your design the advanced browsers as well as legacy browsers is a necessary part of any project.
The old-school way to test code was to load your website on as many computers as you could find, using as many different combinations of browsers and operating systems as possible. That was fine if you had access to a bunch of different computers (and had some time to kill). But there are much more efficient ways to test across browsers, using either free or commercial Web services and software. In this article we review some of the most useful ones.
Free Cross-Browser Testing
Good news: very powerful free testing tools are available for Web designers today. Some are more user-friendly than others, and some have significantly better user interfaces. Don’t expect much (if any) support with these tools. But if you’d rather not spend extra money on testing, some great options are here as well.
Adobe BrowserLab
Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers, including various versions of Chrome, Safari, IE and Firefox. It gives you a number of ways to view pages, including a full-page view in a single browser, as well as side-by-side comparisons of browsers and an onion skin view. The service can access dynamic pages across the web, or viewed locally via Firebug or Adobe Dreamweaver CS5. The ability to create pre-defined browser sets is also useful, in case you don’t need to test on older browsers.
Browsershots
Browsershots is probably the most comprehensive free testing tool available. It includes Linux, Windows and BSD browsers. It also includes a number of browsers you’ve probably never heard of (like Galeon, Iceape, Kazehakase and Epiphany). For the most part, Browsershots tests on the most recent version of each browser, as well as on legacy versions.
While Browsershots does support a huge variety of browsers, the more you test, the more slowly it prepares the results. So, you may want to stick to the major browsers.
SuperPreview (Free and Commercial)
SuperPreview is Microsoft’s offering in this space (and it’s compatible only with Windows). It lets you define your own “baselineâ€� (or default) browser, and it works with any browser installed on your system (and comes with the IE6 rendering engine built in). The fact that it only works with your built-in browsers does make it faster (because you’re not uploading anything or waiting for a remote server), but it also limits the number of browsers you can compare.
SuperPreview trial comes with 60 days of cloud services before you have to either buy it or go into reduced, (local browsers and IE 6-9 mode). In an online version, you have support for Chrome, Safari (Mac) 4+5, Firefox 3+4. You can also use an interactive mode to log into sites that require a login before displaying the page you want to test. There are also debugging tools for the DOM and onion skinning available in Adobe Browserlabs. Unfortunately, there is no support for Opera whether installed locally or in the cloud and you do have to have the version included with Expression Web to get the cloud services option but the base version with support for IE 6, IE 7, IE 8 (and IE 8 rendering as IE 7) are included with the free version as well as IE 9 if it is installed locally. (Thanks, Cheryl D Wise)
Lunascape 6
Lunascape is a triple-engine browser for Windows. It runs Trident (IE), Gecko (Firefox) and Webkit (Chrome and Safari), so that you can see how your website looks in all three, side by side. While it’s not a traditional browser compatibility tester, it is nonetheless a useful tool for designers and developers. One major benefit is that you get to view your website instantly in all three major rendering engines. There’s also support for Firefox extensions and plug-ins, so you can use developer tools like Firebug to diagnose compatibility problems.
IETester
IETester is a free (both for personal and professional usage) browser for Windows that allows you to have the rendering and JavaScript engines of IE10 preview, IE9, IE8, IE7, IE6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE. Only an alpha version of the tool is available. Windows 7, Windows Vista or Windows XP with IE7 minimum are required for the tool to run.
IE NetRenderer
IE NetRenderer lets you check compatibility in Internet Explorer versions 5.5 through 9. You’ll have to check each version individually, but the service is free.
Spoon
Spoon is an application emulation service. It provides free versions of Firefox, Chrome, Opera and Safari for Windows users. A number of versions of each browser are included: Firefox 2–5, Chrome 4–8, Safari 3–5 and Opera 9–10. Bad news: Internet Explorer is supported by Spoon virtualization but is not available by request of Microsoft.
Sauce Labs (free and commercial)
Sauce Labs provides a lot of browser and OS options and sets you up with a browser dedicated VM instance that you operate inside the browser of your choice. It also records a video of your entire testing session. The service offers 200 free minutes of testing per month and allows you to quickly build automated tests from your browser with Selenium.
Browsera (free and commercial)
Browsera provides automated compatibility testing. It automatically highlights differences in the way browsers render your design, thus simplifying the testing process. It also detects JavaScript errors, and the commercial version can test pages behind subscription or log-in walls. It can also test dynamic pages.
The free plan includes a limited number of browsers and low-resolution screenshots. Premium plans start at $39 for a single project and $49 to $99 for monthly subscriptions, and they support more browsers, provide high-resolution screenshots and let you test private pages.
Browserling (free and commercial)
Browserling is a relatively new cross-browser testing app. It supports a limited number of browsers (and not necessarily the newest versions), which makes it of limited use to some developers. It’s still in beta, though, so hopefully more browsers will be supported in the near future.
The free version comes with a five-minute session limit, and the developer version is $20 per month with no time limit.
Commercial Cross-Browser Testing
Commercial tools often have features not found in the free ones, including live interactive browser virtualization and mobile device testing.
Mogotest
Mogotest does complete browser-compatibility testing, including for private pages. There’s an API, so it can be integrated in your current tools and workflow. Mogotest also offers a website health report that tells you about broken links and pages, redirect loops and other issues common to new websites. The service also offer screenshot comparison tools for testing screenshots against each other as well as site-level testing including page consistency testing and individual page tests. HTTP basic and cookie-based login systems are supported as well.
There are two plans for individuals: a personal plan starting at $15 per month that lets you test up to 50 pages on three websites, and a freelancer plan for $45 per month that includes up to 10 websites and 350 pages. The team plans start at $125 per month and go up to $4499+ for unlimited access. The two highest-cost plans include custom reports.
Cloud Testing
Cloud Testing offers functional cross-browser testing. You record the user journey with your browser and Selenium IDE, upload it, and then Cloud Testing will run that script in multiple operating systems and browsers. It then provides screenshots and HTML and component diagnostics. No prices are listed on its website.
BrowserCam
BrowserCam includes testing tools for both desktop and mobile browser compatibility (the latter is still absent in many other tools). It also offers remote access for live testing on Windows, Linux and OS X configurations, and email capture for checking your HTML, RTF and TXT emails.
Pricing for BrowserCam starts at only $19.95 per day for a single service (and $24.95 for the browser, remote access and email capture package), up to an annual subscription price of $399.95 for a single service (and $499.95 for browser capture, remote access, email capture and multi-user access, or $999.95 for all of those features plus device capture).
Multi-Browser Viewer
Multi-Browser Viewer covers both desktop and mobile browsers. It includes 26 virtualized Web browsers, 5 mobile browsers (including the iPhone and iPad) and 61 screenshot browsers (meaning you can see how the website renders but not interact with it). It’s also available in five languages: English, Spanish, German, Russian and French.
Multi-Browser Viewer is $139.95 for a single-user license and includes a year of product usage and updates. Updates after the first year are currently $99.95. A free trial is available through the website.
CrossBrowserTesting
CrossBrowserTesting provides live interactive browser testing with remote VNC sessions. It also generates automated screenshots across multiple browsers for more basic testing. There are more than 100 browser and operating system combinations, including many mobile platforms.
Monthly subscriptions range from $29.95 to $199.95, depending on the number of users and the minutes of testing (minutes can roll over to the next month, but they’re not unlimited). A one-week free trial is available for all plans.
Testing Services Compared
The chart below shows the basic features offered by these cross-browser testing services and applications, making it quick and easy to compare.
| Tool | Number of browser versions supported | IE? | Interactive testing? | Side-by-side testing? | Pricing |
|---|---|---|---|---|---|
| Adobe BrowserLab | 13 | IE6+ | No | Yes | Free |
| Browsershots | 60+ | IE6+ | No | No | Free |
| SuperPreview | Varies | IE6+ | Yes | Yes | Free |
| Lunascape | 3 | IE6+ | Yes | Yes | Free |
| IETester | 6 versions of IE | IE5.5+ | Yes | Yes | Free |
| IE NetRenderer | 5 versions of IE | IE5.5+ | No | No | Free |
| Spoon | 16+ | no IE | Yes | No | Free |
| Sauce Labs | 40+ | IE6+ | Yes | No | Free — $499 per month |
| Browsera | 9 | IE6+ | No | Yes | Free – $99/month |
| Browserling | 9 | IE5.5+ | No | No | Free – $20/month |
| Mogotest | 7+ | IE6+ | No | Yes | $15 – $4,499/month |
| Cloud Testing | 4+ | IE6+ | Yes | Yes | Not specified |
| BrowserCam | 90+ | IE5.2+ | Yes | Yes | $19.95 – $89.95/month |
| Multi-Browser Viewer | 80+ | IE6+ | For some browsers | Yes | $139.95 |
| CrossBrowserTesting | 100+ | IE6+ | Yes | Yes | $29.95 – $199.95/month |
Conclusion
Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow (so that you’ll actually want to use it and it won’t be a hassle), and test whenever you make major changes to a design.
What tools do you use for cross-browser testing?
How has your experience been with cross-browser testing tools and services? Which ones do you use? How do you integrate cross-browser testing in your professional workflow? Let us know in the comments!
Related Posts
You might be interested in the following related articles:
- Review of Popular Web Font Embedding Services
- Review of Text Batch Processing Tools
- Useful Resources, Tools and Services for Web Designers
- Time-Saving and Educational Resources for Web Designers
(al)
© Cameron Chapman for Smashing Magazine, 2011.
The Neglected Necessities Of Design
|
|
Right now is an exciting time to be in the Web design community. Every month we seem to stumble on a new thought-provoking way to put our expanding tool set to use for our clients and the patrons of the Web. Many designers are chomping at the bit to litter their websites with new CSS, advanced HTML and ultra-engaging JavaScript. By all means, go out and use every last declaration and element you can get your hands on. Abusing, misusing and taking advantage of everything the Web could possibly offer is the best way to learn about what we can and can’t and should and shouldn’t do in future.
Whether you are excitedly exploring responsive design, diving headlong into accessibility, building a typographic masterpiece or seeing what level of interactivity you can achieve, all of your Web-based projects should have a common core. All of the new methods being discussed in the design community daily might be overwhelming, but no matter what route you ultimately take, almost any Web project you embark on today should start with solid HTML and logical CSS. This may seem like common sense, but the fact is that very, very few websites today benefit from sensationally optimized HTML and CSS and appropriately applied JavaScript.
When I say solid HTML, I don’t just mean that it validates as XHTML 1.0 Transitional. I don’t even mean that it should validate as Strict. What I mean is that your website should be void of superfluous containers, rogue classes and misused elements (both new and old). The process of building out the core components of a website may not be exciting, but this foundation is critical. These days, we have better options. HTML5 has opened the door to a new way to structure websites, and CSS3 is revealing new methods for not only achieving advanced visuals but doing so more effectively. As designers and developers, we have failed to hold ourselves to high enough standards for too long. Websites built on an exceptional framework have simply become optional.
More Than Just HTML, CSS And JavaScript
Of course, doing things the right way is more than about understanding when to use <span> and when to use <div> or knowing what every new CSS property does and what browser it works in. Before we implement any new HTML or CSS method, we need to see how it will change the planning of our project. Building a website with the ideal structure is a process that begins at the idea stage. When the client and designer are hashing out ideas for the new project, a seasoned designer will think of these ideas in terms of the code required to make it happen. Starting a project with this mindset will help you bring up questions that lead to cleaner code. Of course, before we write any code, we have to do some research!
Know Your Audience
Information is the secret ingredient to executing a project smoothly. Any data you can gather about the perceived or target audience of a website will be crucial to the development process. Having an early grasp of browser and device usage will help you zero in on the elements and properties that you can use in your design and help you hatch a plan for how your website will progress along with its users.
Plenty of markets out there still deal with high volumes of IE7 users, which is totally fine because carefully crafted code looks beautiful in any browser. Don’t let a scarily high number of IE users distract you from using all that CSS3 and HTML5 have to offer. Unless you employ Modernizr or another polyfill (please use sparingly!), a portion of your audience may lose out on a whack of gizmos and doo-dads. But the same wonderful experience can still be crafted for every browser if you have — you guessed it! — an exquisite code base.
Plan Ahead
Image credit: baldri.
Every developer knows that a good website is subject to change after launch. But what makes a difference in the code is whether these changes will consist of simple content revisions, new sections of content or the addition of multimedia. One of the most common causes of bloated or invalid code is the manipulation of a website’s content after launch. Ensure that growth and expansion are a part of your wireframes and concepts where needed.
If you predict that your website will grow in future (which it should), your best bet is to make its components modular. What do I mean by modular? Well, while the form and aesthetics of the content play a vital role in setting the tone and in building a communication style, the content should still be accessible independent of the design. The first step in doing this is to relegate the style to the CSS. Now, with the advent of HTML5, we can take this to a much higher level with the new HTML elements. We can use <section> to define areas of our website that have related sets of HTML. The new <article> tag allows us to define portions of the website that should be syndicated or that can be lifted from the design. With <aside> elements, we can include information that is related to <article> or <section> but on which the content does not closely rely; if taking out an <aside> element would damage the continuity of a given section, then a <blockquote> or similar element would be better suited to the job.
Properly using these modular elements will prepare your content for its future on the Web. Applications such as Readability and Instapaper are leading the way in the trend of separating content from design by providing users with a more controllable reading experience. As we write HTML, we will see all of these elements and ideas form a foundation that is friendly to designers, users, search engines and bookmarklet apps!
Approaching Mock-Ups And Wireframes
(Image: Samo Drole Design)
I’ve already said that we should consider the HTML when tossing around project ideas, so it should come as no surprise that this practice only gets ramped up when the pixels hit the page. Of course, some designers belong to the school of thought that these days we should create our mock-ups in HTML and CSS. For others, software is the weapon of choice.
No matter which path you choose, the mentality should always be the same. Design your projects with the same mindset of modularity mentioned earlier. This could mean wireframing different components with the intention of applying the same CSS class to multiple HTML elements. Or it could mean designing an <aside> for a product or service the way you would expect to see an <aside> in a blog post on the same website.
The more creative or artistic among us might dismiss this approach because it wraps a tourniquet around the veins that feed individuality. But those people, the ones who are carefully crafting their rebuttal to this argument, are the ones who will thrive under these circumstances. You see, the thing about truly creative people is that they thrive under restrictions. So, challenge yourself to build a clever and beautiful design, while maintaining this aspect of modularity and pattern-based craftsmanship. I doubt you’ll be disappointed.
Laying Down The HTML
After all of the careful planning of how your design will translate into code, it’s time to get down to the nitty gritty. Finally, we get to put our money where our keyboard is and execute some of this sleek and modular HTML that we have been bragging about and planning for.
The Basics
For some projects, our foundation will be set from the start, thanks to grid systems and boilerplates such as the highly regarded HTML5 Boilerplate. But don’t take these pre-made solutions for granted; many of them will contain more structure than you need, and none of them are a substitute for your genuine understanding of the project. Starting with a default structure saves a lot of time, but please take the time to make sure that 100% of what you start with is necessary to the project. After all, we don’t want to get off to a sloppy start, do we? The simple way to look at this is that you should know what you are putting on your website. Don’t just copy and paste someone else’s solution without knowing what it does. A common example of this is IE declarations:
<!--[if lt IE 7]> <link rel="stylesheet" href="ie6.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="ie7.css"> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" href="ie8.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="normal.css"> <!--<![endif]--> <!--[if !IE]> <link rel="stylesheet" href="normal.css"> <![endif]-->
Do we really need to load different style sheets for IE7 and 8? Some projects would benefit from having only ie6.css, ie.css and normal.css. Simple websites might need only ie6.css and normal.css.
As you get off the ground with your HTML, it won’t be long before you run into problems. Of course, it happens to all of us: floats don’t behave the way we expect them to; elements don’t line up the same across browsers; and we run into good old-fashioned human error. The easiest way to isolate layout inconsistencies and to tweak design problems is usually to dig into the code and start modifying it. But this is also usually when we get into real trouble and start introducing dirty code.
Did you finally manage to align the navigation with the logo by wrapping the header in an extra div? Cool. Problem solved, right? Not quite. Does that div really need to be there, or does it force child elements to conform to positioning that could be achieved with better CSS? Before running off to the next tweak, continue to explore your problem, checking whether an extra container is the right solution or just a quick fix. With HTML and CSS, we have the power to craft a layout and style in any of several ways, not all of which are semantically correct or efficient.
More Forward Thinking
Carrying on my preaching, I’ll remind you again that at this stage of the game we need to be thinking years down the road and to consider all of the ways our website could get mangled once we leave it. We saw earlier how planing ahead for our website’s structure to take advantage of new HTML5 features enables us to build our content in a modular fashion. Now we can lean on this modular approach as we construct the HTML for our layout.
<section class="contentContainer blog"> <h1>My Blog</h1> <article> <hgroup> <h1>Hello Again, World</h1> <h5>Posted by: …</h5> </hgroup> <p>This is my second…</p> <p>You may be interested…</p> <aside> <h2>Related Reading</h2> <ul> <li><a href="#">Related link 1</a></li> … <li><a href="#">Related link 4</a></li> </ul> </aside> </article> <article> … </article> </section> <section class="contentContainer archives"> <h1>Blog Archive</h1> … </section>
With this structure, we see how easy it becomes to lift an <article> out of the website and get only the content we want. Along the same lines, we could easily scrap our <aside> without hurting the content because it’s a list of suggested articles that cover the same topic but don’t directly support our content. Better yet, we can apply this exact structure to a different <section> of our website with almost no effort. Our website is easy to expand, yet we retain the ability to build a unique style thanks to the different levels of distinction that HTML5 elements bring, which we wouldn’t have with a div-centered approach. Another thing we did with the .contentContainer class is begin to establish a global structure of logical and minimal CSS hooks.
JetVision demonstrates the subtle consistencies that make up a good design.
In the heat of things, going overboard with classes and IDs in our HTML is easy. Any element that we foresee looking or behaving differently merits its own class, right? Not always. Moreover, any page element that relies on JavaScript for important interactivity and feedback needs a hook, too, right? In reality, this isn’t always the case. Much like CSS selectors, most JavaScript libraries have the power to drill down into our content from the top. Because more specific elements have been added to the HTML specification, we are getting ever closer to mark-up that has minimal need for CSS hooking.
Instead of applying hooks to every element that will be a little different, simply apply them to the primary sections of your page. See how far you can get with your style sheet based on these basic classes and IDs. My rule of thumb is, if you need to drill down more than four levels in the CSS, it’s time to place a new hook, for the sake of your sanity and for those who might take over the project and wonder what you were thinking. When you start to see CSS selectors that look like .sidebar section div ul li p span, you know things are getting out of hand, and you need to place a new hook in the HTML.
This minimalist approach to CSS and JavaScript hooking serves a few purposes. First, it keeps our mark-up lean and our pages quick to load.
Secondly, it enables our CSS to do all of the hard work for us. The whole point of loading a style sheet onto a website is so that one 5 KB file will shape the look and layout of an unlimited number of HTML pages, thereby saving an unlimited amount of bandwidth — yay! If our pages have fewer hooks and a modular design, then applying one theme across the entire website will require less CSS.
Speaking of less CSS, how do we achieve that?
Slim And Sexy Style Sheets
When it comes to conservative code, CSS files usually get the short end of the stick. Grabbing all of the presentation and layout information from the HTML and dumping it in the CSS has finally become a standard process for most designers. (If it isn’t yet, make it yours.) While this is the exact purpose of a style sheet, there are plenty of methods by which a designer can make sure that the CSS that loads for every page is, like the HTML, as clean and concise as possible.
CSS as a Process
For many designers, the process of building a style sheet consists of starting with the outer containers of the HTML structure and working their way in, aligning and styling as they go. How many times have you sized and centered your #wrapper element, and then moved onto aligning the logo and primary navigation in the <header>, and then continued your way down the page? This process certainly works, but there is a much better and quicker way to handle CSS. Much as we did with the HTML, we can recycle code and use a modular approach in a way that makes more sense and takes less time.
Instead of designing a style sheet with the HTML in mind, we should carry over our mindset from the rest of the design process, putting the user first. In our new and improved CSS process, let’s start with the most important and prevalent elements of our design. These will almost always be the content. The whole point of delivering clean and semantic code is to ensure that no matter what the screen, device or context of our visitor, they will have access to the fantastic message that our website is trying to convey. For this reason, we’ll start the primary portion of our style sheet with the typography.
body, select, input, textarea {
font: normal .825em/1.25em Tahoma, Geneva, sans-serif;
color: #353838;
}
h1, h2, h3, h4 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #202020;
}
h1, h2 {
font-size: 1.875em;
}
h2 {
text-align: center;
font-weight: bold;
line-height: 1.5em;
border-bottom: 4px solid #e5e5e5;
-webkit-box-shadow: 0 1px 0 #b2c6e1;
-moz-box-shadow: 0 1px 0 #b2c6e1;
box-shadow: 0 1px 0 #b2c6e1;
margin: 1em 1.25em;
}
h3, h4 {
font-size: 1.25em;
margin: .75em;
}
When it comes to text, we start with the most global rules and get more specific as we move down the style sheet, a pattern that should be repeated for other portions of the website.
Because typography is usually the most heavily used element on a website, it stands to reason that we should define our core font rules on a high-level element, such as the <body> element. If we want different typographic rules for headlines or certain page elements, we can declare them just after the default settings. If you have trouble figuring out which typographic declarations to add to your high-level selector and which to use as overrides, simply mark them all up and then identify which are the most common. Apply the most common declarations to the high-level element, and build specificity as you go forward.
With the typography set and the HTML structure solid, we have a website that could technically be delivered as a functional product to any device or browser. Anything we do from this point on should be to enhance the user’s experience.
For many designers, enhancing the experience starts with coloring the page. After typography, the color palette is arguably the element that most affects a website, and therefore should be next in the style sheet. I find that a good color palette is ingrained in every level of a design, and that breaking colors out into a separate section of the CSS leads to a lot of extra lines of code and a lot of selectors that are used solely for color but that have twins throughout the style sheet serving other purposes. I am not a fan of branching a single selector into different bits for the sake of lining up declarations. However, neither method is inherently good or bad. Find a system that works best for you, and maintain consistency across the project.
Finally, we get to the structure and layout of the website. With wonderful typography and eye-catching colors sprinkled throughout our website, we can line things up the way they should be and in a way that makes the website easy to read, navigate and interact with. We can continue with the method we adopted for the typography, putting the general rules first and then getting into the details later on. One thing that will hold us back is the lack of a hierarchy in HTML for anything other than typography.
Looking at the elements included in HTML4, the specification was clearly not prepared to support the complex layouts that designers and clients demand today. We had six levels of importance for headlines, but only abstract elements like <div> and <span> for structure, with no way to indicate hierarchy. HTML5 has gotten us closer, but we aren’t there yet. To make up for this, let’s look to the global class structure that we started implementing in our HTML earlier. We used the .contentContainer class to define the areas of our website that will be visual containers for our content. This class gives us the power to style a big portion of our website quickly and allows us to easily add new containers later without having to force them to fit the style of our website using CSS.
header, footer, .contentContainer {
background: #f1f1f1;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
border-radius: 3px;
}
Reduce, Reuse, Recycle
Much like with HTML, style sheets can get pretty funky when we get to the point of adding and removing individual declarations in order to get an element to look or behave the way we want. The gracious way in which Web browsers handle CSS rules that they don’t understand or don’t need makes this practice rather common, thus bloating our style sheets. For this reason, go back through the style sheet at the end of the day and remove any rules that no longer serve a purpose. The task is a painstaking one, but as with most such tasks, plenty of tools exist to help us along.
Another task that can save size and space is to group selectors that have the same set of style declarations. From a technical standpoint, it makes sense to create a group of selectors whenever two or more share at least one declaration. I love to take advantage of grouping selectors by using something I call CSS effects. With some of the new CSS3 declarations, I’ve found that I can move the layer styles that I copy and paste in Photoshop right into my style sheets.
.blueBox, .grayBox, .orangeBox {
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0));
background-repeat: no-repeat;
border: 5px solid rgba(0, 0, 0, 0.2);
}
We can apply this declaration stack to any element on our page to achieve a gradient. The use of RGBa allows us to retain the background colors of individual elements and to “outsource� the gradient style to a common selector.
When combined with healthy HTML practices, spending more time on the essential pieces of solid Web design results not only in faster pages and a lighter server load but, more importantly, in a user experience that thrives on any platform regardless of the design method employed. Speaking of user experience, we still need to add one important piece to this puzzle.
JavaScript’s Vital Role
Whether or not a project can accommodate new HTML5 and CSS3 features, we still turn to JavaScript to provide users with rich and meaningful experiences, including inline form validation, error handling and live page formatting. The key difference between JavaScript and traditional HTML and CSS is that the former is a programming language. Thus, JavaScript is capable of powerful results and tricky logic but is less friendly to sloppy coding and human error. This latter characteristic leads me to my main advice about using JavaScript on your new website.
Enhance, Enhance
The first rule in applying JavaScript to your website is to test failures. What happens in a browser that has JavaScript disabled? What happens if you make a request to a geo-location API that the user declines? If either of these paths make all or a portion of your website inaccessible or inoperable, then this solution would be unacceptable, and an error- and interruption-free approach would need to be found. Much like how we currently approach CSS3, JavaScript should be used as a tool to enhance the user’s experience, not as a band-aid for quick results. If you rely on it to deliver the experience, then you are setting your website up for failure.
This might make it seem like JavaScript is not worthwhile to the design process, and indeed in some situations it may not be. One of the dangers of using any dynamic or script-based solution is that they can be so much fun to implement. Designers often get caught up in how cool these tools are and get distracted from considering whether everyone would have the same experience.
On the other hand, for adding meaningful functionality to a design, such as those mentioned earlier, JavaScript can have a truly magical effect. One of the more common examples of good JavaScript usage is inline form validation. We have all made an error in a Web form only to find out after having hit the “Submit� button, forcing us to go back and re-enter the information; in many cases, sensitive information such as passwords and credit card numbers needs to be re-entered as well. Alerting users to mistakes in real time makes online forms significantly less frustrating. Of course, we have a lot of tools and libraries out there to help us with this, as well as other great interactive features.
Keeping It Tidy
With all of these JavaScript tools at our disposal, going overboard and using as many as we can is easy, especially if we can justify their presence as enhancing the user experience. But keep in mind that with each new JavaScript library, plug-in or solution, we are adding files and lines of code to our pages that users have to download. With each bit of functionality, we have a trade-off with performance.
We can do some things to curb the performance trade-off. The most common way to optimize JavaScript is to concatenate and minify the files. Keeping multiple JavaScripts in a single optimized file reduces the number of calls that the website has to make to the server. For high-traffic solutions and clients who demand peak performance, this simple trick can save a lot of money. Of course, at a certain point, a single JavaScript file becomes too long and therefore a hindrance to the website and a nightmare to maintain.
Beyond optimization, there are techniques we can follow to keep JavaScript from weighing us down. One technique is parallel script loading. Loading your scripts in parallel will reduce blocks on the browser and save loading time, especially in older browsers that load linked resources one at a time. A great resource for this is the Head JS project.
Aside from parallel loading, developers have been taking advantage of selective loading techniques for years. This is often referred to as lazy loading, where you call external JavaScript files only where you need them. This is another resource-saving technique.
Pulling It All Together
Giving your website a clean and concise structure opens the door to myriad opportunities. Search engines will have an easier time indexing your content; screen readers and accessibility devices are less likely to be confused by the structure of your website; users on cellular networks can download your content faster; and designers will be able to expand with the latest and greatest techniques.
Let’s be honest, though. Putting a website together the right way does take more time and money up front. The whole team has to take extra caution and spend more time in the planning stages, making sure that everything is considered with the future in mind. Before a website is implemented and introduced to users, it needs to go through a scrubbing process that might not yield any changes in the front end. Finally, project stakeholders are forced to spend time thinking about scenarios (which may or may not happen) in which the natural order of their website is disrupted.
Many of these reasons have led us to implement less-than-ideal solutions in the past for the sake of meeting deadlines and budgets. But how often have we been forced to go back and fix something that wasn’t done correctly the first time? How much money are companies spending to get rid of bad practices that seemed harmless at the time but have left their websites expensive to update and maintain? Building rock-solid code and taking advantage of the power of modularity enables our websites to grow and saves much more than it costs by negating the need for another redesign just two years later.
It is for all of these reasons that the core necessities of a good website have been neglected for far too long.
Additional Resources
- Designing With Web Standards, 3rd Edition
No one preaches Web standards and clean code quite like Jeffrey Zeldman. This book should be a fixture on every designer and developer’s bookshelf. - “Semantics in HTML5�
In this article on A List Apart, John Allsopp breaks down how to continue developing semantic HTML with the new elements of HTML5 - “Orbital Content�
Cameron Koczon challenges us to liberate our content from the constraints of fixed and outdated design practices. A must-read for anyone interested in designing for the shifting viewports of the expanding Internet. - “Typographic Design Patterns and Best Practices�
We already know that content is vital to good design. Now dig deeper into the details of good typography.
(al) (kw)
© Jason Gross for Smashing Magazine, 2011.