Reviews on HTML5 in 24 Hours

No More Napkins

Mon, 30 Mar 2015 20:09:12 +0000

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.

https://youtu.be/M41D4M7w_tk

Comments:

Nicole ll - Mar 2, 2015

Thanks for sharing this,Karen. I wasn’t aware the s existed.

Jennifer Kyrnin - Apr 4, 2015

It only just came out the day I released that post. And my name is Jennifer, not Karen. :-) Thanks for your comment.

Updates from Adobe - a Fun New Adobe App

Mon, 06 Oct 2014 18:50:51 +0000

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

There 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

This 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

Comments:

nick Jubrey - Oct 2, 2014

Thanks for the update. Still using cc for now.

Type on Screen - Book Review

Wed, 02 Jul 2014 19:17:22 +0000

Buy Now:

Amazon / Barnes & Noble

My Review

When I was offered the boo Type on Screen (edited by Ellen Lupton) to review I jumped at the chance. This is a follow-up to the book Thinking with Type (Buy on Amazon) which is an excellent primer on using type visually. So when I saw that she was editing a book on type for the screen, I was really excited. And this book does not disappoint.

The first chapter is by Christopher Clark. He provides a quick overview of web fonts and how they have changed over the years. But this chapter is more than a history of type online. In fact if that’s all it were I would have skimmed it or ignored it. No, this chapter teaches you how screens render type, details of type taxonomy and anatomy, and best of all, it gives you a survey of 14 of the best fonts for online use: five sans-serif, four serif, and five slab serif fonts. You will see all these fonts rated by legibility, readability, flexibility, showmanship, classiness, and amphibiousness (how well does it work on screen as well as print and on PCs as well as Macs).

And that’s just part of the first chapter!

Chapter two (by Young Sun Compton) starts looking at what you can do with the fonts you’ve chosen to use. This is not a chapter on how to use web fonts. You can learn about the mechanics to do that in chapter 11 (Hour 11: Fonts and Typography in HTML5) of my HTML5 book (Buy on Amazon). Instead, in this chapter you will learn about the design and layout of your screens so that you can place your type in ways that are most readable and legible for your customers. This chapter covers: grid systems, responsive typography, columns, leading, and even how to define a visual hierarchy using text. It even has details on specific HTML tags for type along with special characters you can use to keep your type effective.

Chapter three (also by Young Sun Compton) is where it gets interesting. This chapter acknowledges the fact that many web designers want to forget—type online is more than just web pages. There are now ebooks that read and display HTML as well as other devices. In many ways the digital landscape now is as wide open with possibilities as it was when I started writing about HTML and web design in 1997. And it’s great to see a book take that into account. One thing that I really like about this chapter is the reminder that not only do people consume digital content, but software programs and digital devices do too. And if those devices can’t read your type, then you’re missing out on an audience.

Chapter four, by Javier Lopez and Alice Hom, is all about type and interface. This chapter seemed dry at first, but as I dove deeper I realized how exciting it really is. It goes into wireframes, interaction elements, and even type as navigation. I love that it acknowledges that the vocabulary surrounding type is expanding as we use new and different devices and approaches to visual design and interactivity. There are also discussions of fun things in this chapter like drop shadows, gradients, and making your text disappear and reappear. One part I really like are the examples for visualizing data. Infographics are really fun to make and read these days and often they are primarily type, so knowing how to display that data well visually with your type is critical.

Chapters five and six go into the same amount of detail around type used in logos and icons and in animation and code. What I especially like about these chapters are the case studies that show you exactly what they mean and make it easy to visualize what you should do with your own logos, icons, and animations.

The Book Isn’t Perfect

Because this book is an edited collection of articles, sometimes the flow was a bit choppy between sections. It might have felt more cohesive if only one person had written it, but I think ultimately having the multiple authors helped the book. It made it more authoritative because it is difficult for one person to know everything there is to know about some of these complicated subjects.

My other issue was that while the title is Type on Screen there was very little discussion of how type on screen is different from type on the printed page. Most of us can make out the differences, but for design purposes it helps to know so that you don’t do something on a screen that works better in print and vice versa.

Finally, there is not a lot of actual code in the book. As I mentioned, chapter two discusses web fonts, but there is no explanation of how to do it using HTML or CSS. Since this book is a guide for design, not a how-to instruction manual, this didn’t bother me. But if you’re looking for the nuts and bolts of how to use and manipulate typography on screens, this is not the book for you.

Macaw - A Visual Responsive Web Page Editor

Tue, 07 Jan 2014 23:10:18 +0000

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.

Slashdot review

Thu, 12 Jan 2012 18:42:27 +0000

I was very pleased to see this review on Slashdot yesterday. Michael J. Ross did a great job finding the problems and explaining what the book is about. He even commented on some things that I found annoying, and I wrote the book! :-) But of course, my favorite part is the last paragraph:

“Despite the aforementioned blemishes, this book is definitely worth a look, because it is currently one of the most complete tutorials for learning how to use HTML5 for creating mobile apps and web sites.”

I have already addressed some of his concerns, such as getting the code samples and errata linked from the site navigation (oops!). And I’ll be making notes of the errors he found to correct for a future printing.