Luckie Digital Designer Chris Nager, right, with CSS guru Eric Meyer

Thanks to Luckie & Company, I experienced one of greatest opportunities of my lifetime. In June, I represented my agency at a Web design conference in Atlanta, An Event Apart. It featured speakers that lead the Web industry like An Event Apart co-founders Jeffrey Zeldman and Eric Meyer. I’d like to share with you some of the most important things I took away from the conference.

Design responsively

Ethan Marcotte, the brilliant mind behind responsive design, asks, How do you experience the Web? Do you spend most your time in your browser on your laptop and desktop computer or on your smartphone? And what phone do you own? Is it an iPhone, Android or BlackBerry? Do you use a tablet like an iPad to browse the Internet? We are at a turning point in Web design history – it’s time to start thinking about content delivery. Your user wants to view your site’s content. It is not your say in how your users choose to view it (be it on a mobile device, Kindle reader, laptop, etc.), it is your job to serve it to them. Here is an example of a responsive design that I created. Open it up and resize your browser window, then open the site on your mobile device. You will see how the design adapts or responds to your choice of device.

Mobile first (inspired by Luke Wroblewski)

In regards to responsive design and content delivery, we, as designers, must shift our priorities to designing for the mobile device first and foremost. The reason behind this “mobile first” philosophy is to force us to decide what content is most important to feature on such a small screen. In mobile and small screen design, it is extremely important that the user can find exactly what they are looking for as quickly as possible. All cruft must be removed so the important content stands out. The “mobile first” philosophy is vital to larger screen designs because it makes us ask whether the content we feature is important enough to be in the larger screen designs. There is no reason to punish our users for using a large screen to view our site by filling our designs with useless information decoration.

Designing in the browser

With the current and future capabilities of Cascading Stylesheets, as designers, we are able to bring the designing process from Photoshop straight in the browser. Photoshop will still remain as a fundamental tool in Web design, but currently has a major limitation. The first step in building a Photoshop document requires setting a document width and height. In today’s Web design, we must account for flexible designs that can be experienced on mobile devices, desktop browsers, and everything between.

Progressive enhancement with HTML5/CSS3

Gone are the days of table-based designs and <div> soup to create beautiful designs. The latest version of CSS allows designers to embrace wonderful design techniques in the browser without slicing images to achieve gradients, shadows, rounded corners and a whole slew of other design flare without adding bloat to our sites’ file sizes. Small file sizes are extremely important when designing for mobile devices that rely on cell networks for Internet connection. Web designers must progressively enhance their sites so that all their users get a great experience and are able to view the content, but users with the latest and greatest browsers will receive an even better experience. The browsers will degrade gracefully down the line. Viewers that use browsers that are years old will get a gracefully degraded, simpler experience.

Web typography has arrived

Jason Santa Maria, creative director for Typekit, spoke about using beautiful type on the Web. He said any typographer will tell you good typography is invisible, which is best illustrated by his analogy of air conditioning. Let’s say you are in a business meeting. People may politely interrupt to ask if the A/C could be turned up or down, but no one will stop a meeting to exclaim the A/C is set perfectly. The perfectly set A/C is invisible, likewise good typography is unnoticed. High contrast is also extremely important when dealing with type on the Web. Readability is everything when delivering content to your user and contrast in your type helps. Our digital team has brought beautiful typography to the web with services like Typekit, Google Web fonts, and Fonts.com. Using real text instead of sliced images improves Search Engine Optimization and future-proofs our apps and sites by making them easy to update the type.

UI styleguides

Aaron Walter, the user experience design lead for MailChimp, spoke about the importance of workflow in the digital realm. He suggested building out User Interface styleguides in HTML/CSS before beginning any Web project. I have used this technique in a few of our latest projects at Luckie and it serves as a great start to a project. For an example of what I am describing, check out Bootstrap, from Twitter that was launched a few weeks ago. It is a great starting point styleguide for building Web apps.

There is one Web (inspired by Jeremy Keith)

As Web designers and developers, we must look to future-proof our sites and apps. There is not a “mobile Web” and a separate “desktop Web.” There is one Web connecting people to content all over the world in many different ways, ways in which we have yet to think. Web design should be device-agnostic. The tools are catching up to the rapidly changing industry. It is important that agencies stay relevant in this ever-evolving Web.

It’s vital that we educate our clients about what they should expect. Pixel perfect design between browsers and the multitude of new devices should be no longer relevant in today’s website and app designs.

I love what I do and An Event Apart has fueled my passion for designing for the Web.

TL;DR (Too long; didn’t read): The Web is evolving and we, as designers, must adapt to delivering content to all sorts of new devices that hit the market. The mobile Web does not exist, there is one Web. The best Web design is device-agnostic.

Chris Nager is a Digital Designer at Luckie & Company. You can contact him by email or follow @chrisnager on Twitter.

Photo credit: Pete Karl II
Source: lukew.com

Ever wanted your CSS ::selection background color to match your page background color? To achieve this, simply set your ::selection rgba background color alpha channel to .996 (.99609375 to be exact). I figured this out through trial and error with the Chrome inspector.

This method works for Webkit browsers. All other browsers seems to handle this effect just fine with the ::selection alpha channel set to 1.

See my code here:

.selection-example p:nth-child(2n) {
  background: #0cf;
}

.selection-example p::-moz-selection {
  color: #fff;
  background: rgba(0,204,255,1);
}

.selection-example p::selection {
  color: #fff;
  background: rgba(0,204,255,.99609375);
}

Dummy text flowed in from Bacon Ipsum.

ChrisNager.com will forever be in a state of constant improvement. See any bugs? Contact me via email, twitter, facebook, linkedin, skype or leave a comment below. I appreciate you taking the time out of your day to visit and explore my new portfolio site. Cheers!