Monthly Archives: October 2012

Responsive Web Design

The trend in Front End Web Development these days is Responsive Web Design. There are so many different mobile and tablet devices out there now that one must take user experience to another level. We want the audience to be able to take in the most important information that a website has to offer and be able to not only read the information without having to continuously scroll back and forth on small devices, but still be satisfied with the design.
Two wonderful examples of responsive design is CSS-Tricks.com and AnderssonWise.com. If  you re-size your browser on a desktop the code does not break and you get to see the experience you would have on a tablet or mobile device. Or just visit the sites on the mobile device of your choice.

Drew Thomas owner of digital agency Brolik writes an informative article in SmashingMagazine.com  on this whole subject called Looking Beyond Common Media Queries.
Part of what he says is:

When we code for only a general desktop size, a general tablet size and a general mobile size, we are forgetting about the infinite other shapes and sizes that our devices are and will be in the future (especially as TV becomes a more popular medium for Web content). We’re not truly utilizing the full potential of responsive design. We’re not truly coding for any device….

According to recent studies, 17% of all adult cell phone owners in the US access the Internet mostly on their cell phones. This is due to the economics of buying phones and computers. If someone can’t afford both, the phone makes more sense because it makes calls and browses the Web.

In addition to that, because of the recent increase in mobile-friendly websites, people are more likely to access information right from their phone, wherever they are, even sitting at their desk in front of their desktop! This is especially true if the phone is the most handy device at the time.

This is why we can’t assume use cases or goals based on device anymore. So we need to code so that our content makes sense on a 300 pixel screen, not a mobile phone screen. We also need to make sure that if we only have 300 pixels to work with, the most important content appears first, the second-most important is next and so on.
———–

Responsive web design is obviously quickly becoming ‘best practices’ in the web development world.
Although at the moment I am only working on fixed width sites in my classes. My short-term goal and the goal for anyone who plans to become a current front end web developer will be to crack the responsive design nut and become competent in it’s practice. For now, the designing on the 12 column & 16 column grid (thank you  gridulator.com ) will be my focus.

 

Advertisements

Web Platform Docs is in Alpha

Designing for every vendor and browser and device on the web has become very complicated and will continue to become more complicated with the different browsers, mobile devices, and vendors.
Web Platform Docs is an open source wiki platform that aims to become a comprehensive current hub of information for web developers. And for once all the different platforms are cooperating. Adobe is big in this, Google, Microsoft etc… but it is definitely open source and open to anyone contributing to it.

Paul Irish a Google front end web developer says it much better than I do on his blog:

… it’s not a piece of cake to develop for all desktop browsers, mobile browsers, and all the device/OS combinations within.

It’s hard to track down accurate info, but hey we get by with an unruly combination of Mozilla’s MDN, StackOverflow, HTML5 Please, W3C/WHATWG specs, Wikipedia, and a mental inventory of blog posts, tweets and articles strewn over the internet.

Today’s announcement of Web Platform Docs, an initiative that’s been well over a year in the making, is huge. A few reasons why I’m pumped:

All browser vendors are working together to document the all of the clientside web: DOM, CSS, HTML, SVG, Canvas, HTML5, JS, ES5…
They’ve already contributed much of their content: all of the MSDN IE reference docs, the Opera Web Standards Curriculum, many HTML5 Rocks articles,
Full-time technical writers from Google, Microsoft, Adobe and others authoring content around new features in addition to the strong community contributions.
And obviously, a much more cohesive documentation situation, making it easier for us to develop with all the information we need.
Mozilla’s MDN content can be contributed!
The content is still alpha, but we now have a single place to document the web platform.

It will be interesting to see how Web Platform Docs develops as time goes on.
Although I’m only learning about this, they say that almost anyone can contribute. So who knows, it may become the first community I become active in terms of contribution outside of my TeamTreehouse group.

Time…The Ultimate Resource

Josh Long from Treehouse.com writes yet another wonderful blog entry that I so agree with. Time is the one thing that trumps money and everything else and when used well you can work less and accomplish so much more…the motto of the Treehouse.com crew. (they work a four day work week!)

Here is Josh’s article :

In a world full of tools, frameworks, tutorials, articles, code editors, and Github, there is still one resource that is more important to the web professional than any other… time.

Time is the ultimate resource.

The problem with time is that it’s difficult to manage and no one has a way of creating more of it. People usually discuss time management in the context of using techniques, apps and strategies to speed up your work, but that’s where we all get it terribly wrong.

It’s not only about working faster. Sometimes it’s about not working at all.

Time has this controlling dichotomy of uptime versus downtime and distraction versus focus. There is a science to managing time that also means managing energy. In order to get what we need out of our profession, our lives, and our passions, we’ll need to master how we use our time.

Here are the areas I’ve been focusing on lately to better manage my time, downtime, work and energy:

Project Management

To get the most out of your time it is very important to clearly understand exactly how you’re going to use it. Having a project management tool like BasecampFlow, or the new Goes to Work, affords you the opportunity to map out exactly what you need to do so you can get it done. Otherwise, you may find yourself like a ship without a rudder, weaving in and out of ideas and tasks without truly getting anything done.

Understand what needs to get done, reverse engineer it into actionable steps, and get to work. This will make you exponentially more productive by the time you actually sit down to do the work.

RSS Elimination

I love to read. I especially love to read about the latest around the web (It is my job as a writer and editor after all). But I have to say that removing the RSS reader apps from all of my devices was one of the best things I’ve ever done. There are enough distractions in the world as it is. We don’t need software pinging us every time someone releases a new article.

I’ve found that the best information comes from the same few sources and that the really good content will always find me through friends or Twitter.

Designated Time for Work, Email and Twitter

I’ve found that my best work comes from singular focus on the task at hand. When it’s time to work, it’s very difficult to do your best work when you’re only 40% engaged. Multi-tasking was the buzzword of the 90′s but we’ve seen where that got us. Designate separate time to work, to check email, and to check your social networks.

Checking Twitter and Email twice a day and working in solid, focused blocks of two hours has seemed to work for me best.

Work Offline

This seems to be a lot to ask of a web professional, but it’s amazing how much stress can be removed from your life by working offline. As I write this, I’ve turned my wifi off and I’m working strictly in iA writer. If I’m trying to think clearly and deliver a solid message, I don’t need Sparrow dinging for email, Tweetbotswooshing for DMs, or Campfire ringing in the latest animated gif (although those do bring joy to one’s life).

Working in your code editor, or gasp, Photoshop offline will help you focus and will make you feel much lighter as you try to solve the world’s problems with code.

Saying No to Projects

Getting the most out of your time isn’t always about saying what you’re going to do. Many times it means saying what you’re not going to do. I think it’s good to want to help friends or take on all of the projects you can (we need money after all), but saying no to projects actually leads to being open to better projects that are more in your favor.

The key here is being able to identify the best projects and setting the best constraints up front. Leverage your time by doing the best projects, that create the most benefit, and in the least amount of time. Talk about a win/win/win.

Spend Time with People

Many times the best thing a web professional can do is to get away from the web. Time spent with friends and family is time well spent because it increases your capacity to do more work by renewing your energy. The hardest thing for web professionals to remember is that we’re human first. There is absolutely no replacement for human love and interaction. Don’t ignore the ones you love that are all around you, to build foundation-less relationships in the virtual world.

I’ve had the great pleasure to interview and become friends with some of the best web professionals in the world. Every one of them said that their career took off when they identified what was really important and started spending more time with the ones they loved.

Spend Time Completely Free of Work

It seems counter-intuitive to say that being more productive means spending more time away from work, but working at 100% for 3 hours a day has been proven to out-produce 40% over a 9 hour workday. Our bodies and minds need to be renewed and that is nearly impossible if we’re always online and always working.

Conclusion

I don’t claim to have all of the answers. I don’t even claim to have more than five. But over the course of my thirty-three years I’ve been productive and I’ve wasted years of precious time. These strategies are what I’ve tested and that are currently working for me. Your ability to preserve your own greatest resource of time may differ, but I hope that this article has at least made you stop and consider your options.

What are some of the strategies you use to be more productive?

Read more: The Ultimate Resource – Treehouse Blog http://blog.teamtreehouse.com/the-ultimate-resource#ixzz29YlOZLLR

A good place to post portfolio work

I just discovered this site and although you can already do this on wordpress I know…..there is a very nice site called Behance.net where you can post graphic design, typography, logos, web design, animation, and a myriad of projects for people to see. People can also see works in progress, etc.
People are able to hire you, you can follow other creatives, people can follow you, comment on your portfolio, like you on social sites etc. You can find people by location…by discipline… It’s also a good way to be able to communicate with other people who do what you do or who do something that will complement what you do etc.
Worth checking out.

Behance.net

Turning Pro—by Josh Long

This article by Josh Long probably one of my favorite insights into what lies ahead for whoever really plans to go pro with Web Development or really anything! In ANY career the suggestions of Turning Pro still hold true, the tools are just different.
Enjoy!

——————————————————–

Turning Pro

September 19, 2012

There comes a time in every web professional’s life when they are faced with the harsh reality that they aren’t “shipping” anything.

Sure they talk about web design or development, they may know a few CSS tricks or a few PHP hacks, and they may have even built a handful of sites. However, the majority of their time is spent frivolously wasting away thousands of hours of productivity and nothing gets signed, sealed and delivered.

In his book, Turning Pro, author Steven Pressfield describes this state as being an amateur or “shadow artist”. He argues that we get caught up in our own lies about who we really are or what we really do, but we never do the work of a true professional.

I know a lot of designers and developers who talk all day about their fields, but when you ask what they’ve completed and shipped lately, you get crickets. It’s the best question to ask someone if you’re ready for them to stop talking.

I think amateurism or “shadow” professionalism is a plaque that is infecting the web world. I know you feel it. I battle with it everyday, but the question isn’t “how do we identify a shadow professional?”, rather it’s “how do I turn a corner and shed my amateurism and take the final step of turning pro?”.

I’m glad you asked…

How to Turn Pro

In the next few paragraphs I’d like to reverse engineer what a true professional looks like and the steps we all need to take to shed the cloak of becoming “shadow” web pros.

CHANNEL THE ENERGY YOU SPEND TALKING INTO DOING

If we really reflect on how we spend our time, we’ll justify to ourselves how important it is that we spend hours reading articles and pushing out messages to our Twitter and Facebook friends.

Sure it’s good to stay up-to-date on the latest Responsive Web Design techniques and it’s important to be involved in the discussions surrounding the web, but at the end of the day nothing speaks for you better than your work.

Too many times we look to tweak the finishing touches without having a solid base to start with, which brings me to my next point.

MASTER THE FUNDAMENTALS

You know who a true professional is? The knife maker.

Day in and day out, he does the same thing. He uses the same process for pounding out steel, sharpening the hot blades, crafting the perfect handle. His processes are so delicately picked and so painstakingly repeatable.

He has mastered the fundamentals.

Only then does he start to fine tune the sharpening process, select the perfect pins to hold the two sides of the handle around the blade, and just the right temperature and tool to get the final polish. That last five percent is earned over the time it takes to have built on the core principles of his craft.

For the web professional this means coding every day, mastering Photoshop, and writing constantly. It means cracking open your text editor and building apps in Rails every single morning, or building your MVC libraries in your PHP framework of choice, and shipping.

KNOW YOUR TOOLS

As any master or craftsperson knows, you have to know your tools. Without them, the professional is nothing. If you watch Jiro Dreams of Sushi, you’ll see firsthand the value and beauty in obsessing over the tools you use every day, to guide yourself to your own place of mastery.

We should know our text editor like the back of our hands. Every shortcut, every handle, every selector, and every keystroke should be our second language, if not our first.

We should know the ins and outs of the W3C specifications and the web standards should be our bible. We should perfect our use of Github and contribute to Open Source projects as a true professional.

I know it’s harder than it sounds but everything worth something is. Knowing our tools is absolutely vital to becoming a master.

KILL THE RESISTANCE

In Pressfield’s other classic, The War of Art, he calls our defeatist self-language “The Resistance”. Every day we try to talk ourselves out of working. We tell ourselves that what we do won’t be good enough, people won’t like it, or someone will call us out as a phony.

Seth Godin takes this a little further in his book Linchpin, and states that this defeatist attitude that hinders us isn’t our fault, it’s nature. He identifies this as our lizard brain. It’s the part of the brain that used to protect us from danger, like being eaten by a saber-toothed tiger or a grizzly bear. When we see the potential danger of shipping, we cower to safety.

The important thing is to identify when this is happening to you. When you catch yourself talking yourself out of shipping, kill the resistance. Overcome the lizard brain. We need you to ship.

HAVE A ROUTINE

One thing I’ve noticed about professionals is that they have a routine. Their routine means that they are constantly working to finish their work and get better at their craft. They don’t have to fit the resistance every day, they just do it.

It’s easy to identify a pro when you meet them. They’re confident, self-aware, tough-skinned, and solid. This comes from the day-to-day grind of being someone who ships. They’re dedicated to their work and their routine is sacred.

It’s easier to sit down at your desk every day when it’s one less thing you have to remind yourself to do. Have routine and make your work an automatic habit.

BUILD A LIBRARY OF DELIVERABLES

In your professional life, at the end of the day all that matters is what people can see when you’re not talking. Turning pro means that you have a body of work that has your signature on it and is being used in the world.

Some people call it a portfolio, some call it a book. Either way the pro is nothing without their library of deliverables. Pros love to build things and be makers. Shadow pros like to talk and create clever distractions.

Conclusion

My hope is that you, me, and all of the readers of our blog contribute to the world. My dream is that Treehouse can inspire you to ship and not fall victim to the amateur web.

Make the decision to turn pro. Master the fundamentals, know your tools, and build a library of deliverables…

…but most importantly, do the work.

Read more: Turning Pro – Treehouse Blog – Learn Web Design http://blog.teamtreehouse.com/turning-pro#ixzz26woOrvZY
Read more:

Google Sitemap Generator

Google Site Map

I thought this was an interesting find since we’ve been spending so much time on Sitemaps in Design Class.DMXZone.com has a Dreamweaver Extension that creates a Google sitemap that helps Google make your website more searchable. It’s not a new thing but I just discovered it while surfing.
Author: Frank Beverdam writes:

The extension features:

  • integrates a link crawler so that all files starting from the selected home page are indexed
  • based on how many times a file is being linked to a priority is determined
  • generates the Google xml sitemap in your siteroot as sitemap.xml

For more information about Google Sitemaps see https://www.Google.com/webmasters/sitemaps/