Two Important Web Editor Features

Web editors offer features that you can’t get from a text editor. But often the one web editor feature people look for is the price–free. I’ve been trying out web editors for nearly twenty years, and while I have one web editor that I still use that’s free, most of the ones that I really like I’ve spent some money on. And over 20 years, spending $50 or $100 on an editor seems like a good investment. There are other web editor features that I look for instead of just price.

One of the best things about doing web design is that you don’t need any special software to do it. The tools you need are either already on the web or you can use an editor that comes with your operating system. So they are free. In fact, many people write all their web pages in Notepad. When I’m in a hurry I’ve been known to just open up vi (a Unix text editor) and slap out some quick HTML tags myself.

Most of the time, when I’m doing work on web design I like to use a web page editor. My current favorite is Coda because it integrates easily with Git and lets me preview in any of the browsers I have without a lot of effort. I use this editor almost every day.

Web editor feature
There are many possible web editor features

I should say that I have been building web pages since 1995, and I can often write a complex CSS property faster by just typing it out than by using a visual or WYSIWYG editor. But that’s not true for everyone. Some of the other editors I use include:

  • Komodo Edit–a free text editor for Windows, Macintosh, and Linux that is based off the much more powerful Komodo IDE. But although I still like this editor, I use Coda more and more often instead.
  • Macaw–one of the first responsive web page editors I ever used. It’s a visual editor and made it fun to fiddle with my designs.
  • Pinegrow–another visual editor, this one also has the feature of including WordPress template editing.
  • Dreamweaver–I’ve used Dreamweaver since the 90s, and it’s changed a lot over the years. Now, of course it’s owned by Adobe.

I’ve used dozens of other editors, but those are the ones I come back to day after day. I was thinking about what makes these editors my go-to tools for web design and development, and I came up with these two features that I use all the time.

Most Important Feature: HTML

This might seem like an obvious feature, but a lot of web editors out there, especially the WYSIWYG ones seem determined to make it nearly impossible to view and edit the HTML. That drives me crazy. Sure, if it really is what-you-see-is-what-you-get then it shouldn’t matter, but the fact is that CSS and HTML still aren’t so consistent that you can guarantee a page will look the same no matter where you view it. Sometimes you need to go tweak the HTML or the CSS or both.

My favorite editor, Coda, is an HTML text editor first and foremost. It has syntax modes for many different languages including things like JavaScript, Python, PHP, Perl, CSS, and many more. And when it comes down to it, these languages are all written in text editors, so the difference is how they are displayed (color coding, indenting, etc.).

But visual editors need to have access to the HTML as well. And the best ones do. Macaw and Pinegrow each allow you to edit the HTML with separate windows. Generally you edit the HTML in blocks, rather than the entire document itself, but you still have access to it. Dreamweaver has a code editing mode that you can switch between.

Do you think HTML editing is important in a web page editor? Or do you rely on the visual editor 100%?

Previewing is an Important Feature, Too

If you’re like me and you prefer a text or code editor, having a good preview is important as well. But even if you use WYSIWYG you should be able to preview in different browsers and possibly even mobile device emulations. Previewing is a web editor feature that is often overlooked in favor of more of the bells and whistles because it seems like an obvious feature.

But with responsive web design and the need to develop sites that work on many device widths, sizes, and capabilities, being able to preview what you’re doing quickly and without a lot of fuss is critical.

I like Coda because I can hit the preview button and it will show me my pages, including PHP and other dynamic designs, right in a webkit browser in the editor. I can resize the preview pane and see how it responds once I’ve added RWD features. Then when I’m confident it will work in that browser, I can open my page in any web browser I have on my computer.

Dreamweaver offers a connection to mobile devices through the Creative Cloud. All you do is click on the preview icon and it will give you a QR code you can scan and view on any device. You can also send the URL to other people to have them preview your designs. This is a great quick collaboration method. And this is in addition to the built-in preview modes to do edits in a page sized for an iPhone 4 or a Google Nexus 10 or any other size you want to define.

Do You Agree? Are These Important Web Editor Features?

Do you have a feature you can’t live without? It can be something as simple as color coding or something fancy like RWD-builders. What makes an editor something you can’t live without?

Adobe Creative Cloud 2015 – What Web Designers Will Like

Adobe has announced a bunch of updates to the Adobe Creative Cloud. The biggest changes are that they are releasing updates to 15 apps within the Creative Cloud as well as including a new service: Adobe Stock.

If you had Creative Cloud last year, you may remember the day when your hard drive space was sucked up by an entire new copy of all your Adobe applications. If you had a gigantic hard drive, you may not have noticed, but if your laptop is like mine, the 40GB you had free was suddenly not nearly enough. Yes, I appreciated the ability to check things in the old version of Photoshop CC and Dreamweaver CC, but when I couldn’t save any files because my hard drive was full, the duplicate copies of the apps got annoying. This year, Adobe has learned from that mistake and is making the way you install the new version an option. In other words, if you want the old version side-by-side with the new, you can do that. But if you just want your current version to update to the latest version, you can do that instead. Thanks for listening Adobe!

Adobe Enters the Stock Photo Business

Adobe StockThe big news of interest to web designers is that Adobe is now entering the stock photo business. Last year they purchased Folia, and now they are integrating that service into the Creative Cloud in the form of Adobe Stock. With this service, Adobe customers will be able to purchase stock photos and illustrations right from within the Creative Cloud products. Plus, as a Creative Cloud member, you will get access to reduced prices on the images.

If you are a photographer or illustrator you will be pleased to learn that Adobe will also be paying for stock photos and illustrations. They plan to offer competitive royalties for creatives that add to the Adobe Stock library. This is great news for designers who also sell photographs or illustrations.

Android Apps Finally Available

If you use an Android device you will finally be able to use Brush, Shape, and Color on your devices. This has been a long wait, but these apps as well as the new app, Hue, are available on the Android store.

Changes to Dreamweaver

Dreamweaver CC (2015) adds some new features. Nothing really groundbreaking, but will make some web development tasks a bit easier. Some of the new features include:

  • Integration with Adobe Stock
    You can now find the perfect images for the websites you are building from right within Dreamweaver. Adobe Stock is new with this release, but there are already over 40 million images to choose from. Single images are not cheap, but if you’re already a Creative Cloud member, you can get 10 images a month for around $3 an image (10 per month for $29.99). Plus, if you use less than your 10 in a month, they roll over up to 120 images.
  • Preview on Any Device
    As long as your devices are all on the same WiFi network, you can use either a QR code or type in a URL on your devices to view your Dreamweaver pages on them. You can also inpect the elements on the devices and preview on multiple devices at once. When you make changes in Dreamweaver, they are instantly updated on the devices.
  • Bootstrap Starter Templates
    You can now create responsive websites with Bootstrap components using built in Bootstrap starter templates.
  • Batch Extract from PSDs
    Batch Extract
    With the Extract feature, you could extract images from a Photoshop file. But now you can extract multiple images at once using the batch extract feature. This will make getting production-ready images that much faster.
  • Code editor tab completion even more robust
    Code Editor Improvements
    Now you can use shortcuts to create common, complex blocks of code. Things like nav>ul>li.link{Link $}*5 turns into a 5-element unordered list each with a class of “link” e.g.
  • Shortcuts in CSS too
    I used to use TextExpander for all my CSS and HTML shortcuts, but now Dreamweaver has a bunch built in. This will make it that much faster to write HTML and CSS in the code editor. They use Emmet for code completion and there are lots of shortcuts you can learn.
  • Link checks your code for you
    As you type your HTML and CSS, Lint inside Dreamweaver CC (2015) checks your code and validates that it is correct. It will highlight incorrect lines in red, and if you click on them you will get more information about what the problem is so you can fix it.

There are lots of other small features added to Dreamweaver, but those are the highlights.

Changes to Muse

Adobe Muse has also been updated in the 2015 release. Like Dreamweaver, you can now get stock photos from Adobe Stock right inside Muse CC (2015). You can also get Adobe Typekit fonts right from within Muse.

The widgets panel now includes shopping carts and RSS blog feeds. You can even style the feeds you pull in. There are lots of widgets both free and paid that you can use to improve your site.
Add a Blog
I am happy to say that you can finally add radio buttons and checkboxes to contact forms in Muse. This makes it easier to get more accurate information from your form submissions.
Muse Contact Form Updates

CC 2015 Release is Pretty Exciting

CreativeSync is a very useful tool to keep your files and images up-to-date across all your computers and devices. I have already created documents on my laptop and then finished them on my desktop as well as worked with images on my iPad that I finished on my laptop or desktop. It’s a very convenient feature.

There are updates to the following apps in Creative Cloud (2015):

  • AfterEffects
  • Audition
  • Dreamweaver
  • Edge Animate
  • Flash
  • Illustrator
  • InCopy
  • InDesign
  • Lightroom
  • Media Encoder
  • Muse
  • Photoshop
  • Prelude
  • Premiere Pro
  • SpeedGrade

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.

 

Poll: Do you use grid systems?

a gridA grid system is a system for web design based on a grid. It is a way of organizing your content on the page with a grid as the primary element.

Using a grid system is a great way to organize your pages. You can make the grid as large or as small as you want it and have as many columns or rows as you need.

Grids are a very formal way of designing web pages because they control the number of columns, rows, gutters between the columns and even the lines and spacing of the area around the grid.

Many people find grids very rigid for design because everything starts looking very square and boring. But when you get better at the use of grids you will learn how to break the grid to make your design more dynamic and effective.

Do you use a grid system for your web designs?

View Results

Loading ... Loading ...

There are lots of frameworks that use grids, some of the more popular ones include:

  • Responsive Grid System – this is a scalable grid system that is more responsive and includes breakpoints to create different grids at different device sizes.
  • Responsive GS – this is much more of a framework to help you build your site, and it uses more HTML5 by example. It comes with some polyfills to help ensure your grids work correctly
  • Zen Grids – This is a system to let you use Sass to figure out all the sizes and position the elements appropriately. It means you have to install and understand Sass to use it. But Sass isn’t that hard. CSS is harder in many ways.
  • 960 Grid System – this assumes a width of 960 pixels which can be divided into many columns with variations of 12 columns and 16 columns.

Not all design testing tools are created equal

I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.

A bad way to test responsive designs
Do you notice anything interesting about these four renderings?

If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.

When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.

Testing on the Device Gives Better Results
Here’s what the page looks like on a real iPhone

As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the navigation icon example icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.

Be Wary of Online Emulators

There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.

I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:

How it renders on an iPhone
The Responsive Design Testing Tool on an iPhone

The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240×320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.

All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.

What Can You Use?

While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.

Another option you have for testing is to use an emulator. You can get an iPhone emulator from Apple and an Android emulator from Android.

Want to Learn more about Responsive Web Design?

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours
Available Oct 2014

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.

Sorry for the delay — I didn’t forget the giveaway

Life just got the better of me for a while there. I’m happy to say that I’m nearly caught up. Now that school has started I might have a little more time. 🙂 But you don’t care about that, you want to know who won!

Adobe Dreamweaver CS6 on Demand by Perspection Inc. and Steve Johnson
Adobe Dreamweaver CS6 on Demand by Perspection Inc. and Steve Johnson

The following people won a copy of the book Adobe Dreamweaver CS6 on Demand:

  • Leigh C-M
  • Janet
  • Sunday ayodele
  • Lisa Vincent
  • Karen

and…

Adobe Muse on Demand by Ted LoCascio
Adobe Muse on Demand by Ted LoCascio

The following people won a copy of the book Adobe Muse on Demand:

  • Aggrey
  • Yussuf Olawale Afeez
  • Sudheer Marath
  • Kenny SILVA
  • Deb Tilton

I’ll be contacting you directly to get your mailing address and get it off to my editor. If you don’t hear from me within 10 hours, please contact me directly.

Would an ebook interest you? Please vote in the poll

I am working on an e-book for this website, but I realized (after I wrote most of it, sadly) that I should probably make sure it’s something you’d be interested in.

There are lots of topics I am planning to write about, but I wanted to make sure I was getting the information that is most valuable to my readers out to you. Please answer this poll to indicate what topic of e-book I should focus on first. Don’t worry, I am planning books on all these topics and more, and if there is some other topic you’d like to see instead (or as well) please mention it in the comments.

Would you be interested in an ebook? On what topic?

View Results

Loading ... Loading ...

Tools to Write HTML5 and Another Giveaway

I’ve been building web pages since 1995 or 1996, and as such I am very comfortable inside the HTML. And when I started building pages, at first there were no editors dedicated to writing HTML, and then when they came along, they were text editors. Writing web pages visually, like in a word processor, was unheard of.

When visual web editors came on the market, they produced HTML that was a tangled mess of tags and characters, and they were very difficult to decipher. Plus, they would often not work as well outside the editor (i.e. inside a customer’s web browser) as they did in. So, I, like most designers of that time, quickly learned to distrust WYSIWYG (what you see is what you get) editors.

But, if you do the math, that was over 15 years ago. And the market is starting to catch up. In fact, Adobe has two products that create great HTML5 web pages without any or with very little interaction with the HTML code: Adobe Muse and Adobe Dreamweaver. I have tried out both of these products, and while they are definitely aimed at different markets, they are both great.

These two books will help you get started with these tools:

Adobe Dreamweaver CS6 On Demand and Adobe Muse On Demand

Before you decide if these books are useful to you, you should check out a free chapter:

Another Giveaway!

If you are interested in either of these books, post a comment detailing which book you are interested in and why. I have 5 copies of each book to give away. I will close comments on August 27th and pick the winners on the 28th. If you want a second chance to win, you can subscribe to this blog (in the sidebar). All subscriptions that added before the 27th will be given a second entry in the giveaway. And the benefit of subscribing is that you also get my posts about HTML5 directly in your email as soon as they go live. You can’t lose!