Change for the Sake of Change - Vanseo Design

---

Change for the Sake of Change Posted: 29 Aug 2013 05:30 AM PDT When talented athletes aren’t living up to expectations or previous accomplishments, many will suggest a change of scenery is needed. Sometimes the cure is simply removing the comfort zone. This is hardly limited to sports. Change is beneficial to anyone stuck in the same old routine for too long. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. Human beings are creatures of habit. We develop routines to help us be more productive, but our routines can keep us locked into a singular way of seeing and thinking. Creativity and growth prefer something other than the same old. This is a topic I come back to often and I was reminded of it again when I switched to a new feedreader. It seems like a rather small and insignificant change, but it has me thinking of larger changes it potentially leads to and how they might impact my work. A Change in Input The demise of Google Reader created new opportunities for rss apps and services. Not being a Google Reader user myself, the change didn’t alter my reading habits, however it’s been hard not to notice some new apps. My reader of choice for the last few years has been NetNewsWire. I recently switched to one of the newer apps, ReadKit. The quick version for why I made this switch is as follows. NetNewsWire hasn’t been updated in a while and the version I use was feeling old and would occasionally do weird things. A new version of NetNewsWire is in beta, but a quick trial of the beta led me to think it’s not yet ready for full time use. ReadKit is the only OSX app with any real syncing options. I don’t currently use a syncing services, but I plan to at some point. ReadKit has a much nicer interface. ReadKit is different and the change will force me to do things differently. Since I’m not yet using a syncing service, the simplest way to bring my feeds over to ReadKit would have been to export an OPML file from NetNewsWire and import it. That was my plan, but I decided to explore the new interface first and add a few feeds manually and try to organize them. That’s when I realized the opportunity in front of me. Instead of importing over all my feeds and the organization I’d set up for them, I thought why not go through them all manually, decide what I really want to keep, and reorganize them a bit. What might have taken a minute or two, turned into about four or five hours of work over the course of two nights, but it was worth it. It provided an opportunity to observe my previous routine for gathering information and let me make a few informed decisions for directing a new routine. Changes in Transition By choosing to take the slower path to transition between apps, a number of things happened. I discovered blogs I was subscribed to that had simply stopped publishing I discovered broken feeds for blogs that I enjoyed and needed to resubscribe I re-evaluated many of the feeds I’d subscribed to over the years helping me get rid of the noise I was able to see problems in the way I had organized my feeds and so created a new structure to house them The net result is I removed much of the noise that was obscuring the signal, improved my ability to find the signal, and rediscovered some lost signal. The overall quality of what information I take in should increase. Changes in Interface The change in interface is forcing more changes on my reading. My process for reading feeds has always been to scan everything, clear out what I don’t want to read, skim some articles, and then go back to what I want to read in full later. Scan/Skim — NetNewsWire made this easy because it presented a list of titles only that I could quickly mark read. In ReadKit more of the article itself comes into view. This slows down my scanning a bit, but also helps me skim articles. Since I eliminated most of the noise that I would immediately remove, I now move quicker into the skimming part of the process. Save — In NetNewsWire I’d leave articles marked unread and star those I wanted to save for later. Some I’d open in a tab in the in-app browser. It was a battle sometimes. Unread articles would get marked read and disappear. Tabs were out of site and out of mind. ReadKit allows me to keep both read and unread articles around longer. It has no tabbed browsing, but does have more visible connections to read later services. Read — This is basically the same, but the ReadKIt interface is much nicer looking than my version of NetNewsWire and I find myself enjoying the reading experience more. Better search and smart folders will make it easier to find articles when researching a topic. These changes might not seem to be much, but they’ve forced a new process on me and I’m sure once I add a syncing service to the mix, the process will change yet again and provide even more opportunities to refine my process. In just a few days I can already sense a difference in the information I’m taking in. Note None of the above should be taken as a negative review of NetNewsWire. I’ve enjoyed the program for years and the coming version looks like it’s going to be very good. It just isn’t ready for me to use full time right now. The Importance of Change I’m not sharing everything above because I think you need to change the way you take in information or because I think you necessarily care how I do. I’m sharing because I want you to understand the significance of making even a few small changes in some part of your routine can bring. As I mentioned at the top we all fall into routines and habits. They help us be more productive and more comfortable. It’s a bit less scary facing the day when you know it’s going to be similar to yesterday. I think no matter how much we might uproot our lives, we all inevitably fall back into routines for good reasons. Many of us only change our routines when forced to by external forces. The reason I’m sharing what might seem like a small and insignificant change in feedreaders is because I don’t think we should always wait for external forces to bring change. We should actively make changes ourselves. Growth requires change. Creativity thrives on it. Both do better with new inputs and greater experimentation. Change forces you to see things differently. It offers a new perspective, allows for new influences, and leads to new ways of thinking. It’s good to shake up your routine once in awhile and break free of your comfort zone just for the sake of doing both. As small a change as a new app might be, it offered an opportunity for growth and a spark to creativity. It’s not really one small change I’m making, but many small changes and together they add up to something larger and more meaningful. The net result is a change in what I take in and hopefully an increase in the quality. That should lead to a change in output, hopefully for the better. When was the last time you had an opportunity to make a seemingly insignificant change? Did you take it? Did you consider how you might incorporate additional changes to make the overall change more significant? If you passed on the opportunity and remained in your comfort zone, do you know why? The post Change for the Sake of Change 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 » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

The CSS Regions Module — Control Where Content Flows - Vanseo Design

---

The CSS Regions Module — Control Where Content Flows Posted: 26 Aug 2013 05:30 AM PDT Would you like more control of your content and how it flows through your layout? Would you like an easy way to create more complex layouts? How about an easy way to independently style sections of a document, without complicated css rules that overwrite each other? If you answered yes to any of these questions, then css regions might be what you’re looking for. The last couple weeks I’ve been exploring css that’s on its way, but not quite here. So far I’ve looked at the css exclusions module, including css shapes. Today css regions are on the menu and while we can’t use them in production just yet, we can start experimenting and learning how they work. Browser support has a long way to go. Regions are supported in IE10+ (in limited form), Safari 7.0+, and iOS Safari 7.0+ Safari is currently in version 6, but that will change in the fall or you can grab a copy of Webkit Nightly. Chrome Canary also offers support if you enable the experimental Web Platform features flag. You can grab copies and get instructions here. Diagram showing regions (left) and how they might be filled with content (right) What are CSS Regions? CSS Regions provide a more advanced mechanism for how content can flow through a document and allow us to create more complex and dynamic layouts than we can right now. A region is a block container that creates a new stacking context and a new block formatting context. They allow content to flow across multiple areas that don’t need to be contiguous. Region 1 could be in the middle of the page, region 2 and the bottom, and region 3 at the very top. Each region and the elements inside of them can then be styled independent of the others. To create regions in your layout you define containers in your html and give them ids like region1, region2, and so on. You write css to locate these containers or regions the same as you would any other element. You can float them or position them or whatever you want. In another part of your html you have content perhaps inside an article tag. By connecting the article with the regions through a named flow you tell the article to flow through the different regions. Here’s how the css might look. 1 2 3 4 5 6 7 article { flow-into: article-flow; } #region1, #region2, #region3, #region4 { flow-from: article-flow; } In the code above the regions are region1, region2, etc. The order they appear in the html source is the region chain. The way they’re listed in the css doesn’t make a difference. The named flow connecting everything here is “article-flow” Working with CSS Regions CSS regions require two properties. The first, “flow-into,” places an element or the contents of an elements into a named flow and specifies if everything inside or just the content of an element should be placed into that flow. 1 flow-into: none | <ident> [element|content] For example the css below 1 article {flow-into: article-flow} creates the named flow called article-flow. By default (or by using the element keyword) the element itself is placed in the named flow. If you specify content as the value, then only the element’s content will be placed in the named flow. The second property, “flow-from,” turns block containers into regions and associates them with a named flow. 1 flow-from: <ident> | none | inherit</li> You can use the property on each individual container 1 2 #region1, #region2, #region3, #region4 { flow-from: article-flow; } or on a shared class 1 .region { flow-from: article-flow: } or anything else that targets the specific containers you want to target. Content will flow through the regions based on the source order of the regions in the html, but you can use css to locate each region wherever you want. For example in the html below content will flow through region1, region3, region2, and region4 in that order. However, using floats, positioning, flexbox, or whatever you want to layout the page you could display region4 in the top left and region1 in the middle right. 1 2 3 4 <div id="region1"></div> <div id="region3"></div> <div id="region2"></div> <div id="region4"></div> region flow break properties You can set rules for how content breaks between regions. If you’re familiar with css multi-column, these properties and how they work should be familiar to you. break-before break-after break-inside Two new values are added to each of the above. region — Always force a region break before (after) the generated box. avoid-region — Avoid a region break before (after, inside) the generated box. I’ll refer you to my post about multi-column css for more details, but the gist is the above properties and their values tell your content when to break and where they should appear next. For example if you set break-after: region on a heading, the heading will appear in one region and whatever comes after is forced into the next region. While the spec simply lists these properties as above, I had to use -webkit-region-break-before, etc. in order to get them to work in Chrome Canary. region-fragment Another property, region-fragment controls the behavior of the last region associated with a named flow. For example how should the region behave if there’s more content left than what will fit in that last region? The two possible values are auto and break and they work as follows. auto — content flows as it would in a regular content box. It can overflow the container of have its overflow set to hidden or auto, etc. break — content breaks as if it were going to another region even if none exists. If the content fits in the last region there’s no effect. ::region() functional pseudo-element A pseudo element exists for greater control in styling regions independently. This functional pseudo element can be added to any selector that matches a css region and it takes another selector as its argument. If you wanted to change the line-height of the text in paragraphs inside region1, but not any other region, you could add the following css: 1 2 3 #region1::region(p) { line-height: 1.2; } There’s a limited list of properties you can specify for this pseudo element, which you can see on the other side of the previous link. I wasn’t able to get this property to work as shown above in Canary. It still supports an older syntax, which you can see in the example in the next section. Example Because browser support is still so limited instead of linking to a live demo I’ll present an image of my results and share the code I used to get it. Once again I used the opening paragraph from Jack Kerouac’s On the Road, though I doubled it and broke it up into several paragraphs for this example. Here’s the html I used minus the text itself and a few paragraph tags to make things cleaner. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="container"> <div id="region1" class="region"></div> <div id="region2" class="region"></div> <div id="region3" class="region"></div> <div id="region4" class="region"></div> <div id="region5" class="region"></div> <div id="region6" class="region"></div> <article> <h1></h1> <p class="break"></p> <p></p> … <p></p> </article> </div> I’ve create 6 regions and given each a unique id and a common class. In the image above the first 3 regions form the row across the top, region4 takes up the entire second row and regions 5 and 6 comprise the 3rd and last row. These regions contain no content in the html. All the content is inside the article block of code. First some general css not specific to the regions: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 * { box-sizing: border-box; } .container { max-width: 48em; margin: 2em auto; padding-bottom: 10em; overflow: hidden; } h1 { font-size: 4.5em; margin: 0 0 1em 0; font-family: 'myriad pro'; } Nothing special about the above. I’m showing it just for completeness. The next bit of code sets up the regions and connects them to the article through a named flow. It also sets up some basic layout for each region. Note: I’m using the -webkit vendor prefix where necessary below. If you’re testing in IE you’ll naturally need the -ms prefix. Nothing works without a vendor prefix as I write this. 1 2 3 4 5 6 7 8 9 10 11 12 article { -webkit-flow-into: article-flow; } .region { -webkit-flow-from: article-flow; float: left; width: 33.333%; height: 300px; padding: 1em 2%; border-right: 1px solid #ccc; } One thing to note is that I’ve set a height on the regions. Without a set height, the first region can expand to hold everything and so not much interesting will happen. It’s an important consideration with regions. To adjust the overall layout, I set some css on region4 so it would sit along in its own row and split the row below equally between region5 and region6. I adjusted their heights and added borders to the top and bottom of region4. 1 2 3 4 5 6 7 8 9 10 11 12 #region4 { clear: left; width: 100%; border: solid #ccc; border-width: 1px 0 1px 0; height: 250px; } #region5, #region6 { width: 50%; height: 200px; } Next some background color for region1 and removing the right border on regions 3 and 6. 1 2 3 4 5 6 7 #region1 { background: #efe; } #region3, #region6 { border-right: 0; } Let’s break the content after the main heading 1 2 3 .break { -webkit-region-break-before: always; } Note, the above is different from what the spec calls for. There’s an additional region in the property name. I assume this is legacy still in Canary. Finally I wanted to style some things inside the regions. Again I had to use an older syntax instead of the functional pseudo element. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 @-webkit-region #region1 { h1 { color: #933; } } @-webkit-region #region5 { p { color: #339; } } @-webkit-region #region6 { p { color: #339; } } That’s everything I used to create the layout you see at the top of this section. Other than some time finding the older syntax, it didn’t take long to create. Because you have to set explicit heights before regions show off what they can do, I don’t know that we’ll use them for entire layouts, however I think they might work nicely for the opening of an article. Imagine in my example region4 (the full width row) was the last. You’d create an interesting open and then have the rest of your content below. Regions will also come in handy for art directed pages or any page where you’ll know the content in advance and that won’t be subject to arbitrary changes. You can find examples below, both from Adobe. The first links to a number of examples. The second shows what you might achieve combining regions with exclusions and shapes. CSS Regions CSS3 regions: Rich page layout with HTML and CSS3 Summary As I’ve said throughout these posts on future css, regions aren’t anything we’re going to be using today or tomorrow, but somewhere down the road they’ll mostly likely be a part of your toolbox. They offer a nice way to control how elements flow through your design and they allow for more complex and richer layouts in a relatively pain free way. You can experiment with regions now if you want. IE10+, Safari 7+ and Chrome Canary with flags set will all allow you to play around in some fashion. The post The CSS Regions Module — Control Where Content Flows appeared first on Vanseo Design.

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

When Can You Use New HTML and CSS in Production? - Vanseo Design

---

When Can You Use New HTML and CSS in Production? Posted: 22 Aug 2013 05:30 AM PDT The last week or two, I’ve been looking at some not quite ready for production css in the css shapes module and the css exclusions module. While neither is ready just yet, you might want to use them as soon as possible. Other things like flexbox are much closer to being ready. It begs the question how do we know when it’s ok to adopt new html or css techniques? Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. I don’t think there’s ever a clear line where on one side you can’t use the new and on the other you can. The decision is more nuanced and I think worth a look at some of what you should think about when deciding. Specs Some will tell you that you can’t use new html or css until the spec is finalized. I remember when html5 was first making the rounds some forum posters would point out the 2022 finalization date as though adding a single html5 tag before that date suggested you didn’t know what you were doing. Specs for css and html usually have far future dates for recommendation. It doesn’t mean you can’t use anything in the spec until that date. Browsers don’t implement everything in a spec all at once. They implement parts of the spec over time. CSS 2.1 was finalized in 2011, but I know I’ve been safely using many aspects of it since about 2003. Some parts of that 2.1 spec you couldn’t use right away and some you could. It’s the same with css 3 today and will be the same with css 4 tomorrow. The spec doesn’t really tell you when it’s ok to use something. If we can’t use the spec as arbiter where do we turn? Browsers The truth is we can start using html and css the moment browsers support them. That might mean using vendor prefixes and it might mean slight variation from browser to browser, but if a browser supports something and we use that something, it’ll work in that browser. It doesn’t mean we should use it, but we certainly can as long as we understand the potential downside. For example IE10+ currently supports css grids. It’s something I suspect a lot of designers will use in the future. Unfortunately no other browser currently supports css grids so unless your entire audience is using IE10+ you want to avoid it in production. Better is to wait until there’s enough support across browsers to justify whatever new technology you want to use. The good news is browsers are quicker at updating and adopting plenty of new things. Not all, but many. Of course, an update in the latest version of a browser doesn’t do much to change how an older version works. Until the day all browsers follow Chrome’s model with automatic upgrades in the background and until everyone is using those browsers, we’ll need to consider older versions when deciding if we should adopt something new. Browser adoption creates a range of dates for when we can use something. As soon as one browser supports something in a spec, we can start playing around and experimenting with it. Once enough older versions that can’t support it fall out of use we can feel safe in using the technology everywhere. We don’t need to wait until every last person can see the new and shiny before using it in production, though. People still visit this site using IE 5.0 which is 14 years old and counting. I have no plans to specifically consider it in any design here or elsewhere. When enough browsers and versions support something we can start realistically thinking about using it. Enough isn’t all though, so it means we need to figure out how to make the new code work in older versions of some browsers and let’s face it that usually, though not always, means older versions of IE? Polyfills One option is the use of polyfills. They programmatically add the ability to use some html or css in a browser that doesn’t have support yet. While a browser may not have implemented support for some html or css, you can write code that does the same thing. You use the html and css as though the browser supports it and the polyfill does the rest. Remy Sharp offered a good definition a few years ago A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Polyfills are meant to be temporary solutions in the sense that only the browsers that need them ever see them. As more and more browsers support new css and html the polyfill is removed for those browsers. It’s not the best idea to add polyfills for everything, but if there’s something you want to use that isn’t supported everywhere, a polyfill may exist. Sometimes the polyfill you want doesn’t exist. It still doesn’t mean you can’t use something new. Will it Break Your Site? Even if there’s no way to get something to work in an older browser you might be able to safely use it. You want to ask yourself a couple of questions. Will it break your site in some browsers? If so, are you willing to build an alternate solution for those browsers? Are you using the new to enhance a part of the design, perhaps a transition when hovering over a link? That probably isn’t crucial to your design. If some browsers don’t support the transition, so what? They’ll get a quick change instead of one transitioned over time. We should be delivering a minimum experience that works everywhere and once we are we can enhance for more capable devices. As long as those enhancements don’t break the minimal experience, we’re good to go. On the other hand if it’s something fundamental to the layout of your design and the whole thing falls apart without that bit of technology, you might want to rethink using it. If you decide you still want to use the new you have to decide if you’re willing to develop an alternative for those browsers that can’t support it. For example if you wanted to build a site using css grids, you could, as long as you don’t mind developing an alternative layout for everything outside of IE10+ Probably not something worth doing now, but certainly something you could do. Summary Somewhere in between the first browser supporting some new html or css and every browser in use supporting it, is the point where we can start using it in production. That point isn’t absolutely rooted in the ground and your decision to use the new or not will come down to you and the specifics of your project. Ask yourself What browsers and versions do you need to support? What browsers and versions do and don’t support the new technology? Do solutions like polyfills exist for those that don’t have support? Does the new technology break the minimum experience in some browsers? If so, are you willing to develop an alternate solution for those browsers? As long as you’re developing a minimum experience that works for everyone, it’s ok to enhance that experience for some and not all. If the new technology is layout critical and you’re willing to provide an alternate solution for non-supporting browsers it’s also ok. Otherwise it’s probably best to wait a little longer. The post When Can You Use New HTML and CSS in Production? 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 » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

The CSS Exclusions Module — Letting Your Content Flow - Vanseo Design

---

The CSS Exclusions Module — Letting Your Content Flow Posted: 19 Aug 2013 05:30 AM PDT Last week I took a look at the coming css shapes module. It’s actually part of a more general module on css exclusions (formerly positioned floats) and I want to look at the more general exclusions today. Like css shapes, there isn’t much in the way of browser support for exclusions. In fact there’s even less. Everything below will only work in IE10+ at the moment. However, as is the case with css shapes, exclusions are going to change a lot about how we design websites and I think they’re worth a look. Just keep in mind it’s going to be awhile before you can use any of this beyond experimenting to see how it works. What are CSS Exclusions? Exclusions define areas around which inline content can flow. They can be defined on any block level element and they extend the idea of wrapping content around elements to more than floats. The gist is you can take a block level element, position it anywhere you want within your layout, and through a single css property tell other elements on the page how to flow around it. The spec offers definitions for the different parts of an exclusion, though quite honestly they aren’t giving me a good mental picture of each of the parts. I’ll stick with the general idea, which is that you can control how content should flow around any block level element. If you’ve ever wanted to place an image in the middle of a column of text and have the text flow around it on both sides, this is it. Wow to Work with CSS Exclusions There are only two properties for working with exclusions (unless you count the shape properties we talked about last week). wrap-flow wrap-through Setting a non-floated element’s wrap-flow to anything other than auto turns that element into an exclusion. Including auto there are 7 possible values for wrap-flow defined below. Further down in the post I’ll present some images showing the result of using each. auto — no exclusion is created. both — content flows around both sides of the exclusion. start — content flows around the start edge. Area around the end edge is empty. end — content flows around the end edge. Area around the start edge is empty. minimum — content flows around the edge of the exclusion with the smallest available space within the flow content’s containing block. The area around the other edge is left empty. maximum — content flows around the edge of the exclusion with the largest available space within the flow content’s containing block. The area around other edge is left empty. clear — content can only flow before and after the exclusion. The areas around both the start and end edge are left empty. Note: Starting and ending edges depend on the writing direction of the language. wrap-through The other property wrap-through simply determines if elements inherit the wrapping-context of the parent. By default they do, but wrap-though lets you change that. There are only 2 values to consider wrap — inherits the parent’s wrapping context none — doesn’t inherit the parent’s wrapping context Exclusion Order Because you can position them anywhere, exclusions can overlap each other and the browser has to determine the order in which they work. By default they follow the painting order and exclusions are applied in reverse to the document order in which they’re defined. Huh? In other words the last exclusion in your code appears on top of the others by default. You can change this through positioning and the z-index of each positioned exclusion. Set the z-index of one to be greater than the others and it will sit on top of all of them. The image at the top of this post shows the default exclusion order for three exclusions (left) with the z-index of the middle exclusion changes so it displays on top of the others (right). Floats and Exclusions Floated elements and exclusions are similar in the sense that they let other elements flow around them. There are a few differences though. Scope — floats apply to any content that follows the float, while exclusions apply to any content that sits in the same containing block as the exclusion. Positioning — floats are part of the inline flow. You can float objects left or right, but that’s it. Exclusions on the other hand can be positioned to be located anywhere within their container. Separation of concerns — When you float an element you set both its position and how other content flows around it. Setting an exclusion only determines how other content flows around the element. The exclusion element is positioned separately giving you more control. When determining where to display floats will avoid exclusion areas, while exclusions will take floats into account. Apparently exclusions are a little more considerate than floats. Examples As I did last week, I experimented again. Only IE10+ currently support exclusions so I tested in IE10. Unfortunately it doesn’t support shapes yet so there was only so much experimenting I could do. I used the same code as last week, except for the changes from shapes to exclusions. Only the class name changed in the html. Once again I’m not showing the text itself, but I used the same opening from Jack Kerouac’s On the Road. 1 2 3 4 <div class="container"> <div class="exclusion"></div> <p></p> </div> Below is the css I used for all the examples. It should look similar to the css I used last week when experimenting with css shapes, though naturally includes the wrap-flow property (with ms vendor prefix) instead of the css shape properties. You’ll also note instead of floating the element, it’s now positioned inside the container div. 1 2 3 4 5 6 7 8 9 10 .exclusion { width: 150px; height: 150px; position: absolute; top: 125px; left: 75px; background: rgba(225, 255, 225, 0.5); border: 2px solid red; -ms-wrap-flow: auto; } With wrap-flow set to auto no exclusion is created and the elements is positioned to sit on top of the text. Below you can see the results of the other values for wrap–flow The images above shows the results of setting wrap-flow: clear (left) and wrap-flow: both (right). Notice that wrap-flow: clear displays as you would expect any block level element to display. The images above show the results of setting wrap-flow: end (left) and wrap-flow: start (right). Notice that the edge you set wrap-flow is the edge where text will be present. The edge opposite is the one that remains empty. The images above also show the results of setting wrap-flow: maximum (left) and wrap-flow: minimum (right). That won’t always be the case, but here the minimum side is the start and the maximum side is the end because of where I positioned the exclusion. I added a second exclusion to make things more interesting. I thought I would try different wrap-flow values and experiment with exclusion order, but IE didn’t seem to appreciate my efforts. I was able to add the second exclusion as long as both wrap-flow properties were set to the same value as you can see above. When I tried to use different values for the exclusions IE stopped responding. After a few restarts and failures it didn’t seem worth the effort to continue. In fairness this is experimental and hopefully before too long we’ll be able to experiment more. Below are two more articles with examples. The second uses javascript so browsers that don’t yet support exclusions can still see what should happen CSS3 Exclusions Sample Please welcome to the stage: “Wrap-flow & the CSS Exclusions”! Summary Like css shapes, exclusions aren’t anything you’re going to use in production soon, but like shapes I think they’re worth knowing about because of the possibilities they enable. My guess is both will be ready for production around the same time and you’ll likely use them together more often than not. They’re much more interesting when combined than when considered separately. Exclusions are similar to floats in that they allow other elements to flow around them. They offer greater control though, in where you can position them within your design and also in the way other elements flow around them. The post The CSS Exclusions Module — Letting Your Content Flow appeared first on Vanseo Design.

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

Finding the Balance Between Craft and Automation - Vanseo Design

---

Finding the Balance Between Craft and Automation Posted: 15 Aug 2013 05:30 AM PDT Which is more important for your design business, craftsmanship or automation? The former leads to greater quality in each site. The latter leads to a greater quantity of sites. Craftsmanship helps you sell individual projects, but automation helps you sell more projects. Which is more important? Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. Two recent posts about scaling a startup or products for an existing business caught my eye. Paul Graham started the conversation talking about startups and Jason Fried extended things to include new products for existing businesses. The gist of both is that while we tend to think of automation as the end goal, sometimes it’s better to do things manually. The focus of both articles is on gaining customers and hiring employees, but the overall point is that manual is sometimes better than automatic. Creativity and Productivity Craftsmanship and creativity seem to be at odds with automation and productivity. The former two focus on what’s unique in each project and place emphasis on quality over time. The latter two reverse that. They emphasize getting as much done in the shortest time frame possible, which means taking advantage of the repetitive. Craftsmanship and creativity Focus on the unique aspects of each creation Meander to explore every unturned stone Pay extra attention to details Will start over again if things are just right Emphasize quality above all else Automation and productivity Focus on the repetitive qualities of all products Modularize and abstract repeated tasks Are willing to give up some detail to save time Will test some to ensure reasonable quality for all Emphasizes efficiency above all else A craftsperson takes his or her time to get things right. Craftsmanship is a slower moving process. It’s not that craftspeople aren’t concerned with time. They would certainly prefer to do things quicker and their experience helps them do just that. It’s more that quality takes precedence quantity. Automation is a quicker process. It’s not that automated processes don’t want to produce quality. Better is still a goal and parts of the process can be improved again and again to improve quality. It’s more quantity takes precedence over quality. Where a process based on craft might strive for perfection in each and every product and detail, a process based on automation strives toward a little less than perfection because that little less means so much more can be produced. Craft and Automation in the Design Process At first glance you might see designing a website as mostly on the craft and creative side, but automation and productivity are certainly present, especially when you start to think about design as a business. Even with the most custom of projects, we repeat many steps we’ve gone through on previous projects. For example: Making decisions about type Choosing a color scheme Building a grid Sketching and wireframing Developing a style guide Creating design comps or other deliverables You might not do all of the above and you probably do some things not listed, but the point is there are things you already know you’re going to do in the process of designing your next website. Each of the choices you make naturally depends on the specifics of the project. You shouldn’t, for example, choose type or color without knowing anything about the site in question. However, the act of choosing these things is something you’ll repeat again and again. The specific decisions you make in regards to type, color, grids, etc. are the craft side of the process. That you’ll consistently consider them on every project is the automated side of the process. Increasing Efficiency in the Craft of Design How might we make our design processes more efficient while maintaing as much of the craft and the quality as possible? In a word constraints. For example think of all the possible typefaces you might choose from for your next project. You aren’t realistically going to compare each and every one. You don’t need to. You’re choosing one to help communicate something and with a handful of different faces you can probably communicate most anything your next project needs. So you build a palette of typefaces and learn to combine them in different ways to provide yourself with enough variation for any situation. The variation is the craft. The constraint of the palette is the productivity. If you encounter a project that isn’t served well by your palette, you focus a little more on craft and reach beyond your palette. You find the typefaces that work and expand your palette for the next time. You can Learn to work with a palette of different color schemes Develop a library of grid layouts Build a library of components Not everything will lend itself to these kinds of cross project constraints, but that’s ok. We naturally do things on each project to quickly add constraints. The acts of sketching, wireframing, and prototyping aim to quickly get at a general solution before having to spend the greater time on the details. Style guides, mood boards, and style tiles do similar. Each presents and handful of options to set a direction for further detailed exploration. In other words do what we can to quickly add constraints and eliminate as much as possible (productive) and use the time saved to then spend more time getting the details right (craft). Summary Whether it’s creativity vs productivity, quality vs quantity, unique vs repeatable, or some other similar comparison, this debate comes up often in business and often in a way that suggests you have to choose one at the expense of the other. I don’t think this is the case. Both craftsmanship and automation have their place. Each has different strengths and weaknesses. The key to getting the best of both is a balance between them. Take the time to consider whatever you’re doing and understand how you can isolate different parts of the process. Then look at each of the parts and determine whether it would be better served by a focus on the quality of the unique or the quantity of the repetitive. Know that there isn’t going to be an absolutely correct choice in how you decide. There’s quite a bit of craft in the choice of what you decide to automate. The post Finding the Balance Between Craft and Automation 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 » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

iCan't Internet

---

Important Features of SEO for Online Marketing Posted: 15 Aug 2013 08:59 AM PDT SEO is a broad concept with a wide variety of procedures and methodologies. Although the word SEO apparently seems to be quite simple, yet it includes a great variety of tactics and formulations to... [[ This is a content summary only. Visit my website for full links, other content, and more! ]]

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

The CSS Shapes Module — Breaking Out of the Box - Vanseo Design

---

The CSS Shapes Module — Breaking Out of the Box Posted: 12 Aug 2013 05:30 AM PDT One of the limitations of developing websites is that everything is fundamentally a rectangular box. We fight against it. We create non-rectangular images, we round corners, we have a variety of creative techniques to display less box-like shapes, but still behind the scenes each of these things sits in a rectangular box and other elements react to that box seen or unseen. The above won’t be the case forever. One of the W3C specs that’s getting talked about recently in designer and developer circles is the CSS Shapes Module. Before I get too far into this post, please know that CSS Shapes is a level 1 working draft module and it’s not something you’re going to be using in production any time soon. It’s possible that much of what I detail here will even change by the time you can. Normally I prefer to wait until something is closer to being production ready to talk about it here. However, this spec has the potential to completely free us from always having to use rectangles and that possibility should excite you. How text wraps around a css shape defined by an image Browser Support Let’s start with the bad news. What kind of browser support do CSS Shapes have right now? Not much at all. There are currently two options for getting css shapes to work and those are Chrome Canary and Webkit Nightly, neither of which is meant to replace your every day browser. If you don’t have either currently installed, grab one or both. Click on the link above for instructions on setting the correct flag in Canary. Webkit should work out of the box. I’ve only used Chrome Canary myself so far and can’t say for certain how everything below works in Webkit Nightly, but I have no reason to doubt that it works the same way. What are CSS Shapes? These aren’t shapes created by rounding corners, getting creative with borders, or making use of before and after pseudo elements. Those look like shapes to us, but other elements on the page see them as the rectangular boxes that they really are. If you’re interested in the above kind of shapes you can find details in the following posts and many others can be easily found with a bit of searching. The Shapes of CSS Pure CSS GUI icons The css shapes in the new spec are different. The major change is that other elements won’t automatically see a rectangular box and will flow around the shape created. With just a few css properties we’ll be able to turn rectangular boxes into geometric shapes that allow inline content to flow around them. In the first level of the spec it’s only applied to floated elements, but future levels of the spec will include non-floated elements as well. This really opens up the potential for how we can design websites. Not that I expect rectangular boxes to ever go away, but being able to use other shapes fundamentally changes things. It’s important to note the box model itself isn’t changing. The element is still contained inside a rectangular box defined, by width, height, paddings, borders, and margins. What’s changing is how other elements can wrap around them. Five shapes are currently supported rectangle inset-rectangle circle ellipse polygon Each is defined using syntax similar to the the basic shapes of SVG and you can additionally define shapes from the alpha channel of a source image. Working with CSS Shapes It’s hard to know how much of this will change, but for now we’re dealing with just a few properties and they’re relatively easy to understand. shape-outside shape-inside shape-margin shape-padding shape-image-threshold At the moment you’ll need to use the -webkit vendor prefix to get these to work in both Canary and Webkit, though I suspect in time Canary will drop the prefix. The first two properties are used to declare the 5 supported shapes mentioned in the section above. 1 2 -webkit-shape-outside: rectangle(x, y, width, height); -webkit-shape-outside: rectangle(x, y, width, height, rx, ry); x and y are coordinates for the top-left corner of the rectangle, relative to the top-left corner of the element’s container. Width and height are just what you think and rx and ry are for setting radii to round the corners. 1 2 -webkit-shape-outside: circle(cx, cy, radius); -webkit-shape-outside: ellipse(cx, cy, rx, ry); cx and cy are coordinates for the center of the circle or ellipse, again relative to the element’s container. With circles a single radius is set and with ellipse, both horizontal and vertical radii are set. 1 -webkit-shape-outside: polygon(x1 y1, x2 y2,…, xn yn); The polygon can take as many x and y coordinate values as you want to give it. Again each is relative to the container. Set 3 points and you’ll have a triangle, set 4 points you have a rectangle and so on. Trying to figure out all the different coordinates for more complex shapes probably isn’t the most fun thing you can do, but have no fear. You can use tools like Poly Draw to figure the coordinates out for you. The shape-inside property works the same way, except, as the name implies, it affects what’s inside the element’s border as opposed to outside. The spec mentions it will be defined in a future version, but it works now in Chrome Canary and Webkit-Nightly. 1 2 -webkit-shape-padding: 20px; -webkit-shape-margin: 2em; Both shape-padding and shape-margin take a single length value that is used as the padding or margin over the entire shape and is perpendicular to the shape at every point. Each can be used on any of the supported shapes. 1 -webkit-shape-image-threshold: 0.5; I haven’t yet experimented with the shape-image-threshold, but the idea is it gets a value between 0.0 and 1.0. A value of 0.5 means that all pixels more than 50% transparent in the image are used to define the path of the shape. Naturally you’ll need to use images with transparency so .pngs or .gifs and not .jpgs. Examples Since support is so limited I didn’t create a demo for you to view. Instead I played around locally and captured some screenshots. I’ve added the code I used for each example so you can recreate them. One thing that tripped me up at first was trying to set a background color on the shapes. The background fills the rectangular box defined by the box-model. Borders do the same. They didn’t follow the shape as I expected they might. Perhaps at some point in the future that will change. Aside: For the literary minded among you, the text in all examples is the opening from Jack Kerouac’s On the Road. I didn’t show the text in the html snippets below to save some space. Example 1 This first example is simply a circle shape floated to the left. I gave the shape a background color and a border so you can see how the box model is still at work. However, you can see the text flows around a circular shape. 1 2 3 4 <div class="container"> <div class="float-left"></div> <p></p> </div> 1 2 3 4 5 6 7 8 9 10 11 .float-left { width: 100px; height: 100px; float: left; -webkit-shape-inside: circle(50%, 50%, 50%); -webkit-shape-outside: circle(50%, 50%, 50%); -webkit-shape-margin: 50px; -webkit-shape-padding: 50px; background: #ccc; border: 1px solid red; } Example 2 The text below wraps around two triangles, one floated left and the other floated right. On the right you can see the borders around each. Both triangles were created using the polygon shape and specifying 3 points. 1 2 3 4 5 <div class="container"> <div class="float-left"></div> <div class="float-right"></div> <p></p> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .float-left { width: 100px; height: 600px; float: left; -webkit-shape-inside: polygon(0 0, 0 100%, 100% 100%); -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); -webkit-shape-margin: 50px; -webkit-shape-padding: 50px; } .float-right { width: 100px; height: 600px; float: right; -webkit-shape-inside: polygon(100% 0, 100% 100%, 0 100%); -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); -webkit-shape-margin: 50px; -webkit-shape-padding: 50px; } Example 3 The circular text below is formed using only shape-inside. I’m not sure why, but no matter what text is used, the first line always defaults to using a single word. 1 2 3 <div class="container"> <p></p> </div> 1 2 3 4 5 6 7 8 p { width: 475px; height: 460px; margin: 0px auto; -webkit-hyphens: auto; -webkit-shape-inside: circle(50%, 50%, 50%); text-align: justify; } Example 4 Similar to the example above, the text here is shaped using shape-inside, though this time as a polygon. I didn’t try to calculate all the points. I used the Poly Tool I mentioned above to create the shape and then copied the points for the polygon. 1 2 3 <div class="container"> <p></p> </div> 1 2 3 4 5 6 7 8 p { width: 500px; height: 725px; margin: 0px auto; -webkit-hyphens: auto; -webkit-shape-inside: polygon(26.42% 23.00%,25.27% 33.09%,21.12% 42.93%,17.24% 51.85%,14.35% 62.28%,15.09% 82.32%,22.83% 93.37%,72.92% 92.87%,66.65% 82.28%,66.38% 65.43%,69.23% 54.09%,74.08% 43.75%,77.29% 32.91%,77.50% 22.57%,72.42% 6.63%,20.83% 2.88%); text-align: justify; } Mine are hardly the only examples of css shapes online. Here are some examples others have created for additional inspiration and explanation. CSS Exclusions and Shapes is moving forward Experiment with CSS3 Exclusions and Shapes module CSS Shape Inside Growing and Shrinking Polygons: Round One Padding the Rounded Rectangle Summary Once again this isn’t anything you can use in production at the moment, though it seems like browser makers are on board and progressing in their implementation. You can experiment now in Chrome Canary and Webkit Nightly.. I don’t expect we’ll be using these css shapes on live sites in the very near future, but I think they’re something to get excited about. I’m excited by the possibilities the css shapes module offers, especially when non-floated elements are later included into the mix. I hope at some point we’ll have more control setting the background to sit behind the defined shape instead of the containing box. Assuming that happens, we’ll no longer be constrained to treat every element as a rectangular box. Down the line this should open up many possibilities for more complex and richer compositions, which again is something that should excite you. The post The CSS Shapes Module — Breaking Out of the Box appeared first on Vanseo Design.

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