Questions about web editors

When I started asking questions about web editors, I started thinking there might be something better than what I was using. There are so many web editors out there, it is hard to choose which one to use. Most designers I know find an editor that suits their needs and stick with it. And this is definitely an easy solution. After all, if it’s meeting your needs, why would you need a new one? I was using Dreamweaver, and it met my needs.

Dreamweaver has a lot of great features, it includes a decent code editor, has some RWD features, it includes preliminary testing for mobile devices, and integrates fairly well with Photoshop. But one thing I noticed year over year was that even though new versions of Dreamweaver were coming out every year, they all seemed the same. Sure, I didn’t want the interface to change too dramatically, I was used to it. But couldn’t they at least add in some new features like advanced CSS properties or better visual design? I wouldn’t have been so bothered by it except that Adobe was also releasing products like Adobe Muse (a visual web editor with no easy HTML support, but very easy to use WYSIWYG) and the Edge products (Edge Reflow for RWD, Edge Code for HTML,  Edge Animate for web and CSS animations, and Edge Inspect for previewing on mobile devices). These products offered a lot of the features I was looking for in Dreamweaver. But why weren’t they being included in Dreamweaver?

Once I started asking questions I couldn’t stop. I started looking at other editors. It was terrible, I felt like I was cheating on Dreamweaver, but I couldn’t help it. The more editors I tried, the more I realized that there were features in web editors that I didn’t know I was missing. And once I saw them, I missed them. Thus I moved to Coda and Pinegrow.

Coda Creating a New Site
Panic Coda–Creating a New Site

What Questions About Web Editors Do You Have?

What web editor do you use? Why do you like it? What would you change about it? Have you considered trying another editor? Most editors out there offer some type of free trial, so you can check out some new editors and perhaps be surprised by the features you didn’t know you were missing.

Adobe: What’s New and What’s Not

I had the opportunity to learn more about what Adobe is releasing this week at Adobe MAX. One of the things I like best is the new Capture CC app for iOS. I have used the older capture apps like Shape CC and Brush CC, but it’s nice to have all of them in one place.

Capture CC
Brushes, shapes, and colors all in one app

Adobe Capture CC combines four previous apps in one: Shape, Brush, Color and Hue. This makes it so much easier to create custom shapes and vector line drawings from items in your environment. You can also create custom brushes and lines to decorate your sites. Color and hue help you to grab colors and then apply them as a palette. I spent several hours just taking random shots of my desk and the plants outside my office to create some silly drawings and brushes. I even came up with a monochromatic color scheme based on the color of my desk and some ink that spilled on it.

Photoshop and Lightroom

I’ve been playing a bit with the Photoshop CC artboards. These are really interesting, but I’m not sure I understand them yet. I do like the way you can create multiple views of the same document all in the same Photoshop document. So I can create a small, medium, and large mockup of a web page and keep them all together.

I have also started using Lightroom CC to attempt to put some order to my photos. This is taking a lot of time, and I think I’ll be working on it for years, but it does make me feel better to think that I’m getting my photos categorized and thus more usable.

There are other updates to these apps, but I haven’t really used them much because I was busy playing with other new toys.

My Dreamweaver and Muse Doubts

At Adobe’s MAX keynote this week they talked about the idea of “to code or not to code.” The speaker said that Adobe doesn’t believe that there is a right or a wrong answer to this question. I must say that I am skeptical of this.

Adobe had a great coding product for web designers (do any of you even remember Homesite?), and instead of developing it they killed it. They still have and promote Dreamweaver, but it is getting older and older feeling without any significant upgrade in how it works or feels. Instead, they have added a few new, minor feature upgrades. Bootstrap templates—featuring Bootstrap 3—doesn’t impress me a lot. And if they follow with their past iterations, it will be difficult or impossible to customize Dreamweaver with Bootstrap 4 updates, even though that version is due to be released any day now.

Bootstrap 4 is coming
Bootstrap 4 is coming, Aww yeah!

But I can’t complain about Bootstrap too much, after all, my book is about version 3, and version 4 is coming, so I should cut them some slack. Then the speaker tells me, as a coder, that “[I’m] gonna love the new 64-bit version of Dreamweaver.” Um. No. Okay, yes I would like to see a 64-bit version of Dreamweaver, but I’ve been waiting since Snow Leopard came out! For those without a Macintosh, that’s 2009. Six years is a long time to wait for something that you have found on tablets since 2013 and on Macs since, as I said, 2009!

Apparently the way Dreamweaver looks is considered innovative and new, but it doesn’t look all that different to my copy of Macromedia Dreamweaver 4. Part of me then thinks, sure don’t mess with something that’s working. But I’ve had the opportunity to work with modern web editors like Coda and Pinegrow and Dreamweaver is severely lacking compared to them. Coda is far superior in how it handles databases, connecting to Git and other source control systems, you can even edit directly on the server!

Coda Creating a New Site
Panic Coda

Pinegrow offers a very easy to read and understand visual CSS and DOM viewer, responsive design features, as well as support for Bootstrap, Foundation, AngularJS and WordPress right inside their visual editor. Yes, Dreamweaver CC 2015 has Live View, but that was interesting four years ago, not now.

Edit responsively in Pinegrow
Pinegrow

The MAX keynote said that “millions of websites have been created in Adobe Muse.” But my question is this: how many tens or even hundreds of millions of websites have been created with Dreamweaver? And yet, instead of crowing about how popular it is or giving it some big useful updates, Dreamweaver gets one minute of the keynote (maybe one and a half minutes) and the big news is 64-bit, which it should have had five years ago. Instead, the web design tool Adobe wants us all to focus on is Muse.

The big news in Muse is that you can now create responsive websites in it. Okay, that’s great. Adobe would probably argue that Muse is their product that competes with Pinegrow and Dreamweaver competes with Coda. But I would argue that if that’s the case, neither does so very well. I use both Coda and Pinegrow and I like them both. And in both of them I can preview my sites and edit the HTML code. Granted, I can’t grab an object and move it around in Coda, and the code editor is a bit low-fi in Pinegrow, but they both do all the things that Muse and Dreamweaver do, and they do them better. The MAX speaker states that “never before has there been a custom free-form design tool that would allow you to output a responsive website.” Um, WRONG! I was using Macaw in January 2014. That’s almost two years ago now. I’ve been using Pinegrow for almost a year now too. So that’s two software programs that do “custom, free-form” designs to generate a responsive website. Muse was definitely not the first, and it’s not even the best. It’s just another one. Do your homework, Adobe!

Project Comet – or How Adobe Psychs Me Out… Again

One thing you’re going to hear more and more about if you follow Adobe news is Project Comet. Adobe wants to create an end-to-end project development platform, and Project Comet seems to be how they’re going to do it. The idea is that instead of having an app for wireframing, another for visual design, a third for prototyping, and a fourth for previewing, you do it all in one system or tool—Project Comet.

It is a new desktop application to let UX and UI designers create and prototype their designs in the vector design environment. Some of the cool things they demoed included:

  • She created a results screen with one result, and then collected that result

    Project Comet Visual Repeat
    Repeating the results object in Project Comet
  • You can then adjust the margins and padding for all the results by grabbing and dragging again.
  • Your prototypes don’t have to have blank spaces for images, you can drag images into shape elements and they will be non-destructively resized, cropped, and masked to fit in the shape.
  • She just dragged the images straight from Finder (Windows explorer for you MS types) into Comet and they scaled and masked and so on like magic.
  • She also the view to show her full artboard layout with hundreds of artboards, and Comet was very fast, even with all those assets.

I’m just afraid that it’s going to be like some of the previous things Adobe has demoed—they look great in the demo and then are hard to get to work with real-world scenarios. Or it will only create prototypes, and we won’t be able to design full apps or websites with it. Fingers crossed! Because Comet looks really cool! I could use it right now. But I have to wait for the public preview coming “early next year.” So, May or June? 😉 You can find out more about Comet from Adobe and even sign up to get email notifications. I have.

So even though I’m still disappointed at the lack of any substantive change or update to Dreamweaver, I am looking forward to Comet and hoping that I’ll be pleasantly surprised.

No More Napkins

I can’t tell you how many times I’ve grabbed a napkin or piece of scrap paper and scribbled out a mockup for a design idea I have. I have done this with clients, for my own sites, even for ideas that come to me at midnight. But now Adobe has released an app that lets me scribble my ideas on my iPad and they appear as a tidy mockup like magic. And it even pastes in placeholder text without my needing to.

I had the opportunity to play with the new comp designer from Adobe, Adobe Comp CC, and it’s a lot of fun, but what I found most enjoyable was how easy it was to draft a quick mockup. And instead of looking like horrible stick-figure sketches, Adobe Comp converts them into nice, sharp mockups. I can even include my own images that I’ve uploaded to the Adobe cloud.

But I find Comp hard to explain in writing, so I’ve created this video for you to see what I mean.

 

Why Bootstrap?

Since I’ve started writing my latest book, Sams Teach Yourself Bootstrap in 24 Hours, I’ve been asked a bunch of times “why Bootstrap?”

Bootstrap Makes Development a Lot Easier

Bootstrap is a framework that you can use to help speed up your page development time. A lot of the decisions that every web designer has to make for every website have already been made for you and the resulting calculations and programming decisions have been taken care of. Plus Bootstrap includes a lot of pre-made components that are easy to add into your website.

For example, I added a rotating carousel to a photo gallery site. When I was doing it myself, it took me several days of design and coding work to get a rudimentary carousel up. When I switched the site to Bootstrap, I was able to put up a much fancier carousel in about 10 minutes. I spent more time deciding what pictures to include and what the captions should say than I did building the HTML and JavaScript.

Responsive Grid

One of the coolest things about Bootstrap is the responsive grid system. It has four device sizes it supports and this lets you get fairly specific in how you want your pages to display in large, medium, small, and extra small screens.

With the Bootstrap grid you get up to 12 columns and you can divide your pages into any combination of columns and widths. What’s particularly nice is that you don’t have to do any math yourself. Bootstrap has the column and gutter space defined for each grid width and all you have to do is set a class (or several) on your elements.

Bootstrap is Not All Perfection

While I do like using Bootstrap, and I think it’s a great way to get a good looking site up quickly, there are some things I don’t like about it.

  • The default color scheme and other styles means many Bootstrap sites look identical.
  •  There are no fallbacks included if JavaScript is disabled.
  • Presentation and interaction are not separated from the content because many plugins and components are added using data attributes and style classes.

The first two issues can be fixed by taking more time to work on Bootstrap sites. It’s possible to adjust your Bootstrap defaults to colors and styles that fit your own aesthetic. And you can always add additional styles to overwrite the Bootstrap look and feel.

While Bootstrap doesn’t include JavaScript fallbacks by default, good designers provide their own. And even if you don’t want to do that, the fact is that very few users have JavaScript disabled, so it’s not going to impact most websites.

The last one is the one that bothers me the most. It is considered best practice to separate HTML (content layer) from the CSS (presentation layer) from the JavaScript (interaction layer). But Bootstrap relies on multiple CSS classes on nearly every element to define both what it is and how it should look. And there are a lot of classes in Bootstrap, many of which seem to do nothing or are redundant. This makes maintaining, reusing and scaling a Bootstrap site more challenging than it might need to be.

This last issue is the reason I don’t use Bootstrap for every site I manage. I use it when the ease of getting a good looking site up quickly is more important than whether it can be maintained by 10 different people, three of whom haven’t started working with me yet.

I Use Bootstrap Where it Makes Sense

And when it doesn’t make sense, I use something else, or nothing.

For instance, you might notice that this website does not use Bootstrap. And it is unlikely that I will be changing that any time soon. But I still like Bootstrap. And after you see my book you will too!

The Hardest thing About the New Dreamweaver Extract Function…

Dreamweaver CC 2014.1 offers a new feature that is pretty neat, especially if you are used to designing your web pages in Photoshop and then converting those comps to HTML and CSS. It’s called Extract and all you need is a PSD file to import into Dreamweaver and use the Dreamweaver extract function.

Dreamweaver Extract Function
Dreamweaver Extract Function

In the past, when you’d create a PSD comp of a website, you then had to manually write down the details like colors, fonts, sizes, and so on. Later on, Photoshop added an export function to let you export your files to Fireworks where you could get the CSS, colors, fonts, sizes and so on. Then there was an option to generate image comps or copy the CSS from your layers.

But the Dreamweaver Extract function is more than all that. You can now open the layered PSD file in the Extract feature in Dreamweaver and then capture the colors, fonts and gradients as CSS that you can import right into your Dreamweaver file.

Dreamweaver extract shows page details
Dreamweaver Extract shows page details like colors and fonts.

Note there are still some things missing, like rounded corners and box shadows, but it’s definitely a lot easier to import a PSD comp into Dreamweaver than ever before.

So What is Hard About the Extract Tool?

For me, the hardest thing about it is using the CSS it gives me and not continuing to tweak things. I will go in and change the CSS so that it’s formatted differently (read: I change the indents).

Assuming I can get over needing obsessive levels of control over how my CSS looks, I think I will enjoy using Dreamweaver Extract.

Dreamweaver extract shows layer details
Dreamweaver Extract shows layer details for each layer of the PSD

Updates from Adobe – a Fun New Adobe App

Adobe released a number of new apps and features today at the MAX convention. There are some new features in Photoshop CC, Illustrator CC, InDesign CC, and Premiere Pro CC. But the ones I found most interesting were the changes to Muse CC, Dreamweaver CC, and the new free Apps for iOS.

Muse CC

Muse finally has secure FTP support which I find very important. In fact some of the servers I work on don’t allow any connection other than secure FTP – which meant until now I couldn’t use Muse for them.
It also now has Find and Replace. This is a critical feature for web editors as when you’re working on a large site it can be difficult to know you’ve found all the instances you need to change if you have to do it by hand. For one site I worked on, we had to provide discounts to customers because one page listed the price from the previous year, and we didn’t catch it when we updated the site with the new price.
Another great new feature of Muse CC is the SVG import. Now you can create your images as vector graphics and import them directly into your web page. This is great for doing prototyping in Illustrator and then moving directly to the website. SVG images give you so many options beyond the standard web images.

Dreamweaver CC

Dreamweaver CC doesn’t have a lot of updates this time, but there are a few that are interesting. It has 64-bit support, plus they updated Live View. You can now edit while in Live View – which is a huge improvement. I hardly ever leave Live View now. I love that you can drag and drop images into Live View—so much easier to do! There are also a bunch of new starter templates you can use to create different kinds of pages including Responsive Web Designs.

Mobile Apps

But beyond Dreamweaver and Muse, Adobe now offers a bunch of mobile apps that all connect with your Creative Cloud account to allow you access to your creations from any device. There are three new apps in this release:

  • Adobe Premiere Clip
  • Brush CC
  • Shape CC

The one I’m most interested in is Brush CC.

Brush CC

Brush is a new app that will help you create your own custom brushes right on your iPad or iPhone. You start by creating a line or shape or whatever you want as a brush. Then you can modify it so that it displays exactly as you want it to. You can adjust things like:

  • display as a ribbon, or just a scattering of marks
  • color or black and white
  • have it repeat linearly, mirrored, or stretch to fit the space
  • crop it to make it a seamless brush or your own dotted line
  • add transparency
  • have the ends fade in and out or taper

My first simple brushThere are endless ways to create your brushes.

Then, once you’ve created your brush, you can save it to your Creative Cloud library and use it in Photoshop CC and other connected applications. I can see myself spending a lot of time in this app.

Download Brush CC from iTunes

Shape CC

my brushes and shapesThis is another new app that looks like it could be a lot of fun. However in my first attempt at using it, I found it fairly difficult. There is no image stabilization, so I found it difficult to focus on just the item I wanted. It also took me a while to figure out how to edit my shapes, and when the vectors were too connected, it was difficult to get just the lines I wanted and none that I didn’t. However, I then imported my shape into Illustrator without an issue.

There are no pre-defined shapes in Shape CC but it is reasonably easy to use other than the above concerns, I created two new shapes very quickly.

Download Shape CC from iTunes

Macaw – A Visual Responsive Web Page Editor

Macaw is a new web editor for web designers and developers. It was one of the first visual RWD (responsive web design) editors available. It came out to Kickstarter backers on December 31, 2013 and debuted to the public in 2014. It is based on the same style of design as graphics tools like Photoshop to help you “draw the web” rather than code it. This should make it easier for web designers to use to create decent HTML, CSS, and even JavaScript to pass on to developers or post directly to the web.

About Macaw

  • Operating Systems: Macintosh and Windows
  • Publisher: Macaw, LLC
  • Price: $79

Best Things About Macaw

  • It is very easy to create responsive designs with multiple breakpoints.
  • There is a shortcut to add placeholder text that is really easy to use.
    (type “lorem#p” where the # is the number of paragraphs you want, then hit the tab key and that number of paragraphs of placeholder text will appear in your document).
  • Macaw generates decent looking HTML, better than you might expect for a WYSIWYG editor.
  • Macaw allows you to choose what elements, classes, and IDs to use.
  • It is reminiscent of image editors like Photoshop, making it more familiar to designers.

But There are Some Drawbacks

  • It can be slow to respond at times.
  • Extra container elements were added that I didn’t expect.

I enjoyed using Macaw. I built a 3-breakpoint simple responsive design website faster than I ever have in the past, and that includes the time it took me to figure out how to use the tool. This, in itself, is pretty amazing to me.

Some of the Features I Really Enjoyed

  • Resizing elements based on the grids was easy.
  • Grouping elements and then giving the resulting container a name like HEADER resulted in HTML5 semantic code much more easily and quickly than I thought possible.
  • I was able to create a responsive design with three breakpoints in very little time.
  • I loved the outline view. Like with Photoshop layers,it was really nice to be able to show and hide elements just by clicking the eye icon. This also helped me see how the code would be written.
  • I chose a random font from the list that was included, and they automatically added the web font code from Google for me. I could also use my own fonts, but there were a lot of choices (even if most of them seemed to be sans serif…).
  • I love that they have a shortcut to add multiple paragraphs of placeholder text right in their text tool.
  • The CSS and HTML it generates can still be a bit more DIV heavy than I would write, but with the outline tool, it’s possible to see that and get rid of some of the extraneous tags.

Get Macaw!

It’s a cool web editor.