    
|
It’s time for another issue of the Teacher Spotlight, where we interview one of the Treehouse Teachers so you can get to know them a little better offscreen, and enjoy a sneak peek into their story, their inspirations and what makes them tick.
This month the spotlight is on front-end designer and Teacher, Guil Hernandez. In this interview, Guil talks about his past, his passion for design, what brought him to Treehouse, and what he’s looking forward to for the future.
When did you first become interested in front-end design?
I didn’t know much HTML and CSS right out of college. I did a lot graphic design work at first, designing logos, ad creative, and Photoshop mockups. I also did a lot of Flash work back then.
It wasn’t until I had my first full time job in the web industry that I learned to code. I would stay up all night doing tutorials and reading books so that I wouldn’t be completely lost the next day at work. But I really liked it, so I stuck with it.
After that, I became really interested in front-end design because I discovered how powerful designing with code could be, and on top of that, being able to add those layers of functionality and interactivity with JavaScript or jQuery.
How did your career evolve in the web industry?
At first, I dabbled in freelancing until I got hired at a startup in South Florida where I helped design rich media creative and a lot marketing websites and landing pages.
I guess they liked the work I was doing––the late night studying paid off––because I was later put in charge of the design department.
Soon after, I moved on to a different agency because I wanted to do more front-end work for websites and applications. Meanwhile, I was also taking on loads client work on the side. It was pretty exhausting, but that’s how I really honed many of my front-end dev skills.
Again, I must have been doing OK at work, because later, I earned the opportunity to lead the design team. My last year there kept me really busy with mobile design & development, and front-end performance projects.
What brought you to Treehouse?
I knew all about Treehouse and their mission to change the world through technology from the very beginning––since the day they launched as Think Vitamin Membership.
I really wanted to be a part of tech education and helping people. The moment I realized that I could play a part in changing people’s lives by teaching them how to code, I knew that’s where I had to be.
Fortunately, I’ve already seen some of our members’ lives change since I’ve been at Treehouse. It’s very rewarding. There’s no doubt this is the best industry to be a part of right now.
How do you balance being a teacher and a designer?
The 4-day work week helps and I tend prioritize a lot. I understand that I need to set aside time for personal design and front-end dev projects in order to stay sharp and be a better teacher.
Lately, I’ve been spending most of my work time writing and refining content, coming up with cool projects to teach, and seeking ways to improve teaching efficacy. I also spend a lot of time in CodePen experimenting with stuff.
With so many conferences on the calendar at the moment, which design conferences would you recommend?
I recently attended Front-End Design Conference in St. Petersburg, FL. I’d have to say it’s one of my favorites at the moment––they do a great job. I’m also interested in attending the upcoming Circles and Blend Conferences.
Design conferences are the best way to meet people who share your love for design, technology, and the web. You come out of them recharged with inspiration and possible lifelong friends. I highly recommend attending at least 1 or 2 conferences a year.
Who are some of your favourite designers at the moment?
I’ve always admired Ryan Singer’s approach to UI design. He got me really interested in learning about the mechanics of interfaces: breaking things down into simple functions (or tasks) that enable users to create outcomes they want.
Also, Lea Verou, she is a CSS artist. Her projects and presentations continually push the capabilities of CSS. She does unimaginable things with such simplicity––a true forward-thinker.
Other designers and developers I follow are Daniel Burka, Jessica Hische, Paul Irish, and Cameron Moll.
What is the most valuable advice you would give Treehouse students who are interested in front-end design?
Focus and practice a ton. It doesn’t come easy, so you’ll need to push yourself.
If you find yourself trying to wrap your head around a difficult concept, write about it. You’ll be surprised how synthesizing your thoughts into writing can bring clarity to something.
Try things that scare you. That means stepping out of your comfort zone – it will always be there for you. Make the best out of every opportunity – big or small.
When learning to design, imitate the masters. There’s nothing wrong with doing that as long as you develop your own style.
The most important thing is to pay close attention to the details in everything you do: writing, coding, designing, etc… You’ll soon find out how truly rewarding it can be.
Are there any new techniques or technologies you’ve been excited about lately or are looking forward to later this year?
I’m really excited about how CSS preprocessors like Sass have made writing CSS so much fun and efficient. I think it’s time we all embrace preprocessors in some way, even if it’s just for the variables feature, nesting, or dealing with those pesky vendor prefixes.
I’m also looking forward to using many of the new CSS features like flexbox, filter effects, and the upcoming CSS Shapes module as fully implemented web standards.
Finally, I’m totally pumped about the future of tech education. There is a lot of work to be done and archaic education models to disrupt.
Tell us something about yourself you don’t think anyone would ever assume!
Long before I knew what a code editor was, I was a musician. I played trumpet for over 10 years. I even received a music scholarship and performed in front of hundreds (sometimes thousands) of people throughout the years. It was a lot of fun.
The post Teacher Spotlight: Guil Hernandez appeared first on Treehouse Blog.
]]>|
|
|
|
|
|
|
|
|
|
 |
If you’ve spent the last few months under a rock, then we’ve got a surprise for you. We are working on two brand new Smashing Books. The first, New Perspectives on Coding, will cover state-of-the-art techniques, case studies and coding strategies — all neatly packed into a gorgeous printed hardcover (and available as an eBook, of course).
So if you’ve always wanted to leave a trace of yourself to posterity, now you can (well, kind of). From the very first Smashing Book, we’ve reserved space to feature our readers in the book, and our fourth undertaking will be no exception.
A picture says more than a thousand words, and a Twitter avatar says more about one’s personality than a name ever could! So, following our tradition, we welcome you to submit your Twitter avatar for a double-page spread in the (printed and digital) book. Space is very limited, with only 750 slots available, so please be quick!
Presto! And if for some mysterious reason, you happen to feel like a Jedi afterwards, well, why not tweet about it using the hash tag #feellikejedi? No pressure: just sayin’!
We’ve assembled a remarkable lineup of authors for the book. All of them are well-respected designers and developers who will be divulging practical insights, design strategies and hands-on tools as they share new perspectives on Web design today. Here is a quick summary of the book’s theme and table of contents.
What works in theory sometimes doesn’t quite work as expected in practice. In this pragmatic book, well-respected designers and developers analyze their personal experiences, failures and successes from working on common front-end issues, and share the tools they use to tackle these issues effectively. You’ll learn state-of-the-art techniques and strategies to make your workflow more effective.
The book will feature valuable insights into large-scale projects, front-end architecture, maintainable code and responsible responsive Web design. It will also uncover smart front-end strategies, CSS and JavaScript tricks and obscure back-end techniques, and it will explore what it takes to improve performance for faster and more robust websites and Web apps.
| AUTHOR | CHAPTER | DETAILS |
| Addy Osmani | Rendering Performance Optimization For Mobile | |
Whether it’s on desktop or mobile, users want their web experience to be snappy, smooth and delightful. What this means is that even if the browser is busy rendering the page (i.e drawing it) or loading in content, the user should still be able to scroll around and interact with it without any slow-down. No one likes seeing visual glitchyness. In this chapter, Addy Osmani, the mastermind behind Yeoman and Devtools, provides a walkthrough on how to find and fix visual jitter in your pages. If you care about providing fast and smooth experiences, you will care about this chapter, too. Keywords: tools, techniques, strategy, workflow, optimization, rendering. |
||
| Harry Roberts | Breaking Good Habits: CSS Architecture For Tomorrow | |
 The Web is changing. Are you keeping up? We’ve outgrown the methods of yesteryear and it’s now up to us to update the unwritten rules of web development to fit the new landscape. This chapter explores some misconceptions about CSS, encourages a change in attitude in front-end development, explores practical approaches of and lessons learned in object-oriented CSS development, code structure, code management, naming conventions and verbosity of HTML.
You’ll explore a new frame of mind that is better equipped for building more powerful, pragmatic front-ends. Chapter keywords: CSS, OOCSS, BEM, architecture, strategy, semantics, code structure, front-end, naming conventions, performance. |
||
| Nicholas C. Zakas | The Roadmap to Maintainable, Clean and Effective Code | |
 Code is code no matter where you go, and code has a tendency to get messy as it gets large and old. What if you need to make changes? What if you didn’t anticipate the additional features that would be required? What if the project ends up going in a different direction? Can your code adapt?
We are rarely taught how to deal with messy code. However, someone is going to have to maintain that code. That someone might be you next month or it might be someone else next year, but someone eventually will need to maintain that code. On a large project with many developers, the problem is magnified. How can everyone work in the same code base in such a way that making changes in the future are easy? That’s what this chapter is about. Chapter keywords: maintenance, architecture, conventions, code style, documentation, components, legacy code, testing, CSS, JavaScript. |
||
| Tim Kadlec | The Culture of Performance | |
 The Web has a serious weight problem and the users are the ones who suffer as a result. The impact of improved web performance is no minor detail: by caring a lot about how fast our websites and applications are, we can explore new markets, gain increased revenue, improved business metrics and better user satisfaction. But how do we bake performance into the design process? We must make performance part of the discussion from the very beginning of the process, and we must be concrete about it.
Chapter keywords: performance budget, optimization, speed, efficiency, mobile, latency, loading, rendering |
||
| Paul Tero | How To Fix The Web: Obscure Back-end Techniques And Terminal Secrets | |
 Imagine that you wake up one morning, groggily reach for your laptop and fire it up. You’ve just finished developing a brand new website and last night you were proudly clicking through the product list. The browser window is still open, the Widget 3000 is still sparkling in its AJAXy newness. You grin like a new parent and expectantly click on “more details.” And nothing happens. You click again, still nothing. You press “Refresh” and get that annoying swirling icon and then the page goes blank. Help! The Internet is gone!
This chapter starts with the worst case scenario and works inwards, exploring the infrastructure of the Internet and the make-up of a Web server, imparting lots of little tips and commands along the way, opening up a new perspective on how websites can stop working and be fixed. Chapter keywords: back-end, DNS, servers, networking, infrastructure, SSH, firewalls, DOS, hacks, debugging, backup, Apache, security. |
||
| Aaron Gustafson | Building Adaptive Interfaces | |
 To create truly exceptional designs, we must not only reduce the friction inherent in completing a task, but we must reconcile aesthetics with usability by designing adaptive interfaces. Smartly built interfaces offer a continuum of experience. So what if we architect our interfaces to adapt to the capabilities of our user’s devices in order to ensure a positive experience, even if it’s not an identical one?
In this chapter, Aaron explores the layers of a typical Web experience and breaks down the development process into manageable steps that enable accessible, functional and empathetic interfaces. He also describes his own process and various techniques that help him to achieve this very goal in daily routine. Chapter keywords: adaptive interface, progressive enhancement, empathy, layer cake, constraints, lazy loading, UI Construction Flow, JavaScript, adaptive components, patterns, style tiles |
||
| Mat Marquis | Robust, Responsible, Responsive Web Design (Filament Group’s Case-Study) | |
 Responsive Web design is starting to get a reputation, and not the kind of reputation that it rightfully deserves. The most common death knell we’ve heard ringing out—lately, anyway—is that every page of a responsive site is fated to weigh in at a couple dozen megabytes and there isn’t a single thing that any of us can do about it.
There are good solution though. We can’t blame responsive Web design for mistakes that we, developers, have been making. This is on us, and you don’t see any carpenters writing blog posts about how hammers are a failed methodology because of the time they dropped one on their foot. We can do better than blaming our tools for our mistakes. This chapter is about exactly that: tools, techniques, lessons learned and practical tips to manage responsible responsive designs in real-life projects. Chapter keywords: Responsive Web design, responsive images, conditional loading, progressive enhancement, optimization, CSS, JavaScript, workflow, optimization, case-study. |
||
| Andy Hume | Real-Life Responsive Web Design (The Guardian’s Case-Study) | |
 Ensuring good cross device and cross browser experiences has always been a thing, but browsers adoption of media quieries solved a key problem and let us jump forward very fast. This chapter looks at some lessons from implementing on Guardian and discussions with others like BBC, Boston Globe. In a world where the number and diversity of browsing platforms is increasing every day these orgs understand the value of having one platform and codebase for delivering their web products.
Chapter keywords: Responsive Web design, optimization, performance, RESS, case-study. |
||
| Christian Heilmann | Vanilla Web Diet | |
 When we go out and use our mobile devices or wireless that is available in cafes and hotels things don’t look as bright as they do on our incredibly fast connections at home. There, the larger part of our time is consumed looking at spinning animations telling us something is loading and many a time we are being told that “the connection is wonky” and that we should try again.
That’s a sign of the Web being broken. It’s time to fix it. Let’s try to take a break in our drive to be cool and new and innovative the whole time and check out what we are doing — analyze our eating habits so to say. Christian Heilmann calls this the “Vanilla Web Diet,” much like people start calling using JavaScript without any libraries “Vanilla JavaScript.” This chapter explores some of the fundamental ideas and thoughts that you can apply to slim down your next app or existing solution. Chapter keywords: optimization, performance, speed, strategy, browsers, quality of code. |
||
Authors of the “New Perspective on Coding”, a book about state-of-the-art techniques, strategies and workflow for Web developers.
A tasty early preview of Anna Shuvalova’s beautiful illustrations for The Smashing Book #4: namely, for Christian Heilmann’s chapter “Vanilla Web Diet” on the left, and Mat Marquis’ chapter “Robust, Responsive, Responsive Web Design” on the right. (Large view)
© The Smashing Editorial for Smashing Magazine, 2013.
]]>
The widespread issue of website owners neglecting the value of their web content is a big problem.
We should talk about this problem because, if you think about it, when people go online their primary reason for doing so is to consume content.
To read blog posts, to look at status updates of our friends on Facebook, to read reviews about a restaurant we are thinking of going to, to look at our credit card spending habits through our bank’s website, to learn about something that interests us — these are just some of the common activities we do on the Web.
And these activities are all centered around the consumption of content.
There are some companies that are starting to progressively rethink their strategies regarding web content. This needs to happen more often.
Allow me to go over the importance of a solid content strategy, as well as some starting points for developing your own web content strategy.
In the process of website planning, we all already know that we should:
The focus and widespread knowledge towards the importance of web design, web development, usability, and user experience is definitely positive, considering that only a few years ago most of the meetings I have had with clients had to start with an explanation of what the term "usability" meant.
However, what is missing in these discussions — what is in desperate need of attention — is web content and the creation of a comprehensive and unified strategy for it.
A discussion about web content during planning is often limited to who will be in charge of it. In the best of cases, sometimes there will be discussions about SEO or social media marketing of content.
Most of the time, that’s it. And that’s not close to being enough.
In addition to the commonplace disregard of web content in most websites, another big challenge is the coordination and proper design of the content creation process.
In large websites, for example, each website section/department/subdomain might have a different editor working without consulting other team members.
Then, the legal department might also put their two cents in and require the modification of content out of the context of the main objectives, and without considering the entire collection of the site’s content.
Then, after all is said and done, the CEO/client/decision-makers — all of whom always know best — might ask for revisions.
And voila! Instead of a consistent message across the entire site, we have a mishmash of content.
It’s impossible to develop a consistent tone of voice with a content-production workflow like that.
Our web content strategy must be unified, and our content should work together in unison to make a better overall user experience.
Losses that stem from a deficient web content strategy are easy to imagine.
In general, Web users are more discerning and choosy than ever before about the content they choose to consume. A poor user experience with your content will have very little chance of being read by your target audience.
And, let us talk in terms of online marketing and sales: None of your marketing messages will be able to sell a product without being useful and without being well-crafted.
If the content across the funnel is a mess, forget about conversion.
Hard-to-read product descriptions, bad photos, vague purchasing/check-out processes with clumsily written and confusing web copy and UI labels — errors like these will cost your website a lot of lost revenue.
More and more companies are realizing the facts related to the importance of web content and the need for a solid content strategy framework.
One of the best ways to start a discussion about web content strategy is by looking at successful cases.
Looking for case studies on web content strategy, I was able to discover efforts taken by some really big brands and organizations. Here are three of them.
"Content 2020" by Coca-Cola
A great illustration of a well-thought-out web content strategy is the recently announced communication strategy from one of the giants of the business world. Coca-Cola Content 2020 is a far-reaching plan organized completely around content and its flow between the Coca-Cola brand and its consumers.
The fact that such a big player makes up all of the marketing around content is an admirable thing to look at.
The YouTube video discussing Content 2020 is, in itself, proof of the Coca-Cola content strategy’s efficacy: The video attracts attention with its originality, being full of informative details and candidly presenting the change that the concept will introduce.
The result? 300,000+ YouTube views and many enthusiastic comments.
"Create Once, Publish Everywhere" by NPR
National Public Radio (NPR) has developed an inspiring strategy called Create Once, Publish Everywhere.
The concept is simple: Produce content that will be available in all forms of media.
Red Bull Media House
A leading example of a company associated with good content strategy is Red Bull.
Red Bull, an energy drink company, even has its own media house! That is a testament to the brand’s dedication to content.
We can observe Red Bull transitioning from the typical sponsored posts, sponsored reviews, and press releases, to producing their own interesting and enriching online content.
Looking at these examples, we can see a couple of patterns emerging.
Good content is not accidental.
Good content is a result of a good content strategy; a strategy that puts the emphasis on producing valuable, useful, and interesting content.
You should decide right at the start that the primary objective of your content strategy is to meet the needs of users, not the thoughtless promotion of your brand.
Content strategy must be fully integrated with the company’s other processes; it should not be an afterthought.
Good content requires patience and consistency.
Instead of aiming for a spectacular one-time-big-time viral success, it’s necessary to build a solid foundation and plan for the long haul. It can take months, even years, to develop an effective content strategy.
Here is my company’s content strategy development workflow:
I will discuss some key parts of this workflow in just a little bit.
The essential concept behind a good content strategy is that each component of it should benefit the user.
If a certain piece of content does not serve the user, we should remove it or revise it.
The key to effective content-planning may be the 70/20/10 rule Coca-Cola formulated (shown earlier).
According the 70/20/10 rule, we should take the following proportions to creating a body of content:
Let me now discuss some key stages of the content strategy development workflow.
Personas are an effective way to capture the essence of the various segments of the website’s audience based on the information we derive from them. The key to content strategy success, after all, is to understand who our users are and what they expect from us.
Representing target groups in the form of a person’s profile may seem simplistic, but the result will be stuck in the memory of team members and content producers.
For content strategy projects, my company, Symetria, uses a persona template that helps us relationally evaluate key benefits and concerns of a specific persona against the client’s business goals:
Feel free to download the full-size image here.
A clear definition of our customers enables us to analyze how they might prefer to consume web content.
After that is done (through personas), we are ready to prepare for content production.
Content Inventory and Gap Analysis
We can conduct content auditing and gap analysis to see how our current online communication (on the website, social media, email, etc.) responds to the needs of customers.
Content auditing using spreadsheet software. Source: uxmastery.com
The important things to determine at this stage are:
Knowledge derived from these activities will be a strong foundation to work on top of, and will describe the basic guidelines for the content production process.
But this stage is only the starting point to results and deliverables. We now need to move on to production.
Once we are current with the existing content and after we have identified our content’s objectives, it’s time to plot out a strategy for creating content.
Content Maps
To produce harmonious web content you can use a popular technique called content mapping.
Content mapping will answer these questions for you:
Content mapping should be a comprehensive illustration of how a piece of content will affect the content consumer.
Each piece of content should serve a specific task.
This task may be to bring prospects closer to a purchasing decision. It may be to improve customer satisfaction after a purchase has been made. It could be about building a relationship between the brand and the consumer. Whatever task that is, it needs to be identified at this portion of the process.
Content Templates
While the content map shows us the overall relations of different content types and pieces of content, the specific guidelines are defined within content templates.
Content templates are created as we break down the microstructure of each content type, defining goals and rules for every chunk of content.
Content templates serve these functions:
Doing the steps above will give you a solid foundation to build on top of that will set the stage for a good content strategy.
We live in an era where "experience" is a commodity.
We expect every single moment we experience on the Web to entertain, develop, and enrich us. And content is a powerful experience transmitter.
Content consumers are very selective of the information they receive, and expectations from content producers are high. Let us not take this fact for granted.
Wojciech Chojnacki is the Strategy and Development Leader at Symetria, a Polish company that provides comprehensive e-business and user experience services. Wojciech has 7 years of experience in UX and user-research, having worked with companies like Philip Morris International, LexisNexis, and Orange.
The post Content is All That Matters on the Web appeared first on Six Revisions.
]]>