The Great (Adobe Muse Beta) Debate

Posted on Nov 17, 2011 by Rick to Web Design, Web Development

Since Adobe recently announced the Beta release of Muse, there’s been a little turmoil at THAT Agency. Basically, our designers and developers have a running debate as to the value of this new Web publishing tool. As you’ll see, the two sides definitely aren’t seeing eye-to-eye on the issue.

(If you’re not familiar with Muse, here’s a quick video made by Adobe’s design team which will bring you up-to-speed on Adobe’s vision)

Debate methodology: To facilitate this debate, I (the moderator) sent the same questionnaire to both our design team and our development team. Here are the results:

Q: Adobe’s Muse team surmised that, 5-10 years from now, they don’t think that anyone will be coding in order to design websites. Are they visionaries or lunatics?

Designers say: There will always be a need for developers in web development. However, this is a tremendous advancement for designers and I see developers moving away from smaller projects all together.

Developers say: “Web Pages” may not even exist in 10 years. In fact, you can already see the move toward dedicated applications in the mobile space. Someone always has to code the next new thing. Print designers are already outdated, but what happens when they are expected to design for applications instead? Good luck finding a job with that print portfolio.

The Mediator says: Err, developers are angry people! I like anything that makes it easier to get creative on the Web. I understand the need for developers, but also appreciate anything that makes it easier to share creativity on the Internet.

Q: Adobe says that future versions of Muse will have CMS integration capabilities. Would your answer to #1 change if that were the case? If so, how?

Designers say: No. The tools for the web and designers are constantly improving. Muse CMS will be an expected, but greatly appreciated leap forward for everyone.

Developers say: No, again, technologies that are “WYSIWYG” in nature never provide the flexibility that a professional solution requires. Drag-and-drop can only take you so far. Remember geocities?

The Mediator says: The developers have a point. While we’d like the product more if there were database capabilities, we’re just not sure that this is going to get done in time for it to really matter.

Q: The Muse product was created to begin to bridge the technological gap that previously prevented print designers from designing for the Web. In other words, Adobe created Muse to take away technical barriers which previously stifled creativity. Do you think this is true? If so, what impact do you think this new ‘talent’ will have on the Web and our industry? Will this introduction of new creative talent to the Web help improve the quality of website designs and content out there?

Designers say: Maybe, But I think designers who are interested have always found a way of getting their vision online. Muse just gives us designers an easier way in which to do it.

Developers say: In my experience, giving someone with no experience in Web design a tool with which to design is like giving a three-year-old a conductor’s baton and asking them to lead a symphony. They won’t know any better than they did without it. This “revolution” in design doesn’t create an innovative product. If you are reliant on Muse, you can never progress beyond the limitations inherent in the product.

The Mediator says: Geez, looks like designers and developers agree on this one. I actually disagree with both. I come across a number of ‘print designers’ who would probably make great Web designers given the right tools. Technology can be intimidating so I really hope this helps more designers get online. I agree with the developers that the applications will be limited, but at least the designs themselves won’t have to be!

Q: Is Muse a game-changer or just something to keep our eye on?

Designers say: It is definitely something to keep your eye on. I am very optimistic and impressed with what I have experienced already with the beta version.

Developers say: The future isn’t in creating a great web design. The future is in content and data. More and more, we are looking at content through “apps” or other developed programs. Muse? I’ll keep an eye on it; I’ll watch it burn to the ground.

The Mediator says: I’m on both sides for this one. I’m looking forward to removing creative barriers but also think that content is still King, and Adobe Muse isn’t the Ace that we’ve been looking for.

Comments? Leave your take in the comments below. It wouldn’t hurt to tell us what side of the fence (design or coder) you’re on, either.

Tags: adobe muse

Web Design Don’ts

Posted on Sep 11, 2011 by Joey to Web Design

Web design is a lot like interior design. You have a lot of leeway and options. Your definition of beauty is central, and you should always add elements that reflect your personality and sense of style. But there are also some rules that are definitely not made to be broken. Not crowding a very small room with big, heavy furniture, for instance, is a rule that we should all live by. When it comes to web design, you want your space to be unique, elegant, and you. Like the best homes, it should be aesthetically pleasing and “livable.” Here are some “don’ts” to avoid when designing your website.

Don’t overdesign. This is the virtual equivalent of piling those clunky bureaus, beds, dressers, wardrobes, and tables into an 8×10 room. Adding every new trick for graphics and music, and the like, can crowd a site and overwhelm the viewer. For most businesses, that is not suitable for the intended audience and can get in the way of navigation. Further, if you do not have a separate mobile-ready site, chances are your heavy website won’t load up quickly enough to suit mobile users.

Don’t forget about what your site is supposed to do. This is like forgetting you have children and then getting all-white furniture and carpets. Ezra Silverton, president of 9th Sphere, says, “It doesn’t matter how beautiful yours site is. You’re better off having great navigation and content and poor design than the other way around.” Not that you want poor design, but you – and your audience – certainly don’t want to provide a poor experience in terms of content. “Most companies believe SEO comes after site development, but then you’ll have to go back and make a lot of changes,” says Silverton.

Don’t bury essential information. How many websites have you visited where it is difficult to find contact information? Or About Us content? Visitors get frustrated when they cannot find what they want immediately, whether it is shipping policies or a specific product. Think about what your visitors want and need most, and make that the easiest content to access.

Web design is crucial to business success; balancing appearance and functionality is key. Think about it like your home: how can you create the most comfortable, welcoming, and functional home possible for yourself, your family, and visitors? In this case, visitors are the most important element – cater to them!

What You Don’t Know about Web Design Can Hurt You

Posted on Aug 26, 2011 by Joey to Web Design

“We are concerned about the growing number of frustrated business clients on board telling us similar distressing stories. Many businesses have paid and are paying web designers for websites that are simply not designed for search engine optimisation in mind.” This from Krisztian Panczel of Web Connection Pty Ltd, an Australia-based internet marketing company. Panczel and colleague John Mu identified several reasons why business websites are not ranking as well as they could be, and the failure to design for SEO is chief among them.

There is good news and bad news. The good news is that research shows that most business owners know that an online presence is crucial. The not-so-good news is that they do not have the expertise to develop and design sites that are effective in marketing their brand and products or services. The just plain bad news is that often this lack of knowledge can lead them to hire the wrong designer for the job. To be clear, it is not the fault of the business owners. They are experts in their particular business and shouldn’t be expected to know everything about web design. If they did, they’d just do it themselves! But too often, they do not know the right questions to ask.

According to Web Connection, businesses often assume that all designers are created equal – or at least possess the same internet marketing knowledge. No. Mu says, “We find that the reason why[clients] are not getting traffic to their websites is because they have paid a cheap and nasty web designer that has not made the website SEO friendly.” Further, they do not have marketing experience that is needed to convert any traffic to sales. Mu says that it is sometimes cheaper and easier just to build an entirely new site for the clients who have been burned by bad designers.

Before hiring, take the time to learn the basics of design so you know what to ask – and which answers you need to hear. Also, ask any prospective designer to provide a list of sites he or she has worked on and a list of references you can check. And check them. Check the sites. Are they SEO-friendly? Can you find them and navigate them easily? You can find resources online that provide you with questions to ask, but also make sure to specifically inquire about SEO and marketing experience. Focus on this, and pin them down on details. You can get a feel for their level of knowledge, and if you start to hear too many buzzwords and not enough actual content, then cross them off your list.

Hiring a competent, experienced designer does tend to cost more initially. However, if you have an optimized website that draws traffics and helps you convert that traffic, you are saving – and making – money.

Web Design: Function over Form

Posted on Aug 24, 2011 by Taylor to Web Design

If you look at new, and newly designed, websites, you will see a definite theme of simplicity coming through. The emphasis is on function over form, though, of course, appearance is always important. But the look of a website is no longer just something to please the eye; it must contribute to the overall usability of the site.

Does that mean Flash is out? No. It can mean that, but there are several sites that integrate Flash; the Moodstream page from Getty Images is a good example. It does take a few seconds to load, so mobile users may find it obnoxious. But for traditional users, it’s fun and fresh. By adjusting “mood sliders” you tweak the stream of images and audio that is flowing by. This relates perfectly to Moodstream’s claim that it is a “powerful brainstorming tool” that will get the creative juices flowing. It works for both the message and the target audience.

On the other hand, if you are selling car parts, and have animations of flying carburetors and fuel pumps, that is not an effective use of technology! Your audience will want straightforward information, such as prices or your hours. Delivering what your consumers want – not what you think is fun or looks good – is of the utmost importance.

Color schemes are also following this route. Working with two or three colors helps you create a very simple, clean palette, which not only appeals to the eye, but helps convey a message of honesty. Tori’s Eye , a “Twitter visualization tool,” is a good example.

Designers and developers today have to contend with more than a traditional computer screen; they have to be ready for mobile, touch, and tablet screens. Having a mobile optimized site is all but a requirement today. Check out online tools so you can see how your traditional site will look on a mobile screen; it can be a great help to see what mobile users see so you can modify your site and enhance their experience. Simplicity, easy navigation, and direct access to information is essential.

Copyright Alert: Check Up On Your Web Designer

Posted on Jul 26, 2011 by Taylor to General, Web Design

Few online tasks are easier than “appropriating” an image for your own use. Whether it is a picture of a celebrity on the red carpet for your blog or a still life that relates to your business or industry for your website, simply copying and pasting photos, art, and other images is ridiculously easy. That doesn’t make it any less illegal though. Most business owners know that you cannot violate copyright this way – but there are increasing complaints that websites are using illegal images. While the blame may technically lie at the feet of your web designer, who used the image, you are, ultimately, responsible for what appears on your site or blog.

Phil Orford, the chief executive of the Forum of Private Business says, “We’ve received a number of calls recently from members who have been notified by Getty that they owe money because they are, however unwittingly, using unlicensed images on their websites.” Part of the problem is that images are so easily available. They appear to be free. Why not take them? It is like paying for fruit at the market or simply going to the tree and picking it yourself. But someone owns the fruit on that tree.

Another issue is that business owners assume that web designers will adhere to copyright laws and only use images that are either free under fair use rules or which they have paid for through an image service, like Getty, ShutterStock, iStockPhotos, and others. This isn’t always the case, unfortunately, and your business or site could be held liable for using images that do not belong to you.

It is easier today for copyright holders to track their images online. This means that even if you have a very small blog, with a readership of 1000, the holders can still find out if you’ve taken their images. While some are content to simply let you take it down, and some may even let you use it, others will take legal action.

To avoid this, check out the images on your site. If you entrusted your site to a web designer, ask them where they got the images and if they are free under fair use rules. If you are thinking of putting up new images, don’t just use any one you find on Google Images. Yes, you may be able to get them and upload them, but that doesn’t mean they’re free.

You can find free images, which are often used on blogs, but many forbid commercial use, so watch out for this as well. You can buy stock photos, or more accurately, you can buy the right to use them. Check on the terms of the agreement to make sure you are using the photos correctly.
Or you could always take your own photos or create your own images – just make sure to copyright them.

Tags: copyright

Absolute Positioning CSS Elements: The Basics

Posted on Jul 22, 2011 by Nate to Web Design, Web Development

When first learning to write HTML and CSS, creating  a compatible, functional, great-looking website can be a daunting task. Many early developers are stuck with hours upon hours of troubleshooting, trying to figure out that one small piece of CSS that is causing their page to to look like a garbage dump. That’s why, in this series of posts, we’ll be going back to the basics and looking at some simple CSS methods you can use to crate great designs with as little hassle as possible.

The first item we are going to look at is absolute positioning. Let’s assume you have a box like below that you want to place some objects in, but they are not going to be sitting side-by-side like usual. Instead, you want them to be layered on top of each other, and you want them spread out in different corners of the container.

The first rule when placing objects inside of a container is to give the container a style of “position:relative”. If this is not done, then the absolute elements we will place later will ignore this container, and will find the next highest div that is static and all of your positioning will be wrong.

Next, we can place any elements we please inside this container. By setting the elements to “position: absolute;”, we are essentially releasing it from any boundaries that existed. It can now overlap and move freely within (or outside of) the boundaries of the container through the use of top, right, bottom, and left properties.

Being able to move these elements anywhere on the page is great, but what about overlapping? Let’s say I want to add another div in the center of the box that would overlap the other boxes:

Now we have an overlaying box! There’s only one problem, it’s not showing over the other boxes. This is where z-index comes in.

By setting the z-index to ’1′, we are essentially telling the block to show above the other blocks whose default value is still ’0′.  So far we’ve seen that all of these blocks can be positioned inside of the container, but what if we want our blocks to show outside the boundaries of the container? we can give our blocks a negative position, just as easily:

By simply creating a negative position on the element, it will cause the element to move outside the bounds of your container. This can be used in a variety of ways on your website to create very interesting results.

And those are the basics of absolute positioning. Stay tuned for part 2 where we discuss some more basics of CSS.

Tags: basics, CSS, Web Development

Developing Search Engine-Friendly Drop Down Menus

Posted on Jul 14, 2011 by Joey to SEO, Web Design, Web Development

The goal of any site, whether it is commercial or not, is to provide a user friendly experience. Navigation is crucial, and visitors need to be able to locate the information they need quickly and easily. Or they will leave. It’s just that simple. Drop down menus, while not typically a favorite of developers, can help organize content and present it to visitors in an easily navigable way. The menu needs to be not only user-friendly, but also search engine-friendly.

Drop down menus have never been very search engine friendly. Search engine algorithms are designed to troll for plain text, and the complexity of code is off-putting to spiders. In the past, developers were warned away from using Javascript, but today, there is a variety of ways that you can make your menu more attractive to search engines. The jQuery Drop Down Menu tool, for instance, allows you to develop clear, unordered list structures and features search engine optimization and full cross-browser compatibility. With the jQuery-powered tool, you can add custom styling with CSS to make your drop down menu look and act the way you want.

Pure CSS Menu is another free online tool with which you can develop drop downs. You don’t need to know HTML or CSS coding in order to create your menu, which is helpful for non-developers. Your menu will feature cross platform compatibility, small size, immediate loading, and disabled Javascript, and the content of the menu is readable by search engines.

Other useful menu tools, depending on your needs, include:

• SoThink DHTML Builder 9.6
• HTML Menu Buttons
• Dreamweaver Menu Extension 5.5
• Deluxe Menu 3.17.3
• EchoEcho.com
Sites typically get most of their traffic via search engines. You can satisfy both the engines and your traffic by providing optimized drop down menus.

Tools for Testing Websites

Posted on Jun 4, 2011 by Joey to Web Design, Web Development

Before launching a website, testing is essential. This ensures that your website looks the same and performs optimally across different browsers. Having your website run perfectly for Internet Explorer doesn’t guarantee that it will for Mozilla or Opera. With the increasing prevalence of mobile searches, it is also important to test your website for mobile devices. What are the best tools to help you test your website?

Wave. WebAIM’s free accessibility tool analyzes your website to determine if it has any accessibility issues. For instance, it can detect broken links, linked images lacking alternative text, and other mistakes.

Browsershots. This is a great tool for testing compatibility across browsers. It takes screenshots of your web design as run in different browsers, including those in Linux, Windows, MAC, and BDS. You enter your web address, and distributed computers open your site in different browsers. A screenshot is then uploaded to Browsershot’s dedicated servers so you can review.

Spike Proxy. Instead of looking at compatibility, Spike Proxy looks for security issues within a website. It is available for Linux and Windows. It is a free download from ImmunitySec.com.

WebsitePulse. This is a paid subscription service that watches your services, sites, and applications all the time. It sends targeted tests to verify that your sites are working optimally. This allows you to keep your finger on the pulse, so to speak, of your websites. Obviously a more valuable tool for those monitoring several sites.

W3C mobileOK Validator. Make sure your site is mobile ready with this tester. It performs different tests to determine its “mobile-friendliness.” In the 3rd quarter of 2010, mobile search grew by 130 percent. Your site needs to be ready to go.

Testing for compatibility is important, as is making sure your site is fully functional. The above sites, and many others, can help you determine if your site is working its hardest for you.

Web Design: Optimizing Your Websites for Mobile Devices

Posted on May 25, 2011 by Joey to Web Design

Remember the good old days when you only had to worry about how your website looked and functioned on a computer? Today, though, more users are going mobile. Smartphones and mobile devices, like the iPod Touch or tablets, are becoming the preferred vehicle of access to the Internet, and it is expected that mobile use will outpace desktop use in just a few years. Designers have to look at making their sites attractive and usable for a variety of users; they have to look at what users can do on a mobile – as well as what they cannot.

Mobile access offers freedom and versatility, but there are tradeoffs in terms of restrictions and limitations. Screen size is the biggest hurdle, as is bandwidth. Smartphone users, in particular, may have slower connection speeds, but they also may have to contend with data caps. So, an accommodation designers need to make for mobile users is offering fewer images or formats like slideshows. Even desktop users are getting sick of slideshows; but mobile users just don’t have the capacity to handle them, and they will move on to a more streamlined site. Flash, too, is out.

Other features that are useful on desktops are not feasible for smartphones or tablets. These include scrollable areas in multiple panes, custom widgets and controls, and customized layouts. This last is important because the screen sizes for different mobile devices differ so greatly. When designers create a site that is meant to be viewed on a screen with X x Y amount pixels, it can create a poor user experience for those without the specified screen size. Likewise, you also need to be aware of the orientation of the page.

There is a lot to consider when designing sites, and you have to be able to accommodate a broad range of users. Having a site for desktop and one optimized for mobile may be the best way to provide the best experience for users.

Tags: mobile

WordPress 3.1 Changes

Posted on Apr 25, 2011 by Joey to Technology Trends, Web Design, Web Development

WordPress has just issued a new version, 3.1, that improves upon the most popular content management system in the world. Thirteen percent of the world’s top 1 million websites use WordPress, and 3.1 addresses a host of issues of its predecessor. What’s new for WordPress?

Post Formats. This function allows you to customize the way that a post is displayed. Users can choose whether to designate a post as a gallery, chat, audio, status, quote, image, video, link, or aside to help determine how the content should be presented. How does this look? If you designate a post as a video, it is displayed with a custom width to accommodate for the video. If it is designated as a quote, the quote may be displayed in large, italicized font.

Faster internal linking. This feature makes it easier to link back to content you have previously posted. You don’t have to dig back through your blog or site to find the specific content; instead, you can just enter a keyword or phrase.

Admin bar. On the profile screen, you can enable the bar within the admin screen. It is disabled by default, but enabling it allows quick access to admin tools. You can create new posts or access different back-end features. It is only visible when you are logged into your own site.

In addition to these changes, WordPress 3.1 has improved its interface and fixed more than 820 bugs. Many less frequently used features are hidden by default for a less cluttered interface. Overall, 3.1 has been greeted with great reviews; it has made the world’s most usable CMS in the world a bit easier. WordPress version 3.1 is now available for download.

Tags: wordpress