Little Update to Brackets Reflow Cleaner

reflow-brackets-workflow

I made a little update to Brackets Reflow Cleaner.  This is the Brackets extension that can extract information out of Reflow asset files and allow you to speed up developing designs created in Reflow.

Here’s an example:

 

I’ve added support for extracting gradient information in both colors, and its own location.

Check out my video to see what Brackets Reflow Cleaner can do.

PANMA January 2014

panmaI’ll be speaking in the Philadelphia area this Thursday January 30th at the monthly Meeting of PANMA.

PANMA for anyone not acquainted with them is the Philadelphia Area New Media Association.  It’s a great group of people and it’s a great opportunity to network with people from various viewpoints in the digital world.  

I’ll be talking about getting your websites to work on mobile devices.  It’s a departure for me from my normal schtick.  I normally push responsive web design as the only real option, and recommend that you use Adobe Edge Reflow for it. I’m changing my tune a bit, as I realize that not everyone has access to the resources to make a pure responsive site happen.  So I’ll include other paths from Adobe, including Adobe Muse, Dreamweaver, Photoshop/Edge Reflow, pure code, and others.  We’ll see how it goes. 

Details:

Date: Thursday, January 30, 2014
Time: Doors open at 5:30pm. Program runs 6-7:30pm. Q&A and networking until 8pm.
Location: Room 260, Huntsman Hall, 3730 Walnut Street, Philadelphia, PA 19104

Please register: https://panma.eventbrite.com

Apache Config file support for Brackets

I’ve been doing a bunch of tweaking of Apache files on my development machine because I had to do some machine hopping.  In the course of doing that I found myself wishing there was syntax support for Apache config files in Brackets.  I looked; I couldn’t find it.  If I want it, I have to do it.  So I did.

brackets_apache

It’s pretty simple, considering that it is a CodeMirror Mode, and I don’t really understand how it all works.  It provides syntax highlighting for .conf files and .htaccess files.

Here’s the GitHub repository; if I get any interest I’ll add it to the Brackets Extension Registry. I’d love to get some other eyes on it to make sure I’m not doing anything colossally stupid.

Reflow Cleaner

reflow-brackets-workflow

Disclaimer: Reflow isn’t intended to be used the way I will layout, and this isn’t an official Adobe thing.  This is just me fooling around with some ideas. 

As a follow up to my post about what you do after you work with Adobe Edge Reflow, I’ve been exploring the source code Reflow creates looking to see what I can do with it. I’ve also been experimenting with Brackets to see if I could use that to deliver some workflow here.  My experiments have yielded the unoriginally named “Brackets Reflow Cleaner.”  It does what it sounds like, it cleans the output you generate with Reflow in Brackets into something approaching that which you would use in a hand coded HTML file. How does it work?

In Reflow, I use the ability to label parts of my design to indicate what I want things to be.  

reflow-cleaner-org-orig

I label things with element names to output them as elements.

reflow-cleaner-org-element

I add a period to the front of a string to mark it as a class.  

reflow-cleaner-org-classes

From all this I can create an outline that looks like my eventual HTML should look.

reflow-cleaner-org-all

Now Reflow doesn’t really care about all this as you can see by the HTML it outputs. It turns them into id’s.

reflow-cleaner-html-before

However, I have the HTML. I can run processes on it to convert it to something else.

reflow-cleaner-html-after

Now the CSS is a little different.  It is very verbose, full of ids, and crazy percentages. I’m not sure what to do with it.  But I can analyze it and maybe pull out some interesting details from it.

Color

reflow-cleaner-colors

Font

reflow-cleaner-fonts

Breakpoints

reflow-cleaner-css-breakpoints

I can even use the intelligence on the classes I setup in the Reflow file to analyze classes to figure out what was the same about them and create common classes for them.

reflow-cleaner-css-after

Here’s a video with a complete demonstration of it. 

I wrapped all of this up in a Brackets Extension so that if you wanted to play with it, you could. It’s Open Source and available on github. 

This is an experiment and a starting place.  I’d love to hear from anybody that give this a try.  Is it usable? Does it help you do anything.  Is this a crazy waste of time?  All opinions welcome. 

 

Reflow Gets Support for Regions

There’s bound to be a lot of excitement from my colleagues today about the awesome addition of CSS Regions to Mobile Safari and support in Adobe Edge Reflow and Adobe Edge Code. I share it, but I want to focus on the fact that you can start working with these features today in Reflow.  For the longest time, I’ve been talking to audiences about both our new tools, and our efforts with the W3C, but to be able to see them come together like this is awesome. 

The big question for regions is “how would I actually use it” and fooling around with it in Reflow allows you to answer that for yourself.  Where would you use it? Try it and see.  My answer: you use it where you need reflowable content that keeps a layout you want despite not being pixel stable. Let me show with this example.

Here is a screenshot of an article layout in Adobe Edge Reflow.  You can see I’ve laid the article out in several columns around a picture. 

regions1

The great thing about Regions is that those columns remain stable despite the contracting screen (as you can see in following screenshot).  I don’t have to worry about how the text will layout cause I’ve given it general instructions on how to do it.

regions2

But eventually that layout won’t work, those three columns will get too tight. No worries. Reflow allows me to make responsive decisions that really make my content layout correctly, but still allow me some variety in layout. 

regions3

And finally when the design just won’t work anymore, I linearize the content, and I have an article that is readable everywhere, but has magazine like layout where it make sense. 

regions4

Keep in mind that right now you’re going to be limited in using these features in Canary and Mobile Safari.  But I think our hope is that the more people that make compelling layouts with these technologies, the more browser vendors will see that this is tech that they want to include. So check it out on the Adobe Web Platform Blog, and create some awesome layout in HTML.  

Update:
If you want to fool around with the Reflow file I used in this example, here you go.

I Used Reflow, Now What?

reflow

One of the most frequent questions I get when I show off Reflow is:

Once you finish creating something in Reflow, what is the next step? How do I make this cool resize-y thing show up on someone else’s screen when they go to a particular website?

It’s a tough question that doesn’t get you a super slick and quick answer yet. What it will get you is a few hundred words of “Let me explain.”

TL;DR: There isn’t a good workflow between Reflow and site development yet. But I still think it can be useful to you. 

Let me explain. Reflow doesn’t create an HTML site. It creates an HTML composition. I’m not just being buzzwordy; it’s a design tool. You create compositions with it, not websites. You still have to take what you create in Reflow and hand it off to a developer.  If you look at the tool, you’ll notice there is no facility for adding things like links or workable buttons.  You can draw these things using rectangles, rounded rectangles, and text, but you can’t create something in Reflow that allows you to click anywhere in preview.  You’ll also notice that the preview is only supported in Chrome, because Reflow isn’t trying to solve cross browser issues. Neither does Photoshop — because design tools don’t handle cross browser issues. Reflow creates something like a Photoshop comp but in HTML so it can be rendered in the browser and that you can be resized and viewed in a range of different screen widths.

But, I saw it in my browser, it creates HTML — you just said it did?

Oh, yeah, that.  Um, sure it creates HTML – sub optimal HTML. You see, I’m originally a developer, so suboptimal is short hand for terrible. And terrible is shorthand for I didn’t write it by hand, myself, while complaining about how designers want things that can’t be done in HTML and CSS.  

Assuming one doesn’t care about that, maybe you just want to get stuff done while not whining about code quality.  OK, you can totally grab that code and use it to start your site.  The code is located in the assets folder in the same folder as your .rflw file.

Well that’s an inefficient and poorly designed workflow.

It’s not inefficient and poorly designed, it’s nonexistent. There is no workflow there. What I’ve told you to do is a hack. From Reflow’s perspective there is a brick wall between designing in Reflow and developing for the browser.  That might be a deal breaker for you, and if it is I’m sorry but I won’t lie and say there isn’t a wall there — you’ll only be madder at me when you figure it out.  But I will point out there used to be a brick wall between designing in Photoshop and designing in Reflow.  That is now gone. I can’t talk about future plans, yada yada, but assume that the Reflow team is annoyed by all the brick walls around here and are resting for bit after swinging a pretty big sledgehammer with the help of the Photoshop team.

So what’s your workflow with these tools?

Personally, I design in the browser first and then Photoshop. Basically, my design chops and more importantly my Photoshop chops need work. I start designing where I can be the most facile, where there is as little impedance between my brain and creative output as possible. For me that is the browser and some CSS, for you that might be Photoshop or a pen and paper.  Once I get things like color, font, and site nuggets done in the browser, I bring it back into Photoshop. In Photoshop, I tweak color, font, and base layout. I also refine ideas for site nuggets, and things like borders, shadows, color interaction, etc. Once I get it done there, I move into Reflow.  Of course, once I start in Reflow, I have to do a little organization. Then I use Reflow to figure out where I need break points in my finished design, and how I will want the parts to move around. I also use it to figure out what I did in Photoshop that looks great static, but starts to look bad once I start resizing and moving things. Once I’m satisfied, I move to coding by hand. I do use Reflow’s ability to export CSS snippets to speed up this process. I also grab the HTML from the preview version, but I rip out almost all of the HTML because Reflow doesn’t create things like lists, or blockquotes, and the HTML isn’t very semantic. Basically, I use it to get the text, just the text.

So that’s it, like I said, lot of explanation instead of slick answers.  My hope is that slick answers and no brick walls happen in the future. But until then, I think there is a place for Reflow in a web design workflow, it just doesn’t get rid of a lot of work on the development side yet.

Photoshop Generator with Reflow

The newly released Photoshop Generator feature works awesome with Adobe Edge Reflow.  I used it to redesign my site. I was very happy and very productive.  However when I first launched this, I ran into an issue where it didn’t work the way I thought it was.  Basically I thought that the magic was miraculous instead of just incredibly cool.  When you first convert a PSD to Reflow you have to take a moment and organize the Reflow project before you start designing a set of responsive layouts. Once you get how Photoshop exports, it makes sense. But at first you have to do some work for yourself. I have a video showing how to do this. 

The video will also take you through adding Typekit support to a generated Reflow project.

Hope this helps!

Theseus – A Promising Reason to Use Brackets

brackets_iconFrom time to time, I show off Brackets, the Open Source HTML/JavaScript/CSS editor Adobe has been working on for the past year and half.  It’s a great bit of work, and it looks great. However, a lot of people point out that there are a lot of other code editors that can be used on HTML out there.  Which is is true – so let me show you a compelling reason to use Brackets: Theseus.

Theseus is a research project that brings debugging to JavaScript in the editor. Not just debugging, but crazy real-time debugging that’s easy to understand and jump right into.  Check out the explanation of Theseus over at the Brackets team blog. And then check out the GitHub repo.   Seriously, if you work with JavaScript, do it now – you won’t regret it.

Also, just as an aside, it turns out that Brackets is up for a Readers’ Choice Award from Linux Journal.  If you’re a fan please give it your support by voting for it.

Upgrade Creative Cloud to Creative Cloud for Teams

I was asked this week if it was possible to upgrade from an individual Creative Cloud account to a Creative Cloud for Teams membership AND get the discount for being a Creative Suite Customer. Added complexity? There are multiple accounts to upgrade. It appears to be possible, here’s how you do it.

Go to http://creative.adobe.com.

If you are logged in, log out.

cc-upgrade-logout

You should have the login screen. From that screen choose “Get Started”

This will takes you to the plans page, navigate to “Plans for Teams & Business”

Under Upgrade choose “Join.”

cc-upgrade-teams

You will be taken through the steps to join.

Enter the Adobe ID of the account that you want to be the manager of the whole team

cc-upgrade-account

You’ll be prompted to enter a serial number for to see if you qualify for upgrade pricing.

cc-upgrade-qualify

After your qualify you will have to go through the rest of the sign up.

At the end, your account will now have the ability to manage a team.

cc-upgrade-newoption

From this point on, you can now invite additional accounts.

cc-upgrade-invite

Hope this helps!