http://www.fragmentlabs.com/ en robert@fragmentlabs.com Copyright 2010 2010-08-26T17:43:17+00:00 http://www.fragmentlabs.com/site/laymans-guide-to-web-typography/ http://www.fragmentlabs.com/site/laymans-guide-to-web-typography/#When:17:43:17Z For those of  us who, on a daily basis, deal with having to either design or recreate a design for the web, the use of "web safe" fonts is a big deal. Through the years there have been a couple of ways to include non-safe fonts but until recently there hasn't been a great solution for doing so in a way that is free of a third party "plugin."  In this post I'm going to outline just a few ways to access more unique typefaces for use online and then wrap up with a short rant about web typography in general.  Here we go.For those of  us who, on a daily basis, deal with having to either design or recreate a design for the web, the use of "web safe" fonts is a big deal. Through the years there have been a couple of ways to include non-safe fonts but until recently there hasn't been a great solution for doing so in a way that is free of a third party "plugin."  In this post I'm going to outline just a few ways to access more unique typefaces for use online and then wrap up with a short rant about web typography in general.  Here we go.In the beginning: Old school "plugins"     At first the web was bleak.  Basic serif's like Georgia and Times New Roman and sans-serif's such as Arial and Helvetica owned everything that could be read.  A designer's typographic expression was limited to the typefaces that could be accessed on the USER's computer.  A browser's ability to render the typeface's correctly was minimal and support for "baked in" use of fonts was sparse.  Things were simpler then.  Choices were generally made in favor of the basic typefaces in order to have the user view the design accuratly as it was intended to be viewed. Then came a solution...of sorts.  Image replacement or flash replacement scripts were some of the first ways to use any desired typeface.  Projects like SIFR and FLIR, while being different from each other, began cropping up with the best intentions.  The idea was simple and the execution was complex.  SIFR aimed to replace content that was held within certain html tags with styled text that matched the desired typeface.  The immediate problem this approach became apparent as those who didn't have the third party flash plugin would not have the page rendered correctly.  Likewise FLIR, which instead replaced the content with images rather than flash, was seen to be inefficient as the text wasn't able to be selected and therefore couldn't be considered "semantic."These methods are still available to anyone who so desires to use them.  However, with their clear hindrances they serve a better purpose in the history of web typography by highlighting a need for a better solution rather then being the solution themselves.  So web typography evolved.@font-face:@font-face represents both the renaissance and the modern era of web typography.  @font-face is a CSS selector that is not unique to CSS3 but has been a part of the spec since CSS2 included in the CSS Web Fonts module.  It was included in the CSS3 fonts module and has risen to the surface as the current savior of web typographic freedom.The basic premise of the @font-face selector is that the user can now access the needed fonts from a given location specified in the @font-face declaration.  In a nutshell this means that the user no longer needed to have the typeface loaded on their machine to view the desired typeface.  Instead, the font could be stored on a server somewhere and accessed in one of a couple of different formats and displayed correctly for any user.  Before getting into the obvious problems with font-licensing and font-creation I'd like to highlight some of the current popular methods for using the @font-face rule.TypeKit (www.typekit.com)TypeKit is a service that allows users to access their personal libraries of fonts and include the typeface in their projects.  With a paid subscription TypeKit allows access to their proprietary typefaces for use on your site.  This service comes at a cost but represents the current and most popular use of the @font-face rule.Typotheque (www.typotheque.com/webfonts)Like TypeKit, Typotheque allows access to their library of fonts through a paid subscription.  The levels of subscription and amounts differ from TypeKit.Fonts Live (www.fontslive.com)Fonts live is again similar to the services above and offers unique plans.  Once a font is purchased everything the user needs to implement it on their site is included in a download.Google Font Directory (code.google.com/webfonts)Google font directory represents a different approach with the @font-face rule.  Instead of purchasing and downloading a font to be used by the creator of the site it instead provides the hosting for the fonts themselves.  Google requires one line of code to be placed into the head of the document and then in the Style Sheet the font-family selector can access whichever typeface the creator wants from the Google Font Directory.  The selection is limited but this does represent one of a few free solution for including unique typefaces into web projectsKernest (www.kernest.com)Kernest is almost identical to the Google Font Directory approach with its own unique and free directory of typefaces that can be used.All of the solutions listed above represent the most current use of the @font-face rule in CSS and the most up to date way to use unique typefaces in modern web design.  However there is a slightly ugly side to this technique.Stealing?Typefaces are difficult to make.  They can take years to develop and a lot of hard work goes into making a quality typeface.  For this reason font foundries are not likely to license their property, the typeface, to users for no compensation.  It is only right that those who use the typeface are willing to pay what the creator of the typeface requires.  Where this becomes important in the web world is when font kit generators such as FontSquirrel (<a href="http://www.fontsquirrel.com/fontface/generator">www.fontsquirrel.com/fontface/generator</a>) are taken advantage of.  The font kit generator will allow any font that is uploaded to be packaged into formats for use on the web.  This means that any font can be used with the @font-face rule whether legally or illegally. Sketchy.The evolution of web typography is one that should be important to any web designer or front end developer.  The ability to extend past the basic serifs and sans-serifs has opened many doors for designers.  It is our responsibility to use the given tools correctly and ethically and to continue in the tradition of web typographists (made up word). 2010-08-26T17:43:17+00:00 http://www.fragmentlabs.com/site/confessions-of-the-check-in-queen/ http://www.fragmentlabs.com/site/confessions-of-the-check-in-queen/#When:13:19:49Z This afternoon one of our developers got an interesting e-mail. It was from a woman who so kindly asked him to give her one of his Gowalla badges from his account that had been inactive for 6 months. Of course he agreed, but not before we could have a little fun with her first. He kindly agreed to give her the badge if she would be willing to answer 8 questions about the service and how she uses it. We gained some interesting insights from a faithful user and she said she was more than happy for us to share them. So here they are, for your reading pleasure... The Confessions of the "Check-in" Queen aka "The Gowalla Balla":1. Explain how YOU use Gowalla and tell us how frequently you check in.  I usually only check in at new spots to make my count go up... a bitof a competition with my friends. I commute 102 miles every day, so Ipass a lot of spots, but my frequency of check-ins has slowed fromabout 1000/week to about 200/week as there are fewer and fewer 'new'spots I encounter. On the rare occasion I get to travel, I check-in toas many spots as I can. 2. What are the best offers/deals that you have come across using a location based service? Did you participate to receive the special? Since I've been playing, the best deal was checking in at Best Buy towin an Eye-Fi card. I did participate, and I won. Well worth the tripin the car for this specific item. 3. What are the top five types of locations you visit on Gowalla and how frequently do you visit them? a.) Apple Stores (I used to work at the Apple store - AND - I'm a Macaddict) - at least once a weekb.) Starbucks/Coffee - at least once a weekc.) Office (5 times a week - when I'm at work)d.) Electronic stores (in addition to Apple) - I'm a geek, what can Isay? - at least once a weeke.) Greek restaurants - gotta get my Tabbouli on... about once every 2 weeks. 4. How many of your friends and family use Gowalla? Do you ever have competitions or play games with other users? My husband and several (at least 10) of my former Apple co-workersplay Gowalla. The competition is friendly - we encourage each otherand help each other find spots... but I do secretly want to beat themall on the leaderboard. 5. Do you feel that more businesses could benefit from using Gowalla? If so, tell us why. In this economy, it's hard to get people into stores that do not havethe staples everyone needs. Discretionary income is not a common thingnowadays... but people still treat themselves. Any company providing aproduct that people may not be aware of can really spread the word byoffering specials to Gowalla users. I think most Gowalla users aregoing to be tech-savvy as one thing they will all have in common...but as more and more people who don't necessarily consider themselvestech-savvy acquire iPhone, Palm OS, and other smart phones, evennon-tech companies may benefit from tie-ins with Gowalla. As for me -I didn't even know there was a Best Buy anywhere near where I livenow... so I have another location to look for deals on hard drives,etc. 6. If you could create one badge for Gowalla that didn't already exist, what would it be and why? Virtual badges to represent those earned by boy scouts and girl scouts- based on locations such as BS & GS Headquarters and camp facilities.Why? I was a girl scout for 7 years - in that time, I only earned 4badges because my parents would never let me out of the house or takeme anywhere. Now I can travel, but am too old to earn the badges I missed out on.7. When you explain to people that you just "Checked in" at a location, how do they normally respond? My Gowalla friends know I rapid-fire check-in everywhere I go - sosometimes I'll get a message like, "You're a machine!" I only share onfacebook when I take a photo and/or there is something I really wantto share w/ my friends about where I am. I am typically asked, "how isthe food?" and "how much does it cost to eat there?" and sometimes,"Oh, I LOVE that place!" as comments under my facebook posting. 8. If you could add anything to Gowalla, or location based "Check in" games, what would it be? I do not see a benefit to adding friends to Gowalla other than sharingwith people (sometimes people I barely know) where I've been and thatmy house is unoccupied. If there was a way to truly compete, therewould be more incentive to add friends. Since I've become moreaddicted to Gowalla, I've found myself actually removing some friendsthat I had added earlier when I started playing. We'd like to thank our friend for being a good sport. She is now the proud new owner of a Rocket Ship Badge and I don't think she could be more happy. As for us, I think this shows us that there are opportunities out there to engage our customers and build brand loyalty that some of us are not seizing. It is important to offer your client every opportunity to be noticed, and offer a solution that is successful from all perspectives. With social media being so big right now, more imporantance is being placed on quality one-on-one interactions. How does your brand stack up? 2010-07-08T13:19:49+00:00 http://www.fragmentlabs.com/site/its-july-and-first-friday/ http://www.fragmentlabs.com/site/its-july-and-first-friday/#When:15:40:17Z This months first friday brings a different kind of art to Fragment.  Jaclyn Anthony Designs joins us with a unique look and feel of custom handmade jewelry. Jaclyn Anthony Design’s inspiration is derived directly from Jaclyn’s childhood sensations. From an early age she was fascinated with her father’s draft and design of architectural structures, and learned from his attention to detail. Her Grandfather’s bar-based business bartering and world travels allowed Jaclyn to see jewelry design from diverse populations. “From an early age, the overwhelming awe I felt when wearing my mother’s jewelry consumed me with emotion, this is what I want for my wearers.” Jaclyn studied textile composition and period dress in college. She has worked with various mediums before focusing her efforts in jewelry design. Jaclyn’s collections combine mechanical inspirations and a lust for nature through forged metals and hints of natural shapes and forms with accents of fabrics and various mediums. Fun Stuff 2010-07-02T15:40:17+00:00 http://www.fragmentlabs.com/site/in-remembrance-of-social-media-day/ http://www.fragmentlabs.com/site/in-remembrance-of-social-media-day/#When:18:50:06Z June 30th was officially the first "Social Media Day" around the world. Twitter was abuzz with people wishing each other well in honor of the "holiday" and there was an abundance of articles from all the new social savvy sites who were attempting to define why social media was deserving of a holiday. The most popular social media blog, Mashable, addressed yesterday as follows: "Today we acknowledge and celebrate the revolution of media becoming social. A day that honors the technological and societal advancements that have allowed us to have a dialogue, to connect and to engage not only the creators of media, but perhaps more importantly, one another." This explanation seems to me to be more social media propaganda. After all, the underlying theme of social media lately seems to be the lack of security and privacy provided by these networks, not how well it has allowed us to communicate. Although I have gotten in touch with the guy who used to pick his nose back in elementary school, I can probably count on one hand how many meaningful conversations I have had over any social networking site. Don't get me wrong, I enjoy facebook, I have a twitter account, and I used to work for a social media company, I just don't feel that social media is deserving of a holiday. I don't think I can say it any better than a friend of the company posted on twitter yesterday: "Special days are for deserving causes (Earth Day) or for people/milestones to be honored (MLK Day). Neither applies to Social Media."- John Lane It's hard not to agree with that statement. I guess I would be more for an event such as this if there was a social network out there where I felt like meaningful conversation was encouraged, a network where I could communicate with my friends about the stuff that's going on between us, without all the noise offered on twitter and facebook. Now that's just one man's opinion. We here at Fragment want to hear your opinion. Did you celebrate the Social Media holiday? Do you think it was just as ridiculous as I did? Leave your comments below. 2010-07-01T18:50:06+00:00 http://www.fragmentlabs.com/site/our-take-on-mobile-advertisings-take/ http://www.fragmentlabs.com/site/our-take-on-mobile-advertisings-take/#When:14:18:13Z As I was doing a little research trying to find a subject for our next blog topic, I came across a subject that I found quite interesting: Mobile Advertising. The most shocking statistic that I came across was that mobile advertising revenue was expected to reach $32 billion dollars a year by 2015. For a little comparison, in 2014, newspaper advertising should be somewhere around $31.9 billion according to the New York Observer.I feel that this is a good topic of discussion due to the timely release of two new cell phones, promising a revolutionary new way to think of your mobile device. The Sprint Evo 4G and the iPhone 4 are slated to be the two most powerful phones to hit the mobile market to date. Both of these phone are introducing a slew of new features, one of the larger of these being video chatting. What really concerns me about this is that as we start to add bigger and better features to more powerful and capable phones, we as a culture become more reliable on our devices for our every day lives. Now trust me, I can be just as big a phone geek as the next guy, but as we begin to consume more and more media on these devices, the Advertisers are following suit. And guess what... it's working. According to a survey from Mashable done with women about their mobile habits, 84% said that they have noticed mobile advertising, and 57% admitted to clicking on it.    With the introduction of iAds, what Apple intends to do is create a more engaging experience for advertising on the mobile platform. While I am excited to see that advertisers might actually invest a little more now in getting my attention on a mobile device, I still am not sure how I feel about advertising entering this space. I know that while you may successfully engage me, I still feel it's a stretch for me to actually buy something I wasn't specifically looking for. Maybe we will see a lot more targeted ads, or even more ads using location based services. I just ask, that to all the companies out there who are doing mobile ads, please enter this space with caution as it presents a powerful medium for communication.Now that's just one man's opinion. We here at Fragment want to hear your opinion. Have you ever clicked on a mobile ad? Do you find them annoying? Would you ever consider a product you saw advertised on your mobile device? Leave your comments below. 2010-06-18T14:18:13+00:00 http://www.fragmentlabs.com/site/from-school-into-the-business/ http://www.fragmentlabs.com/site/from-school-into-the-business/#When:14:41:23Z Going through design school is a great place to how to design properly, but it teaches you nothing about having a job in design.It comes down your experience and the type of person you are. One of my professors said "Your portfolio alone is not going to get you a job, it's going to get you a conversation with a person that is seeing if he/she wants to hire you.” He is absolutely right. When you are a student there is so much emphases on your work that you get very attached to it and want to show it to the world in hopes of it landing you a job. But once you are out of school you realize that good design work is very common, and suddenly your portfolio that you worked so hard on doesn't seem so special anymore. There is plenty of pretty work out there; it is more about the person that did it. Learning to work for a client is something only first hand experience can teach you. When I was in design school, I spent a lot of time on the development and exploration of my ideas. You brainstorm, sketch, and experiment in different directions and see how far you push your concept. Learning the process is more important than the final product. It's quite the opposite when working on a client's time. Rarely are they going to pay for you to play around with ideas. Normally, they already have the idea and they only what you to make it—that's it. Having ideas flowing out of you ears is great, but sometimes you have to put on the 'design blinders' because they are paying for a professional. When joining a company, it is so important to learn how everyone functions as a whole. Lots of companies in the design industry are built on a very personal and custom business model. It’s a very organic environment and what works in one shop, won’t always work at another. Because you work so closely with people you need pay attention and make sure the chemistry is good and that you are building positive relationships. Creative people in general, especially designers, can be stubborn and it’s easy to start slipping into the mindset that your ideas and methods are the best. That’s fine if you are working on your own projects, you should think that they are awesome, but you are part of a team and there might be a possibility that somebody knows how to do something better than you. Design school is very much about you and your own growth. It can show you things that you never thought you could do. Working for a company is when things start to fall into place and all that hard work in school starts to pay off. 2010-06-02T14:41:23+00:00 http://www.fragmentlabs.com/site/men-its-time-to-talk.-beards-and-business/ http://www.fragmentlabs.com/site/men-its-time-to-talk.-beards-and-business/#When:15:17:34Z There was a study published fairly recently about the trustworthiness of a man based on his facial hair.  The study published in The Journal of Marketing Communications found that men with medium length neat beards were more effective at gaining the audience’s trust for most products.  How can we apply this knowledge to what we do in our businesses?  Should we immediately begin growing our manly beards?  Does this mean we don’t have to shave daily?  What if I can’t grow a beard?  I’ll explore these questions and draw some conclusions based on this new knowledge.History paints a pretty clear picture of how beards were viewed and what they stood for.  The beards journey began swimmingly with the beard being widely adopted and viewed as a sign of positive attributes such as sovereignty, dignity, wisdom, sexual virility and high social status.  It wasn’t until shortly after the enlightenment in Europe that the beard’s reputation began to turn.  The beard became less popular and even had a tax levied on it in Russia around 1705. In our modern business setting there is no rule governing the adoption of beards by businessmen. (I should state now that I am limiting this discussion to men’s beards.  I don’t believe woman’s beards have ever been popular.) However, with a simple scan of a busy downtown street in the business district of any town or city one might notice that the preference is for smooth cheeks.  I believe that this is a fad that needs to change. With this study being published it is now time for beard wearers to take their place among the businessmen.  The study pitted men with beards and clean-shaven men and found that the man with the beard was perceived as more trustworthy and knowledgeable about their product.  For businessmen this should be the key factor as these are among the two most important traits when discussing business deals.  Perhaps in your next proposal an image of you with a beard or a mention of how your company feels about beards will win the job. Here at fragment we have begun to uncover the value of the beard and are beginning to incorporate more beard onto our faces.  I can only hope that by this reading you would decide to do the same as we strive for a more beard friendly workplace. So to answer some simple questions, Yes we should immediately begin growing beards, No you don’t have to shave everyday, and if you can’t grow a beard…good luck to you in our new bearded business landscape. Thoughts? Resources Beard History - http://en.wikipedia.org/wiki/Beard Published Study - http://chronicle.com/blogPost/The-Trustworthiness-of-Beards/22581/ Beard Diagram as relating to trustworthiness - http://i.imgur.com/PHmF5.jpg Song about beards - http://www.youtube.com/watch?v=_O7PXeuLYIw 2010-05-26T15:17:34+00:00 http://www.fragmentlabs.com/site/building-fragmentlabs/ http://www.fragmentlabs.com/site/building-fragmentlabs/#When:13:57:51Z Preface This article contains a lot of tech-speak related to our site redesign that might not be interesting to all of our readers. With that being said, bear with me as I try to give an overview of the Fragment site.Beginning Development After settling on a new name and identity, the next step for our rebrand was our web presence. All of the design was handled by Robert and Wes. After the initial templates were complete, I began building the site. Here were the requirements I faced: Content on the site should be easy to manage for everyone, not just the code-knowledgeable developers The site should appear to load on one page and use a scrolling effect to transition between "pages" URLs should be search engine friendly Content Management System When it came to picking a content management system for the new site, I immediately knew ExpressionEngine was the right choice. ExpressionEngine is a highly flexible CMS that Fragment uses for most client projects. There is also a vast supply of useful plugins that make managing content easier. Here are some of those plugins that I used on the site: LG TinyMCE allows easy integration of the Moxiecode WYSIWYG editor TinyMCE as a new field type. TinyMCE allows users who may not be familiar with code to properly format posts and content. FieldFrame is practically a necessity when it comes to EE sites. FieldFrame extends the default field options to allow custom FieldTypes ranging from file upload fields to multi-select boxes. One exceptional FieldFrame is FF Matrix, which allows for easy creation of content galleries (like the photos used in the Work section of the site.) LG Htaccess is a small, but incredibly useful tool. It creates a dynamic .htaccess file that updates whenever you add a new template or template group to ExpressionEngine. This keeps you from having to update the .htaccess file every time you add a new template. Using ExpressionEngine also gives us a chance to "eat our own dogfood." Using the Fragment site as an example, we can demonstrate the wide variety of sites that can be created within this content management system to our clients. AJAX-ifying The most unique feature of the site is the scrolling effect. To achieve this, I needed to use quite a bit of JavaScript and AJAX. There are several popular JavaScript libraries available to use, but I turned toJQuery as our solution for this project. I was able to scrounge up some excellent JQuery plugins that helped us meet our goals, including: Backstretch created the image as background effect ScrollTo was used for moving the viewpane around the page. jCarouselLite helped us with the work galleries. In addition to the plugins that were used, I also had to create quite a bet of custom AJAX calls to load all of the content on the site dynamically. When a user lands on the homepage, the introduction content and background images are the first to load. If the user has JavaScript enabled, each of the subsequent pages is also loaded. The same thing happens on each of the other pages - the initial content is loaded and then each subsequent page is loaded in the background. This allows the ScrollTo plugin to move around the page without having to wait for new pages to load. If the user does NOT have JavaScript enabled (for example, if the user is actually a search engine crawler) the other page content will not load. This keeps irrelevant or duplicate content from appearing when the crawler visits the site. Conclusion Hopefully this gives you a sense of the technology I used to create the site. Please leave a comment if you would like me to expand on any of the topics I discussed above, or if you're curious about any other portion of the site!   2010-05-20T13:57:51+00:00 http://www.fragmentlabs.com/site/refresh-the-triangle-27/ http://www.fragmentlabs.com/site/refresh-the-triangle-27/#When:15:57:13Z This month Fragment hosts Refresh the Triangle #27 -Learn to Speak Interface: Creating Conversations Between Developers and Designers.   If you're a developer (or a designer) you should probably attend. The speaker is Jess Martin of Relevance.    You’re a developer. You write code. But your users don’t see your code. They only see the user interface. We’re going to have a conversation about how to think through your product’s user interface. We’ll focus on a few analytical techniques you can use to analyze your user interface and to communicate with a designer.   The Speaker:Jess’s fascination with rapidly prototyping products led him to building applications for the web where he contributed to several startups. 60% developer, 40% designer, and 100% ninja, he brings a singular focus on the end-user to any product he works on. Jess is a principal at Relevance.   RSVP: http://upcoming.yahoo.com/event/5797916   Location: Fragment Labs 226 Fayetteville Street Raleigh, NC 27601 2010-05-14T15:57:13+00:00 http://www.fragmentlabs.com/site/first-friday-with-fragment-may-2010/ http://www.fragmentlabs.com/site/first-friday-with-fragment-may-2010/#When:20:51:18Z Its First Friday again! Time to get out and get downtown! Friday is set to be beautiful weather! This month for first friday we have a two-for, great art and the winner of our "Your Piece of the Window" contest's design is revealed. This months featured artist is Mary Alice Boliek. A little about Mary: I picked up a paint brush about 10 years ago just to see what would happen. I not only found a great therapy but I also found a passion. I have never taken an art class outside of public school system so I really just paint what I feel.Once I realized that people actually enjoyed my artwork and people were willing to pay for it I knew I needed to do something good and right with my art. Now I am turning my passion for art into helping others. I have pledged to raise $20,000 through the sale of my paintings to help raise funds to house orphans through the Global Orphan Project, a not-for-profit organization committed to caring for orphaned and abandoned children living in poverty around the world. Half of the proceeds of any work sold will be donated to the Global Orphan Project.  Check out Alice's Work at: http://sevenmajordaysies.comPlease come join us in Downtown Raleigh at 226 Fayetteville St. from 6:00 - 9:00.  We'll have drinks and Jimmy Johns, and we're surrounded by great places to eat (most of which have first friday deals). http://www.facebook.com/event.php?eid=120773214615409 Fun Stuff 2010-05-06T20:51:18+00:00