This is a post by Eric Weinstein, creator of many Codecademy courses and a current student at Hacker School.

There's a lot to learn when it comes to coding. How do you know where to start? Should you learn HTML or JavaScript? What's the difference between Python and Ruby? What are "client-side" and "server-side" languages, "front end" and "back end" and how are they different? Hopefully this quick post will help you choose the language best suited for what you want to do.

To edit webpages

If you're interested in creating a static website or a single webpage, you should start with Web Fundamentals of HTML and CSS. HTML stands for Hyper Text Markup Language and describes the structure of webpages. CSS stands for Cascading Style Sheets, and controls their appearance — for example, the font color or the position of text on the page.

To make them interactive

If you want to give your website behavior—think automatic Twitter updates, your Facebook notifications, or the ability to drag and drop elements of your LinkedIn profile—then you'll want to learn JavaScript and jQuery. JavaScript is a frontend, or "client-side" language which means it runs on the web browser of the person visiting your site. jQuery is a library of specific JavaScript tools designed to make website interaction more awesome.

To store user information

If you want to develop a full-blown web app that lets users log in and saves information for them (such as tweets, Facebook posts, or Codecademy badges), you'll want to learn a backend, or "server-side" language like PHP, Python, Ruby or JavaScript (it's ambidextrous). These languages run on the computer where the website code lives, also called the server. You can accomplish the same things and build the same kinds of projects with each of them, so go ahead and pick your favorite!

Which language will you start with?

This is a post by Eric Weinstein, creator of many Codecademy courses and a current student at Hacker School.

There's a lot to learn when it comes to coding. How do you know where to start? Should you learn HTML or JavaScript? What's the difference between Python and Ruby? What are "client-side" and "server-side" languages, "front end" and "back end" and how are they different? Hopefully this quick post will help you choose the language best suited for what you want to do.

To edit webpages

If you're interested in creating a static website or a single webpage, you should start with Web Fundamentals of HTML and CSS. HTML stands for Hyper Text Markup Language and describes the structure of webpages. CSS stands for Cascading Style Sheets, and controls their appearance — for example, the font color or the position of text on the page.

To make them interactive

If you want to give your website behavior—think automatic Twitter updates, your Facebook notifications, or the ability to drag and drop elements of your LinkedIn profile—then you'll want to learn JavaScript and jQuery. JavaScript is a frontend, or "client-side" language which means it runs on the web browser of the person visiting your site. jQuery is a library of specific JavaScript tools designed to make website interaction more awesome.

To store user information

If you want to develop a full-blown web app that lets users log in and saves information for them (such as tweets, Facebook posts, or Codecademy badges), you'll want to learn a backend, or "server-side" language like PHP, Python, Ruby or JavaScript (it's ambidextrous). These languages run on the computer where the website code lives, also called the server. You can accomplish the same things and build the same kinds of projects with each of them, so go ahead and pick your favorite!

Which language will you start with?

Somewhere around 18% of the web is powered by WordPress. The humble blogging platform has grown into a web-titan of monster proportions.

Substantially fewer sites are hosting on WordPress.com — Automattic’s free, hosted solution for WordPress blogs — but it’s still a very dominant player.

Whilst the codebase behind WordPress.com is updated everyday, with bug fixes, performance enhancements and feature tweaks, the appearance of the dashboard has, until now, remained largely unchanged for some time.

The redesign of WordPress.com’s dashboard that was announced in April and previewed this week is a superb revision. There are a number of significant changes, and all of them are an improvement on the old version.

The biggest change is that the new WordPress.com dashboard is flat-design; not an extremist flat-design — there are a few drop shadows and pseudo-drop shadows here and there — the new dashboard is an evolved version of flat-design, a grown up version.

The change in color scheme from the dull all over grey of the previous version is the most notable change, and it works really well to create a greater sense of hierarchy. I particularly like the orange notifications that leap out at you.

The new design isn’t yet responsive, but that will be added in the coming months to allow blog owners easier access on the go. (If you’d like to trial the responsive dashboard you can enable it by ticking “Enable experimental responsive design” in your personal settings.)

As well as completely redrawn icons, the new dashboard has a change of typeface: Open Sans, designed by Steve Matteson, is available free via Google Fonts if you like the way it looks.

The new dashboard design is a fantastic revision, the increased contrast, improved hierarchy and cleaner type make the site more usable, all while retaining a familiarity for users of WordPress.com. I only hope a similar update is pushed to WordPress.org users as soon as possible.

What do you think of the new WordPress.com dashboard? Was the grey on black type a mistake? Let us know in the comments.

700+ Professional Web Backgrounds – only $29!

In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got as far as Roman (traditional serif) typefaces and the early-19th century. Now we’re back for part 2!

Part 2 will primarily cover sans typefaces, with a nod to display typefaces and other less common categories, as well as address a few of the questions people have about whether type classification is helpful and necessary.

If you haven’t read part 1, now’s your chance to go over it. It lays important groundwork for this article, covers the categories of serif typefaces, and contains plenty of useful information about the development of serif type. If you already have read it, here is a quick recap to get us started before we move on to the new material.

Review

Type Classification Systems

Type has been classified in many ways over the years, both formal and informal — Thibaudeau, Vox, British Standards, etc. None of these are complete or all-encompassing, but they’re helpful as an aid to study as well as for learning to use type correctly and effectively. The material in this two-part series draws heavily from the Vox-ATypI system, which is the most “official” of the systems today, having been adopted by the Association Typographique Internationale in 1962 and still the most commonly referenced system.

Is it perfect? No, but it provides a good overview of what is out there; and when you describe typefaces using the terms you’ll learn in this series, anyone who is reasonably familiar with typography will know what you’re talking about.

Here is a quick overview of the type categories we covered in part 1.

Humanist/Venetian

• Notable calligraphic influence, patterned after handwriting.
• Strongly angled axis or stress.
• Based on typefaces designed in Renaissance cultural hubs such as Venice.

Garalde

• Less calligraphic influence because type began to be viewed as separate from writing.
• Named after influential type designers Claude Garamont and Aldus Manutius.
• Still has a tilted axis but less obvious than in Humanist type.

Transitional/Neoclassical

• No calligraphic influence. Designed independently, sometimes on a grid.
• First appeared in the late-17th century.
• Virtually vertical axis and high contrast between heavy and thin strokes.

Didone

• Extreme contrast between thick and thin. Rigidly vertical axis.
• Abrupt, or unbracketed, serifs. Very precisely designed.
• Named after Firmin Didot and Giambattista Bodoni.

Slab Serif

• Very heavy weight and low contrast between thick and thin.
• Unbracketed, prominent serifs.
• First typefaces created expressly for display purposes.

Sans Serifs

When we left off in part 1, it was circa 1815, with the first appearances of slab serifs, also called Mechanistics or Egyptiennes. By the time slab serifs were being popularized, early sans serifs had already been around for some time in a variety of forms. To follow the progression of sans serifs, we must step back in time a number of years.

History of Sans Serifs

The earliest sans-serif letterforms were, of course, not type, but inscriptions, dating back to as early as the 5th century BC, and enjoyed a resurgence in engraving and inscriptions in the 18th century.

Caslon’s Etruscan type, as seen in a 1766 specimen book. Larger view. (Image source: Typefoundry)

Strangely enough, the first “sans serif” type was created not for the Latin alphabet, but for use in 18th-century academic works on Etruscan culture, which preceded the Roman Empire in the geographical area of modern-day Italy. Circa 1748, the foundry of William Caslon (with whom you should be familiar) cut the first known sans-serif Etruscan type for the Oxford University Press, although there are earlier usages of sans serifs in similar applications.

Haüy’s type, created to emboss pages so as to be read by touch, was oddly ornate for its purpose. Larger view. (Image source: Camille Sourget)

Another interesting typographic innovation was the work of Valentin Haüy, who founded a school for blind children in 1785. In 1784, a year of preparation during which he devoted himself to educating a single student, Haüy developed an embossing typeface with which to make tactile books. The typeface, which, along with his method, is called the Haüy System, is an early form of sans serif, but it reads more like an upright italic or a disconnected script.

It was first embossed and then often carefully inked over the top so that it could also be read visually, as in the photo above. It looks lovely, but was superseded in both practicality and readability by the system devised by Louis Braille, himself a student at the school Haüy founded.

William Caslon IV’s sans serif was categorized as “Two Lines English Egyptian,”. (Image source: typophile)

William Caslon IV — who inherited the type foundry, as well as his name, from four generations back — is credited with the first sans-serif printing type for the Latin alphabet, appearing first in the 1816 Caslon specimen book. It featured only capitals and was marketed as “Two Lines English Egyptian,” the “Two Lines” being a reference to the size of the set type. There was much confusion over this new style, being variously called Egyptian (despite early slab serifs also being marketed as Egyptians), Gothic, Grotesque and Antique, among others.

A sans from an early Vincent Figgins type specimen. Larger view. (Image source: Typefoundry)

Eventually Vincent Figgins (whom you may remember as being credited with the first slab-serif type) called the new style “sans serif,” which became the widely accepted term, although you’ll see many of the old terms in use on some typefaces.

Classifying Sans Serifs

At first glance, you might think that sans serifs can’t be classified the way that serifs can, since fewer variables are apparent in the ones we see most often. However, plenty of details can aid specificity when discussing, using and pairing typefaces, even within the broader category of sans serifs or, as Maxmilien Vox termed them, “linéales.” Subcategories were implemented by the British Standards classification, a permutation of Vox’s system, and they provide excellent means of discerning characteristics. I am presenting here a slight variation of those four, with a couple of minor differences for the sake of practicality.

Grotesque

The Grotesque category covers the early sans serifs, specifically those designed in the 19th century and the first decade or two of the 20th. Many of these typefaces had only capitals or exist only in centuries-old specimen books, but a number of them are still quite commonly used. These typefaces tend to be very idiosyncratic, with awkward weight distribution around bowls of characters and irregular curves.

(Image source: MyFonts)

Monotype Grotesque (above, 1926), based on Berthold’s much earlier Ideal Grotesque (1832), is an excellent example of the quirks commonly evident in Grotesques. Note the awkward “a” and “g,” the squarish bowls, the odd curves and angles at the tips of strokes in the “J” and “S,” and the overall irregularity.

The capital G in a Grotesque is usually spurred, and the British Standards specifies a curled leg on the capital R, although that is not apparent in many typefaces of the period. They tend to display some variation in the thickness of strokes, but the contrast does not show calligraphic influence or a logical pattern. The style became more sophisticated over the course of the 19th century. Perhaps the finest sample of this category appeared in the Berthold Type Foundry’s 1896 release of Akzidenz-Grotesk, which, along with Schelter Grotesk (1886), served as an archetype for many Neo-Grotesques, most notably Neue Haas Grotesk and Univers.

Interestingly enough, it has been postulated that Akzidenz-Grotesk was based on Walbaum or Didot. Despite looking extremely different at first glance, a simple comparison of the basic forms shows that the metrics are very similar.

Examples of the Grotesque category include Franklin Gothic, Monotype Grotesque and Schelter Grotesk.

Neo-Grotesque

The Neo-Grotesques, also called Transitionals or Realists, include many of the most commonly used sans. They are based on the later Grotesques and take the design of the sans-serif to a new level with their careful construction and aesthetics. They are much more refined than the Grotesques, during which period type designers were still feeling their way around the new style; thus, the Neo-Grotesques lose many of the awkward curves and idiosyncrasies that are common in earlier sans serifs. You’ll see much less variation in line weight, and most often a single-story “g.”

Created with an emphasis on neutrality and simplicity, they were extraordinarily popular among the Modernists and remain popular today. Despite many claims otherwise, simplicity does not directly translate into legibility: A tight vertical rhythm and pinched apertures keep many Neo-Grotesques (including Helvetica) from being good choices for body text. In fact, in the 2013 edition of the DIN 1450 (the German standards on legibility in typefaces, published by the Deutsches Institut für Normung), Helvetica is used as a negative standard. That’s an entirely different topic, however.

In 1957 — a big year for Neo-Grotesque sans serifs, as Frutiger’s Univers as well as Folio (originally thought to be a stronger competitor, although history has proved otherwise) were released — Haas Foundry released Max Miedinger’s Neue Haas Grotesk, which drew heavily on Schelter and Akzidenz Grotesks. In 1960, Haas, in an effort to market it more effectively, rebranded Neue Haas Grotesk to what we know as one of the most ubiquitous typefaces of all time — you guessed it — Helvetica.

Many people love Helvetica so much that they’ll hang prints of vintage Helvetica specimens as decoration. (Image source: etsy)

The quintessential members of this group are, of course, Univers and the immortal Helvetica, which has gone through quite a number of permutations over the years (as have all of these typefaces) and was recently revived by Christian Schwartz as a rerelease of Neue Haas Grotesk. A nice informational minisite was created by Indra Kupferschmid and Nick Sherman for the release. Other typefaces in this category include the DIN 1451 and its derivatives, and Bell Gothic and its successor Bell Centennial.

Humanist

If you remember the most important quality of Humanist serif type, you’ll be relieved to learn that the same quality carries over to the sans serifs! The primary characteristic of Humanist type, both serif and sans serif, is a strong calligraphic influence, basing its shapes and flow on forms that could originate from a pen or brush. This means a much higher stroke contrast, and some Humanist sans even feature some stress, whereas nearly all other sans serifs have a completely vertical axis.

Another interesting characteristic of Humanist sans serifs is that their proportions often derive largely from Roman inscriptions and early serif typefaces, rather than 19th-century sans serifs as the Neo-Grotesques did. Because of this design process involving older letterforms, the lowercase “a” and “g” are most often two-story in Humanist sans serifs. All of these characteristics combine to make most Humanists a more legible choice than other types of sans faces.

Hermann Zapf’s Optima is one example that clearly shows the calligraphic heritage, with an unusually obvious difference between thick and thin strokes, while many others in this category have more subtle features. The Humanist sans group includes classics such as Gill Sans and Frutiger as well as more recent releases like Myriad (1991), Trebuchet (1996) and Calibri (2005).

Geometric

Geometric sans serifs are exactly what their name suggests. Instead of being derived from early Grotesques, like a Neo-Grotesque, or from calligraphic and engraved forms like the Humanist sans, they are built on geometric shapes. The characters often have optically circular bowls and are otherwise typically very rectangular, sharing many components between the various glyphs.

Erbar’s small x-height, among other factors, renders it difficult to read. Larger view.

Jakob Erbar, whose eponymous typeface is credited as being the first Geometric sans, reportedly based his construction on the circle. Released in the 1920s, Erbar-Grotesk was intended to be legible. Ironically, because of the awkward visual rhythm, resulting from strict adherence to geometric forms, Geometric lineals are among the least legible of sans serifs and are usually suitable only for display type. Geometric sans serifs usually show little or no stroke contrast and usually feature a single-story lowercase “a.”

Paul Renner’s Futura, Koch’s Kabel and Lubalin’s Avant Garde are typical examples of the style. H&FJ’s Gotham is also a Geometric sans, although it is less strictly geometric than some and allows for more variation in the heavier weights.

The Rest Of The Story

That’s the basic classification for sans serifs! While the two parts of this series primarily deal with serif and sans type, there are many other styles to consider. The Vox-ATypI system also provides five subcategories of “calligraphics” (i.e. type that is derived from handmade letters), but as they are largely self-explanatory, I won’t dedicate much space in this already lengthy article to them. Here is a brief summary of each category.

Scripts

A case of script metal type. (Image source: Etsy)

Scripts are, of course, typefaces based on handwriting, particularly formal scripts. The letters often connect, but not necessarily so. They range from the very formal — Matthew Carter’s Snell Roundhand, named after the author of a 1694 booklet on penmanship, originally released in 1966 — to the very casual — Ashley Havinden’s eponymous Ashley Script, from 1955.

Glyphic

Carol Twombly’s Trajan was based on this inscription at the base of Trajan’s Column in Rome.

Glyphic typefaces are those derived from engraved or chiseled letters. Many of these typefaces look like they could be classified as serifs but are based on the work of a chisel, rather than having gone through the traditional design process and referencing the stroke of a pen. As such, Glyphics, also called “incised” typefaces, sometimes contain only capitals, and the serifs tend to be small, as a natural detail of the chiseling process rather than as a design feature. Trajan and Friz Quadrata are excellent examples of this style.

Graphic

Graphic wood type from the extensive Hamilton Wood Type collection.

Graphic is essentially a sort of catch-all label for display type that doesn’t fit into any other category. It includes anything that would be drawn or designed, with a brush, pen or any sort of tool. If it’s not exactly a sans, not exactly a serif, and you’re not really sure what it is, it is most likely a Graphic typeface!

Blackletter

Gutenberg printed with type designed to mimic the late-medieval Fraktur style of handwriting. (Image credits: JMWK)

Blackletter type began with Gutenberg and was used in printing, even printing body text, until the early- to mid-20th century in Germany. It is based on a medieval scribal hand, written with a broad-nib pen, and differs from graphic typefaces and scripts in that it has been used at length in body text. It has a very dense type style. When the traditional style that Gutenberg had used began to give way to the more readable early serifs (the Humanist/Venetian designs of Aldus Manutius and his colleagues), printers called the new style “Whiteletter,” in reference to the negative space-to-ink ratio on the page; thus, the old type was termed Blackletter, and we still use this term today.

Gaelic

Gaelic type includes the Latin alphabet as well as some additional glyphs. Larger view. (Image source: mathewstaunton)

Gaelic type is based on the insular script found in manuscripts throughout the UK. As with Blackletter, it has been used in printing body text in Ireland, from its earliest appearances in the 16th century all the way through to the mid-20th century, but is no longer popular as a text typeface. The Vox-ATypI system was amended to include the Gaelic category in 2010 at the ATypI annual conference, appropriately held in Dublin.

Non-Latin Type

Beyond that, there is still another world of type to discover. The entirety of these two articles on the subtleties of type (and, believe me, it can get much more complicated!) have discussed only the Latin alphabet, which, while quite commonly used, is merely one of many writing systems used today. I encourage you to learn more about, and get involved in, the typography of other writing systems! Some are very widespread and used daily by hundreds of millions of people; others are used by mere thousands.

Regardless of how many people use it, each writing system needs quality typefaces. From the commonly used (check out Nadine Chahine’s interview on Arabic type) to the rarely seen (Jean-Baptiste Levée gave a fascinating talk at last year’s TypeCon on creating Air Inuit Sans, supporting Inuktitut glyphs), the typography of non-Latin writing systems promises an exciting future.

Closing Remarks

We’ve barely scratched the surface of the fascinating subject of typography and type history in this two-part series “Making Sense of Type Classification.” Hopefully, it has piqued your interest in this intriguing field. Knowing your way around the typographic resources available to today’s designers is essential, and it is helpful to understand a little behind the characteristics, history, visual character and idiosyncrasies that make each typeface unique and that define how it communicates.

At one point in the history of Web design, an extensive knowledge of type history was unnecessary because a Web or interactive designer was limited to half a dozen typefaces, and those in limited weights and variants.

Today, however, the landscape of Web design is completely different, and the typographic possibilities are endless! Also, while this material is covered in many design schools, a significant portion of designers today haven’t had a formal design education, so now is the best time to catch up!

That being said, we also must remember that, while type classification is an important aid to studying type, it is not a hard and fast system that cannot be questioned. Many typefaces combine characteristics and could easily fit into multiple categories, and no classification system can cover all of the possibilities. In the end, type classification is an excellent means of learning to recognize common patterns and distinguishing characteristics of typefaces, and we get to learn some type history along the way.

With this short series, you’re now equipped with a strong knowledge of categories of type; you’ve learned to analyze typefaces and pick out unique aspects of letterforms; you’ve seen how type has evolved with culture; and, most importantly, you have a solid foundation for further study of typography and type history! It cannot be overstated how immensely important sound knowledge of typography is for anyone in the broad field of design, and the material we’ve covered here will serve you well in navigating the world of type.

(al) (ea)

© Joseph Alessio for Smashing Magazine, 2013.

There are varying opinions on whether or not entrepreneurs should code. I have heroes and individuals in the business world that I look up to that are both coders and non-coders, yet I still go back and forth in my opinions of whether or not it’s necessary for entrepreneurs to code.

This is not a post to state my opinion either way. I would like to pose my thoughts here, as a way of opening the conversation and to think out loud about this sensitive subject.

Seth Godin or Gary Vaynerchuk have no idea how to code, but they understand it, and they surely understand the value of it. Seth Godin is a bestselling author and owns Squidoo, which is one of the most trafficked sites on the web. Gary Vaynerchuk built his own brand and a million dollar wine business online, and now owns Vaynermedia which does the same for the likes of the NHL, Oprah, Campbell’s, and more.

But most entrepreneurs today have no idea how to code or even understand the technology behind the web that generates between 50-100% of their business. In a world that is becoming more and more web-centric every day, this seems like a dangerous trend and one that raises some red flags for me. Maybe not now, but certainly in the near future.

Not Every Business is a Web Business

Right out of the gate I think it is important not to limit ourselves to only our industry. There are many businesses out there that are brick-and-mortar, and don’t necessarily require an entrepreneur to code.

That being said, can you think of a business that doesn’t have some way to benefit from having an online presence? Even an entrepreneur with an offline business will be vulnerable by having an in-house web developer leave, or worse, pay thousands of dollars for a website that they themselves cannot update.

It is my opinion that a website or app is never done. They’re constantly evolving to fit the changes, content, and new products/services that companies provide. If the owner doesn’t at least understand the basics of code, they could end up paying more money, getting a site that doesn’t fit their needs, or not having the skill set to get the most out of the web.

An entrepreneur is usually a leader, and a good leader should know every aspect of their business so they can step in with educated value at a moment’s notice.

Can Entrepreneurs Just Be Designers?

Is it possible that design could be enough for an entrepreneur? The job of a graphic designer is usually to communicate, and the same applies for an entrepreneur. Designers are good at getting to the essence of what value needs to be communicated, so an entrepreneur benefits greatly from learning design as well. But design has its limits and needs to be executed on to provide any value. Design has to be executed to be valuable. Hence the need for code.

When is Enough Knowledge of Code Enough?

Graphic designers become web designers. Web designers become front end developers, and front end developers become backend developers. Backend developers become database architects. It never ends really.

If technology is ever-changing, is it worth it for an entrepreneur to learn to code if they’re never going to know everything as proficiently as they need to?

An entrepreneur also needs to run a business, drive the strategy, reinforce the vision, and oversee the day-to-day operations. Many would argue that these things can be delegated, and so can code, but will this type of entrepreneur have value in the future?

Entrepreneurs Need Coders as Cogs

Many times entrepreneurs need programmers and developers to carry out their vision. Most of the programmers I know, now hold jobs that carry out what the owner wants. Developers and designers are treated like secretaries or the cleaning crew. They’re just part of the plan. A piece of the assembly line.

They can’t live without those that code, yet they tend to treat coders like just another brick in the wall. They would never have the discipline to learn how to code, yet they’ll bark orders at their developers without understanding the work that goes behind their demands. They’re too busy trying to figure out new ways to sell something or finding ways to get an influential magazine to write about their genius.

The New Reality

I hope by now you understand my twist. I started out trying to bait a discussion of getting entrepreneurs to learn to code, but soon turned to burning it down with sarcasm. The real truth is that coders are the new entrepreneurs. It is much easier to learn to build a business than it is to learn to code.

Developers and designers have the ability to build out products themselves, but also to build products that need little-to-no selling.

There will always be entrepreneurs that don’t know how to code, but the future is brightest for those that do. In the web world nothing can happen without some sort of code. It is possible to be an entrepreneur without knowing how to code but it is a lot easier to be one when you do.

The post To Build or Not to Build appeared first on Treehouse Blog.

I've been using Google Hangouts a bunch. It's really pretty great. One on one or group text chat, audio, or video. Text is archived, maintains history, and is searchable. Video / audio is recordable. It works great on desktop and mobile devices and keeps them in sync. It's free. Hard to beat that.

Anyway, on a whim I decided to replicate some of the look of the chat window on desktop. Turns out there is a bunch of interesting stuff that comes up! Radial gradients, pseudo elements and animations, flexbox, and more.

The image above is what we're going to build.

Overall Structure

Everything we see here is related. That calls for a <section> I think. There will probably be others like it, so that calls for a class name.

<section class="module">
      <!-- everything -->
    </section>

The top is more of a "header" than a "heading" because it's not just text, it has other stuff going on up there. The conversation happens in a very specific order, so I'm thinking <ol> with each group of text/image being a <li>. Within the list item, stuff like images and paragraphs.

I find little charts like this useful. While not comprehensive, it shows the thought process:

<section class="module">
    
      <header class="top-bar">
        <h1>Hangouts</h1>
        <!-- likely some spans and stuff -->
      </header>
    
      <ol class="conversation">
        <li>
          <img class="avatar" />
          <div class="message">
            <p>Talkie talk talk.</p>
          </div>
        <li>
      </ol>
    
    </section>

In the header there are some icons. In the demo, I use some quick-and-dirty stuff from We Love Icon Fonts. In production I would use a streamlined icon font made from IcoMoon and inserted with this HTML.

The Pulsing Header

When you get a new message, the header kinda glows/pulses. The solid-color bar now has essentially a radial gradient in the center of it that becomes more and less intense. At peak intensity, it's like:

Which you could picture like this:

Creating that gradient isn't quite as easy as you might hope¹. You might think it's the most basic syntax of all, from one gray to another:

background: radial-gradient(#666, #999);

But no, that just fills the area with an elliptical gradient (white and black for clarity):

You can force it into a circle, which gets us pretty close:

background: radial-gradient(circle, #666, #999);

But if you really want fine-grained control over how large that gradient in the middle is, you'll want something like:

background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

Where you can adjust that 800% to get it just how you want it. That syntax is still prefixed at the time of this writing. With all prefixes it's like:

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, color-stop(0%, #999999), color-stop(800%, #666666));
    background: -webkit-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: -moz-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: -o-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

And even then it doesn't work in Opera 12.15. So... instead we could use the most simple gradient syntax and apply it to a pseudo element on the header. That way we can animate the opacity to get the pulse effect anyway.

.top-bar {
      background: #666;
      position: relative;
      overflow: hidden; 
    }
    .top-bar::before {
      content: "";
      position: absolute;
      top: -100%;
      left: 0;
      right: 0;
      bottom: -100%;
      opacity: 0.25;
      background: radial-gradient(white, black);
    }

The absolute positioning will make it sit on top of anything inside the header with default static positioning. But we can fix that.

.top-bar > * {
      position: relative;
    }

Then animate it:

.top-bar::before {
      animation: pulse 1s ease alternate infinite;
    }
    @keyframes pulse {
      from { opacity: 0; }
      to { opacity: 0.5; }
    }

Which won't work in everything but it's a lot better than it was. You'd do it with an extra element / image / jQuery if you deemed the effect critical enough.

Basic Chat Box Setup

We already decided the conversation itself is an ordered list. Each person talking is a list item. Each individual message is a <p>, but there can be multiple messages together, so those are all grouped in a <div class="message">. We'll wrap the avatar as well.

<li>
      <div class="avatar">
        <img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/5/profile/profile-80_9.jpg" />
      </div>
      <div class="messages">
        <p>yeah, they do early flights cause they connect with big airports.  they wanna get u to your connection</p>
        <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
      </div>
    </li>

Note that <time> element in there. The actual content of the time element can be whatever makes sense. But the datetime attribute is in a specific format. See more.

We also need a way to distinquish between our messages and other people's messages. A class will do...

<li class="self">
      <!-- ... -->
    </li>
    <li class="other">
      <!-- ... -->
    </li>

The Variable Width Chat Bubbles

An interesting design feature of this chat design is that the chat "bubble" is only as wide as the longest sentence it contains. It's a nice feature as it makes very short messages less visually intense and gives rhythm to the conversation.

If (avatar + messages = full width) every time, floats would work fine. There is a way we could get this working with floats, but it would require extra non-semantic wrappers. Instead, let's make this a super-progressive demo and use flexbox for layout². This is going to make a couple of other things awesomely easy, which we will get to in a moment.

Flex items, by their nature, are just as wide as they need to be. They also exhibit no natural desire to fill their flex container. If they do, they do, if they don't, they don't. You can even have them wrap if you want, but we don't in this case.

So our CSS becomes:

.discussion li {
      display: flex;
    }
    .avatar {
      width: 40px;
    }
    .avatar img {
      width: 100%;
      display: block;
    }

Deliciously easy.

The Switcheroo

I'm sure you noticed the flip-flop design. Messages from others have the avatar on the left, messages by you have the avatar on the right. Again, do-able with floats but kinda janky. Flexbox makes this extremely easy.

In our markup, we put the avatar first, so that will be the default ("other people"). In list items with the class name "self" (our own messages) we'll switch the order of layout.

.self {
      justify-content: flex-end;
    }

WELL THAT WAS EASY. But wait. It's not just the horizontal alignment that switches, it's the vertical alignment too.

Floats would never be able to help us here. Things would get freaky with some placeholder elements and absolutely positioning and who knows what. With flexbox...

.self {
      /* switch horizontal layout */
      justify-content: flex-end;
      /* switch vertical layout */
      align-items: flex-end;
    }

Wipes hands.

The Message Bubble Triangles

This has been covered a million times, so I'll keep it brief. You can make triangles in CSS with zero-width zero-height elements and borders. The borders on elements will meet each other at an angle. So if one is colored and the other is transparent, it will look like a shape.

Here, we'll color the top and right borders, and leave the bottom and left borders transparent. This makes the type of triangle you see here:

.other .avatar::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border: 5px solid white;
      border-left-color: transparent;
      border-bottom-color: transparent;
    }

Then just switch up the positioning of it and which borders are colored for "self" messages:

.self .avatar::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border: 5px solid white;
      border-right-color: transparent;
      border-top-color: transparent;
    }

The message bubbles have little box-shadows under them. We didn't cover it, but you can see in the demo. In the "self" messages, the triangle meets the bubble where the shadow is most pronounced, so it looks weird if it's not there. We can apply the shadow to it to fix it.

.self .avatar::after {
      box-shadow: 1px 1px 2px rgba(black, 0.2);
    }

The Demo

Check out this Pen!

¹ Here's a couple of more resources on radial gradients: Impressive Webs, Web Directions

² I went totally un-prefixed and new-school with all the flexbox stuff in this article, Here's some resources on that: CSS-Tricks, Dev.Opera. It's a good time for flexbox right now. IE 10 has a prefixed semi-old version, but IE 11 will be un-prefixed and new. Firefox has supported various versions forever but will be un-prefixed and new in 22 (late June 2013). Safari has old version prefixed in 6 but going unprefixed and new in 7. Chrome has new verison prefixed but is unprefixing in (30?). iOS and Blackberry are prefixing, but at least new syntax. Android at least has old prefixed version.

Replicating Some Of Google Hangouts Chat Design is a post from CSS-Tricks

I've been using Google Hangouts a bunch. It's really pretty great. One on one or group text chat, audio, or video. Text is archived, maintains history, and is searchable. Video / audio is recordable. It works great on desktop and mobile devices and keeps them in sync. It's free. Hard to beat that.

Anyway, on a whim I decided to replicate some of the look of the chat window on desktop. Turns out there is a bunch of interesting stuff that comes up! Radial gradients, pseudo elements and animations, flexbox, and more.

The image above is what we're going to build.

Overall Structure

Everything we see here is related. That calls for a <section> I think. There will probably be others like it, so that calls for a class name.

<section class="module">
      <!-- everything -->
    </section>

The top is more of a "header" than a "heading" because it's not just text, it has other stuff going on up there. The conversation happens in a very specific order, so I'm thinking <ol> with each group of text/image being a <li>. Within the list item, stuff like images and paragraphs.

I find little charts like this useful. While not comprehensive, it shows the thought process:

<section class="module">
    
      <header class="top-bar">
        <h1>Hangouts</h1>
        <!-- likely some spans and stuff -->
      </header>
    
      <ol class="conversation">
        <li>
          <img class="avatar" />
          <div class="message">
            <p>Talkie talk talk.</p>
          </div>
        <li>
      </ol>
    
    </section>

In the header there are some icons. In the demo, I use some quick-and-dirty stuff from We Love Icon Fonts. In production I would use a streamlined icon font made from IcoMoon and inserted with this HTML.

The Pulsing Header

When you get a new message, the header kinda glows/pulses. The solid-color bar now has essentially a radial gradient in the center of it that becomes more and less intense. At peak intensity, it's like:

Which you could picture like this:

Creating that gradient isn't quite as easy as you might hope¹. You might think it's the most basic syntax of all, from one gray to another:

background: radial-gradient(#666, #999);

But no, that just fills the area with an elliptical gradient (white and black for clarity):

You can force it into a circle, which gets us pretty close:

background: radial-gradient(circle, #666, #999);

But if you really want fine-grained control over how large that gradient in the middle is, you'll want something like:

background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

Where you can adjust that 800% to get it just how you want it. That syntax is still prefixed at the time of this writing. With all prefixes it's like:

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, color-stop(0%, #999999), color-stop(800%, #666666));
    background: -webkit-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: -moz-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: -o-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
    background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

And even then it doesn't work in Opera 12.15. So... instead we could use the most simple gradient syntax and apply it to a pseudo element on the header. That way we can animate the opacity to get the pulse effect anyway.

.top-bar {
      background: #666;
      position: relative;
      overflow: hidden; 
    }
    .top-bar::before {
      content: "";
      position: absolute;
      top: -100%;
      left: 0;
      right: 0;
      bottom: -100%;
      opacity: 0.25;
      background: radial-gradient(white, black);
    }

The absolute positioning will make it sit on top of anything inside the header with default static positioning. But we can fix that.

.top-bar > * {
      position: relative;
    }

Then animate it:

.top-bar::before {
      animation: pulse 1s ease alternate infinite;
    }
    @keyframes pulse {
      from { opacity: 0; }
      to { opacity: 0.5; }
    }

Which won't work in everything but it's a lot better than it was. You'd do it with an extra element / image / jQuery if you deemed the effect critical enough.

Basic Chat Box Setup

We already decided the conversation itself is an ordered list. Each person talking is a list item. Each individual message is a <p>, but there can be multiple messages together, so those are all grouped in a <div class="message">. We'll wrap the avatar as well.

<li>
      <div class="avatar">
        <img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/5/profile/profile-80_9.jpg" />
      </div>
      <div class="messages">
        <p>yeah, they do early flights cause they connect with big airports.  they wanna get u to your connection</p>
        <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
      </div>
    </li>

Note that <time> element in there. The actual content of the time element can be whatever makes sense. But the datetime attribute is in a specific format. See more.

We also need a way to distinquish between our messages and other people's messages. A class will do...

<li class="self">
      <!-- ... -->
    </li>
    <li class="other">
      <!-- ... -->
    </li>

The Variable Width Chat Bubbles

An interesting design feature of this chat design is that the chat "bubble" is only as wide as the longest sentence it contains. It's a nice feature as it makes very short messages less visually intense and gives rhythm to the conversation.

If (avatar + messages = full width) every time, floats would work fine. There is a way we could get this working with floats, but it would require extra non-semantic wrappers. Instead, let's make this a super-progressive demo and use flexbox for layout². This is going to make a couple of other things awesomely easy, which we will get to in a moment.

Flex items, by their nature, are just as wide as they need to be. They also exhibit no natural desire to fill their flex container. If they do, they do, if they don't, they don't. You can even have them wrap if you want, but we don't in this case.

So our CSS becomes:

.discussion li {
      display: flex;
    }
    .avatar {
      width: 40px;
    }
    .avatar img {
      width: 100%;
      display: block;
    }

Deliciously easy.

The Switcheroo

I'm sure you noticed the flip-flop design. Messages from others have the avatar on the left, messages by you have the avatar on the right. Again, do-able with floats but kinda janky. Flexbox makes this extremely easy.

In our markup, we put the avatar first, so that will be the default ("other people"). In list items with the class name "self" (our own messages) we'll switch the order of layout.

.self {
      justify-content: flex-end;
    }

WELL THAT WAS EASY. But wait. It's not just the horizontal alignment that switches, it's the vertical alignment too.

Floats would never be able to help us here. Things would get freaky with some placeholder elements and absolutely positioning and who knows what. With flexbox...

.self {
      /* switch horizontal layout */
      justify-content: flex-end;
      /* switch vertical layout */
      align-items: flex-end;
    }

Wipes hands.

The Message Bubble Triangles

This has been covered a million times, so I'll keep it brief. You can make triangles in CSS with zero-width zero-height elements and borders. The borders on elements will meet each other at an angle. So if one is colored and the other is transparent, it will look like a shape.

Here, we'll color the top and right borders, and leave the bottom and left borders transparent. This makes the type of triangle you see here:

.other .avatar::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border: 5px solid white;
      border-left-color: transparent;
      border-bottom-color: transparent;
    }

Then just switch up the positioning of it and which borders are colored for "self" messages:

.self .avatar::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border: 5px solid white;
      border-right-color: transparent;
      border-top-color: transparent;
    }

The message bubbles have little box-shadows under them. We didn't cover it, but you can see in the demo. In the "self" messages, the triangle meets the bubble where the shadow is most pronounced, so it looks weird if it's not there. We can apply the shadow to it to fix it.

.self .avatar::after {
      box-shadow: 1px 1px 2px rgba(black, 0.2);
    }

The Demo

Check out this Pen!

¹ Here's a couple of more resources on radial gradients: Impressive Webs, Web Directions

² I went totally un-prefixed and new-school with all the flexbox stuff in this article, Here's some resources on that: CSS-Tricks, Dev.Opera. It's a good time for flexbox right now. IE 10 has a prefixed semi-old version, but IE 11 will be un-prefixed and new. Firefox has supported various versions forever but will be un-prefixed and new in 22 (late June 2013). Safari has old version prefixed in 6 but going unprefixed and new in 7. Chrome has new verison prefixed but is unprefixing in (30?). iOS and Blackberry are prefixing, but at least new syntax. Android at least has old prefixed version.

Replicating Some Of Google Hangouts Chat Design is a post from CSS-Tricks

Rebecca Murphey with tips on speaking. While posted on “Ladies in Tech,” the advice is good for anyone.

I’ve learned that my ability to give the “elevator pitch” for a talk is a great measure of my preparedness.

Direct Link to Article — Permalink

Speaker Notes is a post from CSS-Tricks