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!!

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.

Turns out LESS really is more

 

Today I will briefly go over a new means to style your webpage. You most likely have some experience or familiarity with CSS, but for those who do not, CSS (cascading style sheets) is the web standard for giving design to your page. The problem I have found with CSS in the past has been that it is very much so static, meaning that everything you want your CSS to do with your elements of the page you have to write out specifically. I want my styles to be dynamic, I want elements to be styled differently under different circumstances, and I don’t want to have to type the same thing over and over again just because I have elements that require similar styling. With LESS, this is no longer a problem. What LESS is essentially is a language to program you CSS instead of writing static stylesheets. LESS follows similar syntax as CSS but allows for things such as variables and functions, making your styles take shape according to output (desktop, mobile, etc.) or other conditions and also allows for reusable code and styles. Even better on the reusable code, you can import other LESS stylesheets into your styles. Why would you want to do something like that? Well what this will let you do is build a series of functions and styles that you know you will be using in pretty much every web project so you dont have to rewrite the styles at all. For those of you who are programmers, it’s the same a building libraries. Also, since the language is so similar to CSS, you will be able to take advantage of some of your code hints in Dreamweaver or the IDE of your choosing.

LESS is very easy to use. By only importing the less.js javascript file and a slight change on your typical linking of stylesheets, you can bring in your LESS styles.

iPhone Application Development: IT’S BACK!

Ascend Training is happy to announce the return of our iPhone Application Development class! iPhone, iPod, iPad Application Development (5 days, $2490) has just been added to our catalog of classes. Ascend Training is proud to have Gene Backlin, author of Professional iOS 4 Application Development: Building Applications for the iPhone and iPad, teaching this exciting new topic. The class will be exclusively taught at our Chicago location (410 S. Michigan Ave., Suite 433) on the following dates: November 29-December 3 and February 7-11.

Please contact our IT Administrator, Jeremy Chambers, about prerequisites for the class.

What do you get for the phone who has everything?

iphone, rumors, questions, next

What to do next with the coolest phone Ever?

So ok–it’s going to be a while until we get Flash for the iPhone, but I think we can all agree that it’s still pretty cool. The question is: now that you can do almost everything on the iPhone, like getting GPS Driving directions, reading e-books with the Kindle App, checking your email, stock quotes, and weather forecasts, and watching movies…what’s next for this niftiest of devices? I know! NEW APPS for it!

When the iPhone came out in 2007, most users were impressed and pleased with the number of cool applications you could get for it; in fact it’s this that makes the iPhone more of a palmtop computer than strictly a phone–you can load new software and get upgrades just like you can with your laptop or desktop. That said, the idea of WRITING software for the iPhone was, and still is for many, a black box. What’s involved in writing an app for the iPhone? Do you have to learn a new language? Does it mean you have to HAVE a Mac computer…or even own an iPhone?

With the meteoric takeoff of Apple’s App Store, it’s become clear even to the comparative luddite that someone is creating all these apps, and with the iPhone gaining (still!) in popularity, it seems likely that more and more people will learn how–but how?

Well, as far as that goes, there are a couple of ways to get going, but the best we can think of is a class on iPhone Application Development – how to use Objective-C, how to upload and test the apps, and how to get the most out of what you create.

Since the much-touted PastryKit is only a theory at this point, and since it’s gotten even easier to market new Apps with all the upgrades to the App Store, we think now is a fantastic time to start learning to program for what is STILL the coolest phone out there…and what can only be made cooler by a new app…by You!

Apple Tablet Finally Here? What does that mean for Adobe?

- by Jori Curry

While Apple continues to remain quiet on the iTab, industry insiders say a 2010 release date is imminent.

With the massive popularity of the Amazon Kindle, and the Barnes & Noble NookApple is in a prime spot to take advantage of the wave of users flocking to the new tablet technology. With McDonalds joining Panera and Starbucks in offering free wireless, the iTab is poised to sell 10 million in the first year, according to Lee Kai-fu, a previous president of Google in China. Though the Kindle is a nifty device, the ability to utilize iPhone Apps, Adobe Photoshop, Adobe InDesign, and other Creative Suite apps will make it far more powerful than the popular E-reader. Where we are limited in the use of Flash on the iPhone, the iTab only should not only allow users to view flash, but to create Adobe Flash applications while enjoying a Big Mac at McDonalds–all without having to lug a laptop around.

Unlike the iPhone and iPod Touch, the iTab may utilize a new electronic pen. With the recent patent filed by Apple, it appears the new pen would even take advantage of an “Ink Manager” to communicate with applications that may not be designed to work with an electronic pen.

The patent document reads: “Even systems that attempt to improve this situation by using each stroke to determine the input field anew, such as the Apple Newton from Apple Computer Inc. of Cupertino, Calif., can suffer from failure modes that make the situation difficult for both end users and for application developers,” the document reads. “For example, a word that accidentally spans two input fields even a tiny amount (due, for instance, to a stray ascender, descender, crossbar, or dot) may be broken up into multiple sessions, causing misrecognition and invalid data entries that must be manually corrected.”

Apple Insider has also elaborated on the delay of the iTab. They report that Nick Bilton of the New York Times has said one of the biggest reasons for delay was the lack of software for this kind of touchscreen platform. Now that the App store offerers a plethora of software, the iTab can only be around the corner.

Macquarie analyst Phil Cusick was quoted estimating the iTab will cost approximately $800 and sell 3-5 million tablets in the first year.

iPhone Nano, or Big Screen iPod? What’s Next from Apple?

While we sit chewing our nails deciding to run out and buy the new iPhone 3G, one can only wonder how much time it will be before Mr. Jobs’ “Next Big Thing” will be? I myself could use the more accurate GPS navigation, but can’t help but wonder which will come first: A 32 GB iPhone, or an iPhone Nano?

Reuters has announced that on July 5th, Apple filed a patent application that leads us to believe that an iPhone Nano is headed down the pipeline. IPod and iPhone accessory maker Digital Lifestyle also submitted a patent application for a new dock, to support a “telephonic portable digital media storage and playback device.”

 

Rumors have been swirling for over a year that an iPhone nano is emminant,  but does it make sense to cannabalize the larger sized iPhone when sales are higher than if there were a Beatles reunion tomorrow.

On the other hand, even with the recent decrease in initial cost of the iPhone, by raising the user-fee, it actually costs more to operate over a 1 year period. If an iPhone Nano did hit the streets with the same success as its’ predacessor, Apple could reap millions on the backend. And let’s not overlook the ramifications of the iPhone on Macintosh computers. The more people fall in love with their iPhones, the more OSX operating Macs will be sold. Apple sold nearly 2.5 million Macs this quarter, the highest number ever.

While I’m not sold on the release this year of an iPhone Nano, what does seem likely is a Big Screen iPod Nano. Apple Legal sent takedown notices to both Gizmodo and 9to5Mac who both obtained images of a big screen iPod Nano. 

- Jori Curry 

The Future of the Desktop: Cloud Computing and Adobe Photoshop

The Desmise of the Desktop: How will Cloud Computing Affect the Graphic Designer?

–by Jori Curry

I was at Adobe headquarters last February and there was much discussion about the future of the desktop. Adobe chief executive Bruce Chizen has recently elaborated on the shift in software from the desktop to the web, and speculates it should happen within 10 years. Adobe seems to be following the lead from the web based Google Apps, such as Writely, an online word processing experience, and Picasa which is an online photo manager. It seems that even Microsoft and IBM are jumping on the online bandwagon of “Cloud Computing.”

The whole industry seems poised to step away from buying product licenses, and moving towards the online-based subscription for software. Time Magazine February 2008 issue is stating that by the year 2010 the internet will slow to a crawl due to the video streaming that is growing exponentially.The question is: How will the graphic designer and developer be affected? Will the internet be able to handle the demands of the designer?

Adobe AIR

Another interesting aspect of the future of Cloud Computing is Adobe AIR. Adobe AIR, allows web applications from Flash and HTML be deployed as cross-platform desktop applications, and is taking the direction of “Cloud Computing” to the next level. For example, the AIR iPhone, by Ribbit, allows you to put a simulated iPhone on your desktop and allows you to make and receive calls on your desktop. It’s powered by the Ribbit platform, and includes a new feature called “Shout” which records voice messages and sends them to their email as an audio attachment.

How will our Design Process Change?

So the question is this: If Adobe shifts to free/cheaper online versions of Photohop and the other CS3 family (or CS9 by the time this comes to fruition), how will it affect us? Will it be completely free and advertiser driven, or come at a cost? Adobe has already dipped it’s toe in the water by adding online Express versions of some of its’ applications, but my two biggest questions are firstly, how will we deal with large file sizes, and secondly, security? Especially with the professional Photoshop user base, I think the complexity it takes to perform such tasks as Liquify or Lighting Effects would challenge the speed of todays’ broadband. If you’re anything like me, your Photoshop files can be extremely large, and the idea of relying on both a WiFi connection and a server out of my control leaves me a bit shaky.

Adobe has Adobe SHARE in beta format, which just fuels the fire that Cloud Computing is the wave of the future. Share is a free web-based service that allows you to share, publish and organize documents. You can share with a list of those you specify, or with anyone. You can host up to 1GB of documents, but not the ability to collaborate such as Adobe InCopy. Adobe does plan to include an embedded code with a Flash preview for all documents–not just PDF’s.

Possible Solutions to Online Applications

One solution to the issue of taking a monster such as Photoshop to a strictly online experience would be to break it down into segments. For example, most people that use Photoshop have “tunnel vision.”

The retoucher only uses a fraction of the tools to get their job done, the web designer uses it for laying out their site. Segregating the online version of Photoshop into the different markets, such as Photoshop: Web Design, Photoshop: Retouching, Photoshop: Special Effects might just be an answer to tackle this problem.

As a company, we at Ascend Training have recently started using BaseCamp. It’s an online project collaboration application that includes tools for those working on projects together. I will say that in a few short weeks, our work as a team has streamlined and projects are more on task. So as far as Ascend Training stepping into the online world of applications, so far so good.

While I do think that we are already on the speeding locomotive towards online applications, I do think that those of us that work with 70 MB files are very concerned about logistics. Until WiFi becomes as prevalent as electrical sockets, this future could leave us with nothing to do. While this might create more time to read a book, or have a leisurely dinner, most of those in the creative market are under deadlines and the idea of relying on an internet connection is quite daunting.