My 2013 Goals — An Unexpectedly Successful Year - Vanseo Design

---

My 2013 Goals — An Unexpectedly Successful Year Posted: 30 Dec 2013 05:30 AM PST Happy almost New Year everyone. One of the things that’s become tradition for me as one year ends and another begins is to look back at the goals I set at the start of the year and give myself a grade based on my success or lack of success. I then use the evaluation as a springboard to set goals for the year ahead. If you’ve been reading here awhile you likely know the routine. Today, with the last post of 2013, I’ll look back give myself a critique based on the year’s goals. On Thursday, with the first post of 2014, I’ll share new goals for the coming year. If you’re interested in how I’ve done in the past when it comes to completing goals here are previous year end posts. 2012 Was A Reasonably Successful Year Why 2011 Was A Complete Failure (And A Complete Success) Do You Have Goals For Your Business? Part I Looking Back At 2008 And Ahead To 2009 – Part I Looking Ahead In 2008 And Back At 2007 My Goals for 2013 Last year I was ambitious and set 6 goals for year. Of course, I had many more small goals throughout the year and plenty of goals to meet within these 6 goals. The idea is these are the 6 big things I wanted to accomplish last year that took more than a day or two to complete. Transition my business toward product based revenue Set up a better development workflow Make improvements to this site Continue down my new blogging path Improve task and time management Learn more about color If each of the above is worth a single point, I’m giving myself 4.75 points out of a possible 6.0. Read on for details of how I decided on that grade. Transition My Business Toward Product Based Revenue Done. I defined the goal somewhat loosely as having a product of some sort to sell. Even when I made the goal I knew that product would be a book and a year later, I did finish a book. It might have taken a little longer than I expected, but I did finish so check the box on this goal. This wasn’t really just about writing a book or having a product for sale though. For a variety of reasons I want to mix up how I earn a living and transition from earning everything by serving clients to earning some through clients and some through my own creations. In addition to finishing the book, I increased advertising revenue here and on my forum. Neither is anything I’m going to retire on soon, but together they generate some additional income each month for doing something I was already doing. The combination of book sales and advertising now gives me a small base of revenue each month for work I either would be doing anyway or work that I’ve already done. Set up a Better Development Workflow Not really. In some sense yes I did complete this goal, but not at all how I expected or in the way I was thinking. When the year started my goal was to be using Git on every project, and while not specifically mentioned, be pushing changes to servers instead of practicing cowboy coding. I can’t say I’m doing either. I do have Git installed locally and have played around with it on some personal projects. I even have a GitHub account, though I’m mostly using it to bookmark projects that look interesting. I have to admit I’m still confused somewhat by Git and version control. I get why version control is important and do understand the basics of using Git. What confuses me is how do I use it in practice and integrate it into my current workflow. Little decisions like how should I set up project directories and which folders do I need to have Git watch are harder for me to make than they should be. Another part of this goal was to make better and more use of Sass in projects, which I’ve certainly done. There’s plenty more I can and should do with Sass, but as far as the goal is concerned, I’ve done exactly what I set out to do. I can’t remember the last project where I didn’t use it. Deployment wasn’t specifically a goal this year, but I had hoped I would be on the way by this point and I’m not really close. With that said, I did make a lot of changes to my design and development process. I moved away from comps and toward prototypes. I involve clients more in the process, which has generally resulted in fewer issues and happier clients. In many respects I do now how have a better development workflow. It’s just not the one I expected to change. Make Improvements to This Site Yes, though also not quite how I expected. When setting the goal I listed 5 things I might potentially do to improve the site. I knew I wouldn’t get to all of them and was somewhat noncommittal about doing the specific things listed. I had and have a much longer list of things to do on the site and the goal was to do some of them. Here’s what I actually listed: Optimize the speed of the site Add a forum Create unique designs for pages outside of the blog Improve the archives filtering Redevelop the site using Sass I did optimize the place to make pages load quicker. It may not feel like it as you’re browsing, but trust me the site loads quicker than it did at the start of the year. First I made some of the basic tweaks you can find in any article about page speed like making sure gzip is set up. I also followed some of the general advice given in YSlow, though not all of it. I switched caching plugins from Super Cache to W3 Total Cache and tweaked its settings for my server. I also worked with my host to tweak the server itself and eventually threw some money at the problem and upped my resources on the server. There’s still more to do, but a lot has already been done. As part of getting the site ready to sell a book, I added a forum behind the scenes. At the moment it’s available only to myself and anyone who’s purchased the book and quite honestly it’s a very lonely place (only one person besides myself has posted anything and that was specifically at my request), but as far as this goal is concerned I added a forum to the site. I didn’t create the unique page designs and likely won’t bother until it’s time for another redesign. I didn’t improve the archives page, which is something I really wanted to do and should shave done (It’ll be a goal for 2014). I also didn’t redevelop the site using Sass, though I never expected to. It seemed like a lot of work for something that made more sense to do with the next design. Continue Down My New Blogging Path Yes, though again not quite as expected. I’ve clearly been delivering on the podcasts. It looks like I managed to do 25 of them this year. At least that’s how many I tagged as podcast. I think I’m getting better at producing them as well and hopefully you agree. On the other hand I didn’t find or create a new way to house demos. In fact I’m debating if it’s something I should develop here or if I should simply use CodePen or similar. I think I did a few more demos this year though so that’s positive. I didn’t try screencasting as much as I had hoped. I created just the one (demonstrating a very simple and limited color tool I built), but one is better than none I suppose and it’s a step in the right direction. I still find myself with a mental block when it comes to screencasts. I realize I simply need to practice a bit until I’m happy enough to show people, but I keep letting small excuses stop me from trying. I’ll tell myself I don’t have enough time for the practice or I’m not sure what would make for a good idea or I think about what a pain it is to close running apps and reset the resolution of my monitor for better recording. None of the above should really stop me from screencasting as they’re all minor annoyances instead of real problems, but something in me keeps letting little things like these get in the way. For the most part though I consider this goal met, since I did continue down a path I started at the end of 2012. Improve Task and Time Management The goal that never really can be checked as complete. No matter how much you get done, you can always improve so it’s simply a judgement call as to whether or not I succeeded. I do think I was able to get more done in 2013 than in years past and to some degree that’s due to having made improvements in both task and time management. In some ways it was a matter of getting busy at times that are usually slowest and having no choice, but to get more done. At the start of the year, I did improve on my GTD system using Things. I’d be lying if I said I used the set up as efficiently as I could. Too often I use it as a simple list of things to do today or tomorrow and I still create lists for of things I need to do for projects in .txt files outside of the system. I’m not sure if the problem is me, Things, GTD in general, or something else entirely. I suspect it’s a bit of all. As hard as it is to know where task and time management is concerned, I do think I completed this goal. I did make improvements and I did get more done this year than in years past. Learn More About Color Yes, and for a change, exactly how I expected. I even predicted when I would complete this goal and I was pretty much on schedule. In fairness it was a rather easy goal for me to complete and one I knew I would get done. For my birthday I asked my brother for some books through Amazon (Thanks David) and included several books about color in the list. I started reading them as soon as they arrived, alternating a color book with one on a different subject. I wrote a handful of posts, generally increased my understanding of how color works and even built a rather simple color tool. Since the spring I’ve generally been paying more attention to color, in my work, in the work of others, while walking around town, watching TV, leafing through a magazine, and on and on. I think the last couple of sites I designed made better use of color than previous sites. There’s no question I need a lot more practice, but there’s also no question my understanding and skill with color has improved and that I completed this goal exactly as I set it out at the start of the year. Summary If you’re keeping score here’s how I evaluate all of the above 3 goals completed, sort of, but not quite as expected. 2 goals completed as expected, one of which was my primary goal for the year. 1 goal completed even though it never feels completed and it’s hard to know how successful I’ve been. I’m giving myself a grade of 4.75 out of 6.0. I took off a quarter point each for the site improvements I didn’t make and also for the lack of screencasts. I took off three quarters of a point for my development workflow. Even though I did make some significant changes and improvements, I didn’t really make much progress on the main goal as I defined it. I am giving myself full points for the remainder. I did transition the business with a book and increased advertising revenue. Regardless of how it feels, I did improve my task and time management and did get more done this year. And I did learn more about color exactly as I expected and wanted. That’s how 2013 went for me where goals are concerned. Next up are my goals for 2014, which I’ll share later in the week when it’s actually 2014. Have a Happy New Year everyone. If you liked this post, consider buying my book Design Fundamentals The post My 2013 Goals — An Unexpectedly Successful Year appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

This I Believe — Principles And Values That Guide Me - Vanseo Design

---

This I Believe — Principles And Values That Guide Me Posted: 26 Dec 2013 05:30 AM PST Inspired by the NPR program This I Believe, Avinash Kaushik published a post similarly titled, This I Believe: A Manifesto for a Magnificent Career, in which he shares some of the personal philosophies and core values that guide him. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. It’s an interesting read and it’s something I often think about myself. While I’ve never tried to write out all my beliefs and codify them, I know there are a handful of principles that guide my way through life. I decided to scan through the archives here and pull out some of the themes that I continue to come back to. What’s below isn’t by any means a cohesive manifesto. Perhaps one day I’ll think through some of this in greater depth. For now consider what’s below a few things that guide me in work, design, and life Improve Your Position — Make Better Decisions Like most people my life has never been perfect. At times it’s been better than others, but perfect it ain’t. During some of the less than better times I would try to get from wherever I was to my vision of the ideal in a single step. That usually doesn’t work well. For one it’s a lot or pressure to make one decision that solves every problem in your life. At the very least it would take many steps to get to some version of ideal and it’s hard to see that last step when you haven’t yet taken the first. The pressure to make the right decision would leave me feeling paralyzed to make any decision for fear of making the wrong one. A few years ago I was teaching myself to be a better chess player. I’m by no means good, but I wanted to learn more about the game. I came across the idea of positional chess, which I won’t claim to entirely understand. I took the general concept though, and applied it to life in general. When you think about it, life is an endless series of decisions and you’re usually better off making a wrong decision than no decision at all. You can at least learn something from an incorrect decision to make a better one the next time. The positional chess idea is to take stock of where you are. Understand your current position in life. When it comes time to make a major decision, don’t worry about the long term ramifications. Just make a decision that improves your current position. Don’t try to reach the ideal with each decision you make or each thing you do. Don’t be afraid of making a poor decision. Simply take a small step in a direction that makes things a little better than they are now. Consistently repeat that and you’ll eventually get where you want to go. Understand Context Where you are now (your current position), is the context of your entire life. Every moment that has come before has led you to the moment you’re at now. It’s the same for everyone, though all our moments haven’t been the same. We each live in our own context. What might work for someone else, might not work for you and vice versa. We all have different strengths and different weaknesses and ultimately only you can make the best decision for you, since only you can know and understand the entirety of your context. We receive advice from people all the time, whether in person or through an article read online. Understand that all that advice is given based on the context of the person offering it. There are few, if any, absolute rules. Rather there are lots of general guidelines that appear as absolute rules in specific contexts. When you receive advice spend some time trying to understand the context in which it’s given. Some things will apply only to a specific set of circumstances, which you may or may not share and some will apply to a much broader set of circumstances. Spend the time to understand the context in which the advice is offered in order to modify it and apply it to your own context. Balance Most choices involve tradeoffs. Few, if any, choices are perfect. There’s good and bad in everything. Every choice has its own set of pros and cons. It’s unlikely that any decision you make will get you everything you want. The universe doesn’t work that way. How often has “it depends” been your response to a question. Most problems don’t have binary solutions in black and white. We live in a world that’s made up of shades of gray. Seek balance in life. Don’t worry about trying to make every choice, every action perfect. Seek an overall net positive instead of worrying about making every micro thing a positive. Keep Things Simple More often than not when our lives seem complicated, the complication is of our own making. If you can learn to get out of your own way life simplifies itself quickly. Most problems are nowhere near as important as they seem. I think we often complicate our lives by trying to solve edge cases that only have complicated solutions. We’re too focused on what might go wrong that we fail to implement the simpler solution that covers most cases. Sometimes you’re better off forgetting the edge cases for a moment and just go with the simple solution that covers 80% or 90% of the issue. It’s what leads me to design led by minimalism and mobile first. Build the simple base that works for most. Then feel free to add on complexity for different edge cases. Strive for Perfection, but be Practical This may sound like a contradiction given the above about simplicity, but do strive for perfection always, while always understanding you won’t ever get there. Balance comes into play. Sweat the details because they do matter and they help you stand out from the rest. At the same time don’t sweat all of the details, because you’ll be fine even if you don’t get every last one of them right. Somewhere between total garbage and perfection is the best you can practically do. Seek to do better, but don’t chastise yourself if you don’t. Meet a minimum standards you set before releasing anything and then iterate to improve it. Follow Your Passion, but Remember the Money I’ve watched a lot of people work jobs they find miserable solely for the money. A long time ago I was doing the same and realized my life was to get up every day to go to a job that made me miserable in order to earn enough money so I could wake up the next day and go back to that same miserable job. Most of your adult life is going to be spent working. Doesn’t it make sense to work at something you enjoy? I think happiness is much more likely found in the things we feel passionate about than in chasing after the money. That’s not to say you should ignore the money. We live in a system where money is a necessity. The bank isn’t excusing my mortgage and the grocery store isn’t letting me walk in and take what I want off the shelves. We need money to live. Again it’s a balance. You probably don’t want to follow any old whim that makes you happy, however you shouldn’t ignore the things that make you happy. Find the balance that works for you. I find it in a place that leans toward the passion side and I do what I can to earn a living doing things that I enjoy. It sometimes means I don’t make as much money as I could, but it generally makes me happy. Both Theory and Practice are Important Practice is learning from your own experience. Theory is learning from the experience of others. What you learn through practice and doing for yourself will sink in deeper than what you learn from others. What you learn from others will cut across a much wider set of problems and give you a broader perspective. Both are important. If you could only choose one, practice is the way to go, but you’re much better offer adding theory to your practical routine. The people who go furthest usually have a mix of both. Be Open to Possibilities Never get locked into a single train of thought or convince yourself you have all the answers. None of us does. We’re all doing our best to make it through a life long journey. None of us is walking down the absolute right and perfect path. We’re all winging it each and every day of our lives. Whatever solution you’ve come up with be open to the possibility that a better one exists. It does. No matter how good you think you are, be open to the possibility that someone out there is more talented than you. That person does exist. If you can accept that other and better possibilities exist you give yourself something to strive for. You gives yourself an ability to grow. If you’re closed to these possibilities what’s the point of life? he not busy being born is busy dying — Bob Dylan “It’s Alright Ma, I’m Only Bleeding” Summary As I said at the start what’s here isn’t anything I’d call a manifesto. It’s more some general philosophies and values that help guide me through life and work. Give me a few minutes and I’ll come up with a few more. Give me a few years and some of the above might change. Even as I write now I can think of a few things I’ve left out and a few things in the above that aren’t as clear to me as I thought they were when I started typing. Maybe one day I’ll spend more time codifying the things I believe and offer it as some kind of manifesto for how I live my life. Until then just know what’s above are some principles that help me make decisions and ideally help me grow to be a better me. Hopefully something in there will lead to an aha moment for you and help you better understand the values and philosophies that guide you. If you liked this post, consider buying my book Design Fundamentals The post This I Believe — Principles And Values That Guide Me appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Responsive Images — Solutions To Our Problems - Vanseo Design

---

Responsive Images — Solutions To Our Problems Posted: 23 Dec 2013 05:30 AM PST When it comes to all the different responsive image solutions out there, I have to admit I find myself generally confused about what they are and which one I might use. It seems like every other day someone posts a new solution to cure our responsive image issues. Last week I discussed those issues and grouped them into several categories, flexibility, performance, aspect ratio, and art direction. When you get down to it though, there’s really one major issue and that’s wanting the ability to serve the most appropriate image to a given device under a given set of conditions. The other issues are all relatively easy to solve by comparison. Ideally we want the ability to serve the most appropriate image to any device under any given set of conditions In fact whenever you see someone talking about a responsive image solution, it’s likely a way to deal with this single issue. Instead of trying to walk you through the details of different solutions, I want to offer more of an overview and point you to resources that do provide the details. My goal is to point you to some great resources you may or may not have encountered. I’ll start with solutions to the easier problems and work up toward the major issue. Flexibility Making images flexible is quite easy. Set max-width to 100% for all images and they’re flexible. If you’re using html5 video do the same for all videos and you’re set. Same for html5 audio. If only it were that easy. In practice we still end up using Flash audio and video and we likely embed videos from YouTube, Vimeo, or some other source. The good news is solutions are out there and they aren’t difficult to implement. Creating Intrinsic Ratios for Video CSS: Elastic Videos Rundown of Handling Flexible Media FitVids.JS Fluid Width Video Responsive Video Embeds with FitVids.js Fluid and responsive YouTube and Vimeo videos with fluidvids.js You’ll notice FitVids.js features prominently in the links above. I think more people are switching to FluidVids.js, but from my understanding both work equally well. The first 2 links above are html and css ways of dealing with videos and don’t require additional Javascript. Aspect Ratios and Hierarchy Dealing with aspect ratios and hierarchy is also relatively easy to solve. First add height: auto to the max-width above to ensure images maintain their aspect ratio when resizing. The hierarchy part of the equation requires a little more work, though nothing overly difficult. Maintaining Image Hierarchy And Aspect Ratio In Responsive Design Paying attention to content hierarchy across screen sizes How to Maintain Image Aspect Ratios in Responsive Web Design Control image aspect ratios with CSS3 Responsive Image Hierarchy In general the solution is to set overflow: hidden on the image container and then adjust the positioning of the image inside to effectively crop it. There’s also a hack involving padding, which is similar to that used for flexible videos. Background Images I mentioned last week that background images deal with the same responsive issues, but have different solutions. Here are a few responsive image solutions that involve background images. Crop Top The Layered Look: Better Responsive Images Using Multiple Backgrounds Simple Responsive Images With CSS Background Images Responsive Images with Apropos Optimizing Images Part of the performance issue is simply about optimization. I’m surprised to still find images online that haven’t at least been run through some kind of image optimizer. In addition to saving images for the web and compressing them in an image editor, I run all images through ImageOptim. Smush.it is another popular image compressor and you can find more if you choose. ImageOptim Smush.it Tools for image optimization Naturally switching from bitmapped images to vector images like SVG and icon fonts will reduce image weight in addition to make your images flexible. I think vector images deserve a post of their own though so I’ll hold off saying too much about them here. An optimization technique introduced last year was compressive images. It suggests a way to use a single image for both retina and non-retina displays and avoid to some degree the need to serve different images to different devices. Retina revolution Compressive Images Are Compressive Images A Good Solution For High Resolution Displays? The last link above is the results of a test I ran, which didn’t seem to indicate compressive images worked quite as suggested, but I admit it wasn’t the most scientific of tests and more likely than not it was my test that was flawed and not the method itself. Serving Appropriate Images: Waiting on Standards The gist of this issue is wanting to serve different images to different devices and different conditions. There are 2 issues within this issue. We’re currently limited in the conditions we can sense. Images will generally download before any code we might use to determine which is the most appropriate. The first issue is something we’ll likely need to wait on. The second is what most responsive image solutions attempt to fix. Ideally we won’t have to do the sensing and the browser will do it for us. That’s ultimately what should happen once everyone settles on a standard. You and I will write code that will work similar to a media query that says use this image under these conditions and use that image under those conditions. Unfortunately that standard isn’t settled. The two main approaches that have been considered are the picture element and the srcset attribute. Designers and developers prefer the former, while browser makers prefer the later. It seems the browser makers are winning and the picture element is now off the table. However, browser makers have added a wrinkle by proposing src-n, which is similar to srcset. It potentially offers us more, but isn’t quite as ready as srcset. My head is starting to hurt thinking about it so let me point you to others who can explain what’s going on better than I can and who can also provide more details about how this will all work. Responsive images – end of year report ResponsiveImages.org The real conflict behind <picture> and @srcset Here are a couple of links specifically about the picture element, though again, it sounds like we won’t ever see it. Notes on Adaptive Images (yet again!) The picture element (Working Draft) And here are a few on the srcset attribute, which we likely will see (It’s in Webkit, though not Safari yet), unless src-n wins out. The srcset attribute (Working Draft) WebKit Has Implemented srcset, And It's A Good Thing Thinking Ahead: Multi-Resolution Images with srcset Responsive Images, Part 1: Using srcset A Consensus to the Responsive Image Problem? There’s also the image-set() notation, which is like srcset for background images, though it’s currently part of an Editor’s Draft. Update: More changes and more head spinning. Seems like src-n and srcset may now be out and the picture element back on the table. Mat Marquis has a year end roundup to explain. Serving Appropriate Images: While We Wait Since the standards aren’t ready yet, people have been working on solutions that for the most part do what the standards will eventually let us do. I’m not even going to pretend this is a comprehensive list of methods or that I really understand how each of these works. The links below will lead you to people who do and who can fill you in on the pros and cons of these and other methods. Jason Grigsby has written several articles on responsive images that offer quite a few different solutions as well as their various pros and cons. Sherri Alexander offered thoughts on how to choose a responsive image solution and Chris Coyier did the same as well. 8 Guidelines and 1 Rule for Responsive Images Responsive IMGs — Part 1 Responsive IMGs Part 2 — In-depth Look at Techniques Spreadsheet summarizing the different methods Choosing A Responsive Image Solution Which responsive images solution should you use? The sources above might be all you need, but I’ll point you to a few more below. Scott Jehl created picturefill.js, to mimic what the picture element was going to offer. Interchange comes from Zurb as part of their Foundation framework. Both progressively load images. You choose an image to load by default and then the scripts load additional images only as needed based on media queries. Picturefill Responsive Images Using Picturefill and PHP Interchange Lazy loading is a technique to hold off loading images until they’re needed. Imager.js is a not quite ready for production script based on the BBC News technique for loading images. The case study below combines parts of several methods to arrive at a solution. Taking Control of Image Loading Imager.js Addressing The Responsive Images Performance Problem: A Case Study Sever side solutions also exist. The idea being that you send information about the screen to the server and the server then creates or serves the appropriate image Adaptive Images Lightening Your Responsive Website Design With RESS Automating DPR switching with Client-Hints In time we’ll likely be using whatever standard evolves and only those sites with very specific requirements will need to look further. The standards aren’t here though, so for now it’s either one of these solutions or delivering a single image to all devices and conditions. Summary Is your head spinning? Mine is. Making images and media flexible is relatively easy, as is dealing with the aspect ratio problems that crop up. Being able to serve different images to different devices under different conditions? Not so much. In time standards will be in place that will help. The picture element looked like a nice way to serve different images, but it doesn’t look like we’ll get it. The scrset attribute and perhaps the src-n attribute don’t look quite as easy to use, but neither is hard to use and if they solve the problem we’ll learn. Until the time when a standard evolves and we can safely use it in production, we can choose among the variety of solutions that try to mimic the functionality that standards will eventually bring. None are perfect though, and you may decide none are worth implementing, choosing instead to balance the simplicity of serving a single image with the potential decrease in performance. There’s more to cover where responsive images are concerned. After the holidays I’ll pick up the discussion again with some thoughts for how we should be thinking about images long term. If you liked this post, consider buying my book Design Fundamentals The post Responsive Images — Solutions To Our Problems appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

What Role Do Ethics Play In Your Choice Of Projects? - Vanseo Design

---

What Role Do Ethics Play In Your Choice Of Projects? Posted: 19 Dec 2013 05:30 AM PST The latest season of the Boagworld podcast has been set up in debate format with Paul and Marcus each taking a side. One recent discussion was about the role ethics play in the web design industry and one question from that discussion was whether or not you would take on a project you were opposed to ethically. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. It made me wonder if it was even possible to take on a project you’re ethically against. Don’t your actions in taking on a project speak more about where your ethical line is than anything you might say? What are Ethics Ethics are a set of moral principles that govern the behavior of an individual or group. They help guide decision making and give us something to fall back on when we’re not sure what to do. Ethics are always in the eye of the beholder. Despite what some might wish, there is no single set of morals or ethics for everyone. We define our ethics for ourselves. Only we can set our own ethical line. In a sense they’re constraints we place on ourselves. Much like a conscience, ethics keep us from doing just anything. However, I’ve observed over many years that the ethical code of most people is a lot more malleable than they care to admit. Ethics aren’t black and white, but rather shades of gray. They work in a hierarchy with some things having more priority than others. Ethics depend on each other and get defined in context more than they are in the absolute. There are certain things I hope we’re all in agreement are ethically wrong. Killing another human being for example. However, is it that hard to imagine a scenario where you’d be ok with one person killing another? How about in self defense or to protect family, friends, and loved ones? The more you think about it, the more shades of gray you can find in something that on the surface we’d all agree is ethically wrong. Placed in different contexts, it’s not that hard to imagine scenarios where it’s ok for one person to kill another, even as we’re ethically against the idea. Ethics in Design Let me offer a couple of examples more specific to design. You’ve likely noticed I often use images toward the top of posts here on the blog. You can’t just use any image you find online though. I certainly want to avoid using copyrighted images. I look for public domain images first and fall back on those that are under a creative commons license, but sometimes it’s hard to find a good image. Sometimes the perfect image is published under copyright. What do you do? You might look to fair use. Fair use laws are on the murky side. I don’t think there’s a clear line about what’s acceptable under fair use and what isn’t in many cases. It’s pretty easy to rationalize that many images you’d like to use fall under fair use laws. Some might also decide they aren’t likely to get caught using the image so why not use. Right or wrong it’s unlikely there will be any consequences. I wouldn’t use an image just because I wouldn’t get caught using it, but some people do. In the past though, I probably have used some images that I shouldn’t have. I’ve probably convinced myself it was fair use or found some other justification. About a year and a half ago I started thinking my practice for using images had come too close or even crossed my ethical line and so I changed my practice. Since then I’ve moved toward public domain images first and cc license images as a fallback. Another example is how we draw inspiration from other sites. While I don’t always look to websites for inspiration, I usually ask clients to send me links to sites they do and don’t like and sometimes I’ll seek inspiration in one or more of the sites they like. Naturally, I don’t want to copy the designs I see, but I would like to take some inspiration back to my design. Where’s the line between inspiration and copying? For example say you like the color scheme of a site. Some might grab the exact hex values used and it might not even be an issue if everything else in the design is different. Lifting hex values exactly is on the other side of my ethical line. At the very least change the hex values to some degree. I’d sooner try to understand what I liked about the color scheme. Was it the contrast between the different colors the amount of saturation used the type of color scheme the amount of cool or warm colors used I’d seek out the core reason why I liked the scheme and use that instead of using the colors directly. That to me is being inspired and places me well within my ethical boundaries. Would You Take on a Project You’re Ethically Against? The decision to take on a project is based on many things, most of which have little to do with your abstract ethical code, yet they form the context under which your ethical code might bend. You take on a project or reject it in the context of many other questions. Do you need the work? Will the project be good or bad for future business? How will the project impact your brand? How do others in your company feel about the project? Are you interested in the project for some reason? Take the example of a porn site. It’s easy to say we’re ethically opposed to pornography, but some might choose to work on a porn site because the pay is very good or because they see some challenge in designing a site in such a crowded market. You might also reject the site despite the pay and challenge because your ethical opposition outweighs the benefits of the pay and challenge. Can you really take on a project you’re against ethically? Doesn’t the act of accepting the project suggest you’re fine with it ethically within the context of everything else that led to your decision? If you take on that porn site how ethically against porn are you? Always or only when the money isn’t right? Summary No one can define our ethical line. Only you can decide what’s ethically acceptable for you and you do that less in the abstract than in the context of making decisions that call your ethics into question. An ethical line is not a clear and straight line where on one side sits the ethically good and the other side sits the ethically bad. Your ethical line is more a curve that changes and adapts to forces (context) acting on it. Where your ethical line is located at a given moment is something you and only you can answer. There’s no clear right or wrong and what’s right in one context might be wrong in another. Your action in the moment defines your ethics in the context of that moment. You really can’t take on a project you’re ethically against, because the act of taking on the project says you’re not opposed to it within the context of your decision. If you liked this post, consider buying my book Design Fundamentals The post What Role Do Ethics Play In Your Choice Of Projects? appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Responsive Images — The Issues We Want To Solve - Vanseo Design

---

Responsive Images — The Issues We Want To Solve Posted: 16 Dec 2013 05:30 AM PST One of the first web design problem I was asked to solve had a lot to do with images. My client was a photographer with a slow loading site. Naturally the site was image heavy given the subject matter, but the person who had developed it compounded the problem by creating images where none were necessary. Just about everything that could be turned into an image was an image. Page headings were images, every menu item was its own unique image, borders between photographs were added directly to images, even large swatches of solid background colors were images. A large part of my job was to remove images where possible and to optimize images that had to remain. Before I worked on the site, pages took 2 1/2 to 3 minutes to load. When I was done they were loading in under 10 seconds. Responsive design comes down to being flexible over a certain range of conditions and then making more significant changes at the end points of these ranges Images add a lot to any website. They also create bottlenecks in performance. While bandwidth has significantly increased over the years, images still present performance and other challenges for responsive designers. Over the next few weeks I want to talk about images in the context of responsive design. There’s a lot to cover so I’ll break the discussion into several posts. Today I’ll discuss the issues. Next week I’ll provide a long list of resources to solutions that currently exist. After the holidays I’ll pick up the topic again and offer some thoughts for where I think we need to look for long term solutions. The Issues with Responsive Images When you consider the different issues we face working with images in a responsive world I think you can group them into a small handful of categories flexibility performance aspect ratio and hierarchy art direction If you think about responsive design in general, much of it comes down to being flexible over a certain range of conditions and then making more significant changes at the end points of these ranges. It’s easy to see in responsive layouts and it also occurs with images. The first item above clearly falls into the flexibility part of responsive design and it’s an issue that’s pretty much solved. The rest come down to changing things at the end points of ranges, which is a more difficult problem and one we may not yet have the tools to deal with. Let’s look at each in a bit more detail. Flexibility Like I said, the issue of making images flexible is pretty much solved. You set the following css on the img selector and you’re set. 1 2 3 4 img { max-width: 100%; height: auto; } Other media like video can be somewhat more complicated, but for the most part the issue of making media flexible is one we know how to solve. That doesn’t mean we’re done. Remember responsive design is about flexibility over a certain range. Flexibility is the easy part. The harder part is how we transition between ranges. Performance The flexible solution ensures that images will always shrink to stay within their container. However, they won’t grow beyond their maximum size and even if they could their quality would degrade. This means when creating responsive images, we often create them at the largest size possible for the widest of screens. Larger dimension images mean larger file sizes as well. That’s fine for those big widescreen browsers likely connected to a high speed network, but it’s not so good for devices connected over a slower network that have to wait and wait and wait for our heavy images to load. Those low bandwidth connected devices would prefer a smaller image in terms of file size, especially as they’re more likely to be smaller devices. I say likely because we can’t really make assumptions that smaller screens mean lower bandwidth. In some cases, the opposite is even true. Ideally we want to be able to load the most appropriate image in terms of page weight to different devices and different conditions. The issue gets compounded by retina and other pixel dense images. We have some devices capable of displaying the extra pixels and some not capable and again we want to load the appropriate image for each. Neither of the above performance issues are specific to responsive design. Responsive or not, we’d still have to choose which images to display. However, if building device specific sites we can make that choice and only include the appropriate image. In the case of responsive design we need to include all of the possible images because we don’t know device and context in advance. While solutions are available to display the appropriate image, the other images are often downloaded to the device, which is kind of what we were trying to avoid in the first place. Aspect Ratio and Hierarchy Because our solution to the issue of flexibility is to limit the image dimensions in one direction it causes an interesting issue in maintaining hierarchy between horizontal and vertical images. Using max-width to limit image dimensions means that horizontal images scale more than vertical ones. As the screen gets smaller horizontal images get smaller more quickly than vertical images, where width is the smaller dimension. A horizontal image that is larger and thus higher in importance in the hierarchy on wide screens can become smaller and thus lower in importance in the hierarchy on narrow screens. Sometimes this may not be an issue, but more of the time it is and we’d prefer to maintain the hierarchy. Solutions do exist for this aspect ratio and hierarchy issue and they generally involve hiding parts of the images in order to maintain hierarchy while also maintaining aspect ratio. Art Direction This issue isn’t really what it means to art direct, but it’s the name that seems to have stuck so I’ll use it here as well. The issue is that the details of an image seen clearly when the image is large disappear when the image is small. Depending on the specific image this may not be an issue, but as you might guess, more often it is. Any image should be chosen for what it communicates and how what it communicates relate to everything else in the design. Losing image details can change what’s communicated and many times it would be better to crop an image to present either a specific detail from the large image or even a completely different image to smaller screens. Solutions to this problem will be similar to those used to solve the performance issues described above. The goal is to be able to serve different images to different devices and ideally only have the image we want to display be the one that downloads to the device. Background Images Throughout this post when talking about images, I’ve been referring to those we embed in html. CSS background images have the same issues, but require different solutions and different considerations. In some respects the issues aren’t as critical, since background images should more often than not be less important. That’s why they’re in the background and not the foreground after all. Sometimes though, they’re placed in the background of an element that’s in the foreground. Adding them as a background image is more for technique than because the image isn’t important. CSS background images are usually easier to target. It’s easier to change the source or to hide portions of the image, however we still face the issue of serving more images than necessary or serving too weighty an image where we don’t want. The point of this section is to highlight that image issues aren’t only about those we embed directly in html, but also include background images we add through css. The issues are still the same. What’s different are the solutions. Summary A responsive site is flexible over a series of ranges. Across the end points of these ranges more significant changes are made. In theory a responsive site might only have one range and no need to transition across end points. In practice there are usually several ranges and multiple end points. The flexible part of responsive design is actually quite easy. What’s more difficult is how we transition over the end points. The issues we face with responsive images are mainly about the changes across breakpoints. The most significant of the issues revolve around performance. How do we deliver only the most appropriate image without requiring all images be downloaded? Is it ok to deliver multiple images as long we don’t leave visitors waiting for content? Are there solutions where the image itself adapts so only a single image is needed. The issues of maintaining hierarchy and wanting to art direct the communication, probably aren’t as critical as those of performance, but they’re important issues to solve nonetheless. Next week I’ll offer a long list of resources to many of the solutions being used to deal with the issues mentioned here. I’ll follow that post in the new year with some general thoughts about where I think we should be looking for solutions in the future. If you liked this post, consider buying my book Design Fundamentals The post Responsive Images — The Issues We Want To Solve appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

The Tension Between Creativity And Productivity - Vanseo Design

---

The Tension Between Creativity And Productivity Posted: 12 Dec 2013 05:30 AM PST One topic I come back to is the tension between creativity and productivity. I find it interesting in general, but also because web designers site at their intersections. Both creativity and productivity play a role in our success. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. Creativity developing a concept creating aesthetics having an eye for design Productivity having a business process becoming more efficient modularizing code The two seem to be at odds with each other on the surface. What you do to improve creativity might come across like the opposite of what you’d do to improve productivity. Productivity is about getting things done quickly Creativity is about taking your time Productivity will give up that last 5% toward perfection Creativity will strive for that last 5% above everything else Productivity comes from conscious planning Creativity comes from subconscious wandering Productivity likes process Creativity likes exploration Productivity wants modularity Creativity wants unique While they seem in opposition I think they can complement each other more than we think. Each has it’s place and our best solutions are usually comprised of some of each. Some parts in the process of designing a website are better served by creativity and some better served by productivity. If we can separate the parts and allow creativity and productivity to flourish under they’re preferred conditions we can get the best of both. A Process to Enhance Creativity For example my blogging process works by doing just that. It separates the different tasks that go into producing a post. Creative — brainstorming ideas, spontaneous notes, writing a draft Productive — collecting ideas, editing phases, having a process To publish 2 posts a week I write 2 posts a week. I try to stay a couple of weeks ahead of schedule and then maintain that schedule. It means I do certain work on Monday, certain work on Tuesday, etc. What if I don’t feel creative on a Tuesday when I have draft writing scheduled or I do feel creative on a day where editing is the work du jour? Some weeks in order to keep up I don’t have the option to go off schedule. If on the other hand I can get further ahead of schedule, 3 weeks, 5 weeks, 8 weeks, then there’s much less pressure to get 2 posts done each week. I can make it up the following week if need be. Increased productivity leads to being further ahead of schedule which creates more freedom to go off schedule and be creative when I’m more open to being creative. It frees up time to work on more posts at once so on non-creative days I can do something productive on many more posts to make some kind of progress. Practice, We’re Talking About Practice As another example think about setting aside dedicated time for practice. Think about a planned routine for learning new skills and techniques. Eventually the conscious practice becomes muscle memory. It becomes subconscious automation. As skills move to the subconscious you become more productive because you can work quicker and better. You also become more creative because conscious thought that was previously required to get the technique right is no longer required and your mind is more free to explore. It’s similar in regards to code. Building pattern libraries and frameworks and generally modularizing your code is like taking something that requires conscious thought and moving it to your unconscious where it happens automatically. Some would say modular code and pattern libraries always lead to less creative work. I’d argue it doesn’t have to be the case. In reaching for pre-existing code you’re working from muscle memory. The pieces can be combined in creative ways and you can explore those combinations because you don’t have to think about coding the parts from scratch. One reason I suggest breaking free of comfort zones is because the automatic does have a habit of coming out the same. If you break the routine just for the sake of breaking it, you’ll go through the same process of moving conscious practice to subconscious automation. Productivity will return and you’ll now have another way of doing the same thing. If your patterns are leading to the same finished product, add some new patterns to your library. Create new parts to combine. Creativity and productivity appear have a tension between them. Each wants more of what the other wants less of. However that also means the two can complement each other well. Improving one can clear the way to improve the other as long as you’re willing to accept that they can. You’ll productively plan for creativity and you’ll creatively see new ways to be productive. If you liked this post, consider buying my book Design Fundamentals The post The Tension Between Creativity And Productivity appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

How Important Is To Have Always Visible Navigation? - Vanseo Design

---

How Important Is To Have Always Visible Navigation? Posted: 09 Dec 2013 05:30 AM PST Site navigation is typically among the first things you think about when designing a website. Once you know what content the site will contain you start thinking how to organize that content and you also think how to provide access to it through the site’s navigation. Responsive design adds a twist in that navigation that works well in a widescreen browser may not work so well on a small screen and vice versa. Solutions for the small screen typically call for fewer navigational items and favor a vertical layout. Wider screens can hold more links and are often set up as horizontal navigation bars. Responsive sites will usually have the navigation change between two patterns at some point. I’ve written about responsive navigation patterns before, when to use them and what pros and cons they have. I’ve even showed how to code many of these patterns for Tuts+ Today I want to address the topic of navigation in a different way and ask whether or not our navigation always needs to be visible. Current Practice Common wisdom suggests fewer links in global navigation. Six or seven are often given as an upper limit. My current practice tries to stay under this limit with a half dozen or so global links pointing to different sections of the site. Each section will then include a submenus to allow deeper exploration of the section. There always seems to be a few outlier links (contact, login, etc.) that want a permanent seat in the global navigation and there’s often a group of links hidden globally that want more prominence. On some sites it’s a challenge to reduce all the information to a half dozen or so links. It only gets more difficult when mobile enters the picture and there’s less space to work with. The earliest responsive navigation pattern was to do nothing more than reduce the amount of links and collapse the space between them on the smallest devices. Soon patterns were created to include more links. Converting menus to a drop down list, hiding some links, and moving navigation to the footer were the first attempts to allow for an increased number of menu items. Before long patterns emerged that could display even more links. They moved navigation off screen and made it accessible through a button or link. A single tap or click and the menu could be displayed on request. Whichever pattern you choose, odds are you use one pattern on smaller devices and when space allows you switch to an always visible horizontal navigation bar or vertical menu. Do we really need to make that switch? Navigation is Only a Tap Away A few years ago I bought an iPad and not too long after bought my first book through iBooks. I can still remember how excited I was when I realized I could tap away navigation and chrome and bring it back with another tap. Yes I get excited by strange things sometimes. I have no idea if iBooks was the first place this pattern appeared, but it’s where I first noticed it. It’s been influencing me every since. Most of the time whether reading an ebook or accessing a web page, our focus should be on the content and nothing else. Global navigation isn’t really needed all the time. It’s needed once we decide we’re done with the content on one page and want to decide where to go next. Think about a common form of offline navigation, maps. Maps help us navigate the real world. Do we need them to always be in our face? Do you walk around holding a map in front of you before taking a step or driving down the road? Would you find it helpful if a virtual map was superimposed over the real world? Sure, it might help you get to where you want to go, but you’d miss out on everything along the way. You’d miss the content of real life. Isn’t it better to have quick access to the map only when you need it and to experience your surroundings the rest of the time? Sadly, I think some would prefer the always on virtual map and ignore everything along the journey, but hopefully most would be with me in thinking we’re better off with maps on request. Should it be any different with the navigation of a website? Is it really necessary to be there all the time or is quick access to it when requested all we require? Take a Cue From Responsive Navigation Patterns Of all the responsive navigation patterns, my favorites are those that hide navigation completely by default and present it only after tapping or clicking an icon. I also enjoy interfaces where the chrome disappears as you consume the content and only reappear after you stop. Other than sites with only a few pages, we can’t present a link to every part of the site on every page. We’re hiding most navigation globally as it is, so why not take that last step and hide the rest of it until it’s requested? At the moment I can only think of 3 downsides. It’s an extra click or tap to get somewhere on a site A mouse click is more effort than a tap People aren’t familiar enough with the pattern and could be confused. I don’t think the extra click is that big of a deal. Sure it’s an extra click and we generally want to reduce clicks to make wayfinding easier, but it seems a reasonable compromise to help people focus on content. It’s also just the main few links that require the extra click. Deeper pages in the site can be set up to be accessed in the same number of clicks they are now. The added effort for the mouse click is something to consider, but I’m not sure the effort will be a deal breaker. It’s effort to move the mouse from one side of the screen to another, but visitors shouldn’t be doing that a lot. When someone isn’t sure where to go next and is spending more time with the menu, the mouse would stay in the same general area. Confusing visitors is something of a deal. In time people will be familiar enough with the pattern and I’d suggest more already are than we might think. Off screen navigation is becoming the most popular responsive pattern and it’s commonly used in native apps as well. To help avoid confusion you can use the word “Menu” in big letters as a link or on a button to make it clear how to call up the menu. Breadcrumb trails could still be provided and we always have in-content links to help people explore. We might also lead people toward menus by request, by first making visible navigation the default as they are now, and providing a close button so people can choose to hide it. It shouldn’t take too long for people to become used to hiding and showing the menu and then we change the default to hidden and people show/hide instead of hide/show. I’m not trying to suggest we should always hide global navigation, but I am wondering if the time is right to do so more often. Closing Thoughts We assume navigation on a website needs to always be visible. Is that really the case? Perhaps in the past when people weren’t used to navigating websites it was necessary to show links all the time. Haven’t we moved beyond that past though? Mobile devices are quickly becoming the de facto way to access the web if they aren’t already there. When people are visiting our sites they’re more commonly visiting on a smartphone or tablet where we’ve chosen a responsive pattern that hides navigation by default. Is there any reason to think we can’t or shouldn’t do this on the widescreen version of the site as well. Every time I’ve designed and developed a navigation bar the last few years, I’ve thought back to my experience in iBooks and being able to hide the menu and associated chrome when reading. I can’t help but think this is the pattern we’re moving toward and that we can probably take a few more steps closer to it now. What do you think? Are there downsides I’m missing? Would it confuse people too much not to see an always on global menu? If you liked this post, consider buying my book Design Fundamentals The post How Important Is To Have Always Visible Navigation? appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610