Adobe Edge Reflow: Adapting with ‘Responsive Web Design’

We live in an age of screens. You are looking at one right now, and so am I. In our modern lives we are constantly staring at screens of various sizes, and as the diversity of resolutions and aspect ratios has grown over time, so has pressure on web developers to adapt their designs to the changing demands of the end-user.

The first reaction of many developers to having to cater to different screen sizes has been to create multiple static comps for the same project. But the drawbacks of this approach quickly become apparent when you imagine trying to design 4 or 5 versions of the same website, while trying to keep the design clean, functional and aesthetically consistent. You would then have to update each one separately every time the client makes a change. This could rapidly turn into a time-consuming nightmare!

So the need for intuitive designs that can automatically adapt to different screen widths can no longer be ignored. We coined this philosophy ‘Responsive Web Design‘ but until now developers have mostly been forced to either try and repurpose their existing tools to find work-arounds they were not designed for, or work directly in code  - which despite being accurate and clean, can hinder the artistic spontaneity that can be so important to the design process.

The newest addition to Creative Cloud, Edge Reflow, allows you to simultaneously design for different screen sizes using a visual workspace to set media breakpoints and is one of the only tools specifically designed with Responsive Web Design in mind.

Screen Shot 2013-03-14 at 11.14.47 AM

Screen Shot 2013-03-14 at 12.07.10 PM

 

As content is added, resized, edited and moved around on the canvas visually, Reflow translates these changes into CSS script in real-time in the background. This gives you the choice of working either visually, using the canvas to create a layout as you would in Illustrator or InDesign, or by editing CSS values in the context-sensitive side panel to alter the individual attributes of an object:

 

Ever-present at the top of your canvas is the media breakpoint bar. This is where you set color-coded breakpoints for each screen size:Screen Shot 2013-03-15 at 12.59.14 PM

Once you have settled on a layout for one, clicking on the next breakpoint causes the page’s content to manouevre automatically to try and fit within the new width (normally in an unhelpful way). You can then tweak the layout, replace or remove objects and reformat text until you are happy, and then move onto the next breakpoint.

Screen Shot 2013-03-15 at 1.15.39 PM

Reflow is very clever in its use of color-coding for content-specific attributes in the side-pane. When an object is selected, the backgrounds of related attributes change to match the color assigned to the layout in the breakpoint bar. This allows you to quickly see if a value is specific to the breakpoint you are looking at, or if it was originally set on another.

The beta still lacks the ability to choose your own colors for these labels, and although the CSS code Reflow writes as you design is very clean and uses a full array of CSS formatting controls, it does not yet allow you to name layers or text styles.

There are of course other flaws that will hopefully be addressed once the beta has been picked apart and the full version is released, but there is also some very nice extended functionality potential in Reflow being used as part of the Edge suite. Such as being able to preview your design on different devices in real-time using Edge Inspection, and the possibility of incorporating assets created in Edge Animate.

We are looking forward to the full release. It should tide us over until they come up with round screens, or say, 3D websites… and when that day comes, may the God of Responsive Web Design have mercy on us all!!

Photoshop CS6 at your fingertips

Being a designer means working to deadlines – which means time is always of the essence. Working quickly and efficiently within Photoshop is essential and there comes a point when your poor mouse just can’t scurry around the screen fast enough to keep up.

Adobe have always included keyboard shortcuts to reduce the little guy’s workload, but one issue with these is that they have been tweaked and moved around over the years, and it can be a little irritating to have to go against muscle memory, established over countless hours of working, to learn the new shortcut for something you have always used. My fingers still seem to be reminiscing about the good ol’ days of Photoshop 7: holding down cmd+Z to start the ‘undo’ time machine. I still forget to press shift every time!

Another, less trivial drawback has been that shortcuts have never taken into account that a tool as incredibly diverse as Photoshop allows (nay, encourages) us to pursue our desired results in a plethora of different ways. We all have our favorite tools and no two users work exactly the same way – so why do we all have to use the same shortcuts? If I constantly use smart objects, then I’m going to want my keyboard to be littered with ergonomically friendly shortcuts for adding and editing them. Someone else may never use smart objects and would make better use of those same convenient keys for, say, zooming controls.

Well, CS6′s answer to the problems with shortcuts was to give us another shortcut:

cmd+opt+shift+K

(ctrl+alt+shift+K in Windows)

…which opens the new keyboard shortcuts customization menu:

Photoshop CS6 Keyboard Shortcuts Customization Menu

This new feature for CS6 allows you to optimize your shortcuts for exactly the way you like to work. You can overwrite default shortcuts that you may have a grudge against, bring back retro shortcuts that your fingers still try to use, or you can introduce entirely new ones to save yourself even more time.

Through this menu you are able to edit shortcuts for menu commands, tools, and palette menus. More than one key command can be assigned to one action, and Photoshop will tell you if you have any conflicting commands and show you the duplicates so you can fix them.

One very useful feature, especially if you often use Photoshop on multiple computers, is the ability to save your configurations and export them as a handy .kys file. Being able to save means that our preferences can now survive version updates and the obsessives amongst us can now gradually build our dream set of optimal shortcuts (some dreams are cooler than others) and keep them forever!

Quick Tip: Using Dreamweaver for your CMS Development with Drupal, WordPress, Joomla, etc

Drupal, WP and Joomla icons next to each other

Are you looking to do some theming or plugin development for a common CMS (Content Management Systems) such as Drupal, WordPress or Joomla? If that’s the case, then this tip may be useful for you. Dreamweaver CS6 has a neat option to provide code hinting for common CMS’. Start by setting up your server and local environments in the Manage Sites panel then open up one of the PHP scripts for whatever CMS you may be using. Once you have a document open, go up to the Sites menu once again and find the item “Site Specific Code Hints”. A window will come up, but as long as it is a common CMS, Dreamweaver should automatically recognize which CMS it is, so all you should have to do is click OK. After you have done this, Dreamweaver will add a config file to your local site and from then on out you will have code hinting for your custom web development with your CMS of choice.

Adobe Creative Cloud CS6

What is Creative Cloud?

Creative Cloud is the new way to use Adobe CS6’s Master Collection. Everything is exactly the same with a couple of differences:

  • There are no CD’s, you download from Adobe and install on your computer as before.
  • Once a month, the software runs an online check to make sure you’ve paid your monthly fee.

How Much does it Cost?

Rates when signing a 1 year commitment:

  • Current CS3 and up users: $29.99 per month until 8/31/2012. In September, $49.99 per month.
  • Teacher and Students: $29.99 per month.
  • New Customers: $49.99 per month
  • Rate for paying month-to-month without a 1 year commitment:
  • $74.99 per month with the ability to cancel at any time.

Are they Web-Based Apps?

They are NOT Web-based apps. You download the software and install it on your computer just as in the past. The CS6 software is not internet based.

What if my Internet Goes Down?

Your software is safe. Once every 30 days, Creative Cloud runs a check to make sure you are up to date with your subscription. The software will alert you if you need to connect to the Internet for a license status check.

Why did Adobe Introduce Creative Cloud?

Adobe decided that lower upfront costs and better access to updates is essential to those in our industry. In addition, all upgrades are included. When Adobe comes out with new features, they won’t wait 18 months for a new release. Basically, if they develop something as earth shattering as Content Aware was, your update is included in your monthly fee.

Also, you have access to web fonts with Adobe Typekit. Adobe Digital Publishing Suite is also included for delivering content to virtually all devices.

Do I have to Download the Entire Creative Suite?

No–You may download one application, or all of them. If you decide to download other apps later on, you are able to add to your Creative Suite.

What if I have 2 Computers?

You can download the software on 2 computers as long as you are not accessing it on 2 computers at once. A big benefit is if you work on a PC at work, and a Mac at home, you can dowload both versions, so long as they both aren’t being used simutaniously.

What’s with the Cloud Storage?

With Creative Coud, you can sync 2GB of ALL files (not just Adobe files). You can sync between computers, tablets, or mobile devices. Adobe adheres to top level security, and your files are extremely safe.

I Work for a Corporation: Does the membership stay with the organization if an employee leaves?

Yes, the membership for companies is attached to the corporation, not the individual.

I use Dropbox–Why should I switch?

Creative Cloud has capabilities designed specifically for creatives:

  • View thumbnails and larger previews of creative files in the browser to make them easier to find visually.
  • Change layer states of PSD files and step through Illustrator art boards and InDesign and PDF pages in the browser.
  • Easily share files for review via the web browser.
  • Convert creative files to PDF to share them with clients and colleagues.
  • Sync directly with Adobe Touch Apps and desktop applications to enable a seamless workflow between tablet and desktop.

Are there any more Bells and Whistles?

The montly Creative Cloud gives you access to every app in the Creative Suite, from Photoshop, to Dreamweaver, to InDesign.

  • Access to Adobe Typekit: Gives web designers sophisticated fonts on the Web with new capabilities with CSS.
  • Adobe Digital Publishing Suite (DPS): Create tablet apps directly within InDesign with interactive features such as pinch and zooms. Create content for iPhone, iPad, iPod Touch, Kindle Fire and other Android devices.
  • Adobe will not wait for a new major release to add new features. They will be updated automatically.