Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 02 2011

7 Factors to Consider When Redesigning Your Website


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

There are very few, if any, websites on the Internet that don’t undergo at least a minor facelift at some point in their lifecycle. If you own a business with a web presence, at some point, that site will need to be redesigned, whether it’s due to the changing nature of your business, or purely for aesthetic reasons.

Redesigning your company site can be a major undertaking, so we’ve put together a helpful list of things to keep in mind when considering a redesign.


1. Why Are You Redesigning?


This is perhaps the most deceptively complex, yet obvious question of all. Before undergoing any redesign, however, it’s important to understand what it is you wish to accomplish. Are you unhappy with the way your site functions? Do you simply want a better-looking site? Do you need to improve search engine rankings and sales conversions? Maybe the focus of your business has shifted and it’s time for new content.

SEE ALSO: 17 Web Resources for Improving Your Design Skills

These are all important factors to consider, so before you start, make a detailed list of what it is you wish to accomplish during the redesign. This will help guide you through the rest of the process and make sure you stay focused on the end goal.


2. What Type of Redesign Do You Need?


Now that you’ve decided exactly why you want to redesign your site, it’s time to decide just how far down the rabbit hole you need to go. Perhaps a small change in visuals and content is all that’s necessary. On the other hand, you may need to add new features or completely redo your underlying code base. Depending on your needs and budget, a large overhaul may be out of the question, or it may be the most cost-effective long-term solution, so take a moment to think about your needs going forward and work with your developer to strike a balance that best meets them.


3. What Does and Doesn’t Work Currently?


No matter how large or small the redesign, chances are there will be some elements of your existing site that work very well and some that don’t work at all. Now is the time to go through your site and identify these elements. Maybe your content is too verbose or your sales page isn’t very user-friendly. On the other hand, that photo gallery and the blog may be big-ticket items that do really well for your image and bring in lots of traffic. Some elements will need to remain (though possibly given a makeover), some will need to be cleaned up and some will have to go. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out.


4. How Is Your Site Being Used?


Along these same lines, don’t forget to take a look at how users are currently interacting with your site. This will help you identify great content and problem areas. Study your traffic statistics and site analytics for information on things such as entry and exit pages, sales conversions, and search engine keywords. This will help you to understand how visitors find your site and what they do once they get there. While you’re studying those statistics, also have a look at details like screen resolution and browser usage. This will help your developer determine what technical specifications your site should meet and whether a separate mobile version of your site is recommended, among other things.


5. Has Your Brand or Company Image Changed?


If you’ve undergone changes to your brand and company image, those changes need to be reflected in your site, even if the only updates are visual. Keep your logos updated and consider a color-overhaul if the corporate image or philosophy has shifted. Your website is often the first impression people get of your business, so it should grow and mature right along with the rest of your brand identity.


6. When and How Should You Launch Your Redesign?


When and how you launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. Maybe you’re simply making improvements and want to slowly roll out changes over time and unannounced. This unobtrusive rollout won’t give you a lot of buzz, but it will still accomplish your goals of improving the site’s performance and the user’s experience. On the other hand, a big relaunch around the holidays or at the start of a big promotion, or when announcing a major change in the way your business operates can both draw traffic and generate more interest.


7. How Do I Make the Transition Smoother?


Most people are a little intimidated by change. If you have a site that gets a lot of repeat traffic, a sudden, drastic change in form and function can be a bit off-putting to some users. Further, you don’t want this drastic shift to damage search engine rankings and suddenly destroy any and all backlinks you may have gathered over the years.

Try and keep vital elements of your site similar to their existing counterparts, such as the main navigation and header. Usually, your redesign should strive to be an evolution of your existing site, not a dramatic replacement. If the change is dramatic, make sure it’s clear and give your users a blog post or news announcement discussing the changes.

Similarly, you want to make things easy for the search engine spiders, as well. Moved content should be redirected via 301 redirects, for instance, and error pages should be helpful and transmit the correct header information and meta data. For human visitors, make sure those error pages contain helpful information that is, where possible, relevant to the content the user was trying to access.


Series Supported by join.me

The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series

For more Dev & Design coverage:


July 18 2011

July 15 2011

July 09 2011

40 New Digital Media Resources You May Have Missed


Whew! This week was awash with news. So, we transformed that news into advice, tips and how-to’s that you can reference for years to come.

Take Facebook’s video chat launch — we’ll guide you in setting it up. Or the space shuttle launch — we provide the Twitter accounts for dozens of astronauts and space experts. And Google+ has been on the minds of millions — we present its pros and cons. Mashable not only releases breaking news, we help you learn how to apply it to your business, your interests and your personal life.

If spare time for reading didn’t exactly factor into your busy week, here’s a roundup of resources that appeared on Mashable.


Editors’ Picks



Social Media


July 04 2011

5 Free Virtual Firework Shows To Celebrate July 4

If your favorite part of July 4 celebrations is the fireworks, then we’ve got a fun gallery for you. We’ve found five tools that offer virtual fireworks you can enjoy right at your desk.

Whether you want to send someone an animated message, play around to create a mesmerizing browser show or add fireworks to your own site, we’ve found web sparklers to suit.

Light the touchpaper, stand at a safe distance and rocket through the gallery. You can find out more about the tools by clicking on the blue title text at the top left of each slide. Let us know which ones you like in the comments below.


1. Enjoy Canvas Fireworks





This hypnotic HTML5 Canvas experiment offers three different shapes of fireworks that you can control with your mouse for a 3D wow experience.


2. Write a Message in Fireworks




This is tons of fun. Compose your own message and see it written across the London skyline in fireworks. You can also share it with an automatically generated tiny URL.


3. Add Fireworks to Your Own Site With Fireworks.js




You can add fireworks to your own site with this nifty Javascript animation experiment. Or if you're just firecracker-curious, you can play around with it on the dev's site.


4. View Augmented Reality Fireworks




Simply print off the marker, fire up your webcam and you can enjoy your very own miniature augmented reality fireworks show.


5. Go Old School With Fireworks Just For You




Dating back to 2002, this particular desktop show is perfect for kids, offering mesmerizing fireworks generated by the click of your mouse.


BONUS: Join the HTML5 Fireworks Festival




If you're handy with HTML5 then join the "Hanabi fireworks festival" by forking the sample code, or creating your own from scratch. The resulting entries will then be revealed as an online spectacular on July 7.

More About: apps, fireworks, HTML5, july 4, List, Lists, software, web apps

For more Dev & Design coverage:


7 Great JavaScript Resources


As browsers and server-side platforms advance, and libraries new and old grow and mature, JavaScript evolves as well. Staying at the top of your game is important. As a JavaScript developer, you’ll need to keep up with the latest news and learn new skills.

We’ve put together a list of seven of our favorite JavaScript resources to help save you time and energy along the way. Whether you’re a beginner or a seasoned pro, we think you’ll find the sites below both informative and beneficial. If you know of other great resources, feel free to share them in the comments.


1. Mozilla Developer Network




The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike. Here you'll find the official and complete JavaScript reference, as well as useful guides, tutorials and articles covering everything from the basics of how JavaScript works to its best practices and design patterns. The MDN also has a thorough DOM reference, which we highly recommend checking out as well.


2. JQAPI




JQAPI is an alternative to the official jQuery.com API documentation. If you're a client-side JavaScript developer, chances are you probably have used, or at some point will use, jQuery in at least one of your projects. Whether your use is occasional or daily, you'll want to keep up with the latest development and new features in JavaScript's most popular library. Each new release improves security and performance via a slick, responsive and intuitive interface for quick browsing and searching of jQuery documentation. The UI here really is top-notch, and as a bonus, there's an offline version available for download.


3. JS Fiddle




JS Fiddle is a JavaScript pastebin on steroids. Create, share, execute and test your JavaScript right in the browser. This is a great tool for collaborative debugging or for sharing code snippets. It's also a fun way to perform quick experiments and test out new ideas. Simply combine your JavaScript, HTML and CSS, then click the "Run" button to see the results. You can also validate your JavaScript code against JSLint and save your Fiddle for use later, or share with others. JS Fiddle provides a number of useful features, like the ability to load up common frameworks automatically (to test your jQuery or MooTools code, for example) and as-you-type syntax highlighting, just like you'd get by writing code in your favorite IDE.


4. Eloquent JavaScript




This free ebook is an introduction to programming and the JavaScript language, written by developer and tech writer Marjin Haverbeke. The book reads much like a tutorial, and introduces a number of concepts and real-world applications in a clean, concise style. Interactive examples are also available, which means you can read about various techniques. You'll also get a chance to see them in action, and tinker with the code yourself. We found a lot of positive reviews for this book, so if you're new to JavaScript, this is definitely a book worth checking out.


5. Douglas Crockford's JavaScript Videos




An undisputed expert in JavaScript, Douglas Crockford is Yahoo's JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language. The videos and transcripts on the YUI blog derive from a series of talks given by Mr. Crockford about the history of JavaScript, its future and its use today. Though the series is now about a year and a half old, we still think you'll find the videos informative. We certainly recommend watching them for a better understanding of the language, where it's been, how it works and where it's going.


6. How To Node




Not all JavaScript development takes place in the browser. NodeJS is one of the web's most popular server-side JavaScript frameworks. Whether you're a seasoned Node developer or someone who's looking to add server-side JavaScript to his repertoire, How To Node offers a great collection of articles on NodeJS development. This community-driven site offers an excellent repository of Node tutorials that's proven itself useful on a number of occasions. No Node developer toolkit would be complete without it.


7. DailyJS




We've looked at some great tools and reference material, covered tutorials from our favorite libraries and frameworks and touched on both client and server-side JavaScript development. However, we're always searching for something new. DailyJS is a popular JavaScript-focused blog that brings you the latest and greatest JavaScript news, offers tips and techniques, and reviews libraries, plug-ins and services for JavaScript developers. If you're just itching for your daily dose of JavaScript goodness, DailyJS has you covered.

More About: design, dev, features, javascript, List, Lists, web design, Web Development

For more Dev & Design coverage:


July 01 2011

June 26 2011

June 17 2011

June 14 2011

100+ Gadgets & Accessories to Make Your Soul-Crushing Office More Fun


Even if you’re lucky enough to enjoy your job, spending time in a boring office is the pits. Here at Mashable, we believe a fun workplace with stylish touches can make all the difference.

Over the last year or so, we’ve worked hard to bring you some lovely lists chock full of inspirational accessories for the office, and gadgets to help keep you amused between the hours of 9 and 5.

Have a look for ways to brighten up your workplace, and comment below to let us know what you’d like to see in our next list of office resources.


Equipment


Don’t settle for anything less than best. Here we’ve gathered up resources that will point you in the right direction for the most stylish office kit around.


Fun


All work and no play makes Jack a dull boy. We’re bringing you the light side of office life with some fun bits and bobs to help your day go that little bit quicker.

June 05 2011

May 30 2011

May 25 2011

May 15 2011

9 Outstanding Websites for Design Inspiration


When it comes to web design and development, we’ve offered up our top picks for tools of the trade. We’ve shared great tips from pro developers. We’ve even wrangled exemplary sites to learn from.

But sometimes, a healthy dose of artistic inspiration is in order. If you’re a web designer (or web design afficianado) and low on creative juice, take a gander at some of these sites — recommended by top designers themselves — that push the limits of what artistic and technical expression can be on the web.

Have you come accross a truly spectacular site design that deserves the web’s attention? Share it in the comments below.


1. Lost World's Fairs - Atlantis




Take a journey 20,000 leagues under the sea via this compelling proof-of-concept.

"The Lost World's Fair project is a showcase of IE9 Web Open Font technology," says Jesse Thomas, founder and CEO of the design firm Jess3.

There are a few interesting projects from The Lost World's fair series, but Thomas picked Atlantis "because it was enjoyable to control how fast I processed the information. With this kind of responsive design, I can go slow the first time, and quick the next time."

Thomas also notes the aethetics. "The use of illustration is soothing. I really appreciate in these examples the attention to detail."


2. BeerCamp at SXSW 2011




Web designer Dan Rubin with code shop Webgraph suggested we take a look at this event promo site.

The design is unassuming at first, but the scroll bar packs a surprise.

"This is another stunning site from n'clud for an event at this year's SXSW. The scrolling effect is outstanding, taking you through the site with plenty of physical depth," says Rubin. "It's one of my favorite examples to show during workshops and presentations."

It's hard to explain just how impactful this website is unless you've experienced it. Go ahead. We'll be here when you get back.


3. Dmig 5




We've higlighted Design Made in Germany before when it won the first annual Web Font Awards, but it's so impressive it bears another mention.

Brad Colbow, an independent web designer and illustrator picked this one for our gallery.

"I'm a sucker for great illustration integrated onto a site, and this one does it really well," Colbow says. "It's using some transparency effects to change the backgrounds as you scroll down. This is one of those sites that looks great as you resize it in other browsers too."


4. Analog




Minimalism still rules the well-designed web, but that doesn't mean you should skimp on the details. The information site for web design shop Analog is the pick of UK web designer (and frequent Mashable contributor) Grace Smith.

"Analog is simple and elegant, with beautiful intricate details," says Smith. "However, it's the clever use of 'Easter Eggs' that make visiting this one-page site such a pleasure. The use of CSS3 transitions on the mugshots, along with the unique GeoIP implementation and Grid (try pressing G), make this a clear example of how to create a visually stunning site that utilizes current web development practices and encourages users to return."


5. Guide to the App Galaxy




WordPress developer Brian Casel (another design contributor to this site) pointed us toward this clever informational site from Google.

It's another effective use of the scroll wheel, and the graphics can't be beat. "It's both visually appealing and highly informative at the same time," Casel notes.


6. Octavo Designs




The web has seen its share of horizontally scrolling sites -- some better implemented than others. The portfolio for Octavo Designs bucks the trend of awkward side-scrollers, according to Kelli Shaver, a web/UI developer and regular Mashable contributor.

"The site is just full of texture and warmth, with very detailed, unique, often subtle illustrations," Shaver notes. "I think it works really well with the typography. Everything just comes together to create a very engaging experience."


7. One Bit Increment




A web full of shiny vectors and smooth white spaces can eventually get boring. Graphic designer Emily Caufield points out a more tactile approch in One Bit Increment's "gamified" homepage.

"I thought this site was a great fusion of meticulous handmade art and the wonders of modern technology," says Caufield, referring to the paper cut-outs that comprise the virtual landscape of this impressive Flash-based design. "It functions as a website, a body of art, and a game."


8. Ben the Bodyguard




Informational sites can become stale -- logo splash, navigation bar, some floating text, and a few graphic bumpers if you're lucky.

That's why "Ben the Bodyguard" is a step in the right direction, says Jacob Gube, founder and chief editor of the design blog Six Revisions and frequent Mashable contributor.

"It's a great proof-of-concept of what HTML5 and CSS3 can do," says Gube. "The site has a memorable user experience design; something that all websites should strive for, no matter how you execute it. Is it the most functional, beautiful or usable design? Definitely not. But did it succeed in its intended objective, which is to generate buzz about an upcoming web service? 13,000+ tweets says it does."

Take a stroll through this site to see what we're talking about.


9. Awwwards




Looking for a bubbling font of great design examples? LA-based web designer Soh Tanaka reccommends checking out the Awwwards (get it?), a site that recognizes and promotes the best of innovative design.

"It usually features sites that are very interactive and that push the limits of CSS3 and JavaScript," Tanaka says. "I feel most of these sites are pushing the boundaries of design and development on the web."


Interested in more Dev & Design resources? Check out Mashable Explore, a new way to discover information on your favorite Mashable topics.

Image courtesy of iStockphoto, skodonnell

More About: design, inspiration, List, Lists, web design

For more Dev & Design coverage:


May 14 2011

33 Essential Resources for Developers & Designers


For months now, web developers and designers have flocked to Mashable to learn from and share our how-to guides, analyses, videos, lists, videos and galleries.

Below, we’ve assembled 33 of our favorite resources since January and separated them into three easily digestible lists: inspiration, design and development.

To keep up to date with news and resources about the topics listed below, feel free to follow Mashable‘s dev & design channel on Twitter and become a fan on Facebook.


Inspiration



Design



Development


For more news and resources on the topics covered in this post, you can follow Mashable‘s dev & design channel on Twitter and become a fan on Facebook.

More About: features, web design, Web Development

For more Dev & Design coverage:


May 08 2011

April 26 2011

Top 10 Firefox Add-Ons for Web Designers


The Web Designer Series is supported by Wix.com, a free Flash online builder that makes website creation a breeze. Click here to create your own website now.

There are plenty of Firefox add-ons at your disposal that can extend the browser’s core functionality. The types of add-ons you’ll encounter have a wide range of utility, from productivity tools that monitor the amount of time you spend on the Internet, to social media tools that conveniently give you in-browser capabilities for using popular services such as Twitter and Facebook.

The Firefox browser is a popular choice for web designers, and there are plenty of add-ons that can make the day-to-day work of web design significantly more efficient and fruitful. Here are 10 highly recommended, top-notch Firefox add-ons for web designers. Let us know what other Firefox add-ons you use in the comments.


1. Web Developer


The Web Developer Firefox add-on is a huge suite of web design tools packed with massively useful functions that will help web designers perform tasks more efficiently. By default, it displays as a toolbar towards the top of the browser, presenting you with various menus such as CSS, Resize and Cookies.

Whether you need to inspect the CSS of page, discover information about a webpage (such as seeing all the alt attributes of images on the page), quickly validate a web design for W3C compliance or measure design elements, Web Developer will likely have a convenient tool for you.


2. Firebug


Firebug is such a popular web design/front-end web development Firefox add-on that there are actually add-ons for it (see no. 5). And if you were to ask any web designer or web developer what Firefox add-on they can’t live without, chances are he’ll say Firebug.

Firebug is an open source add-on that gives web designers powerful tools for inspecting and debugging a web design. It can help you figure out what CSS styles affect certain elements (in case you’re having trouble with a style rule that doesn’t seem to render properly), inspect the document object model (DOM) to learn about the structure of the web page, determine attributes such as color, width, height of HTML elements and much more.

The extension can take a while to learn (trust me, it’s worth the time), but the creators have some helpful documentation to get you started.


3. MeasureIt


This Firefox add-on has a single purpose: It gives you a ruler that you can use on any web page for measuring items. Since web design critically relies on the proper sizing of design elements, this is a valuable tool to add to your collection of Firefox add-ons.


4. ColorZilla


One thing that web designers frequently work with is color. This add-on includes a color picker (much like the one you see in Photoshop) and an eye dropper tool so that you can sample and identify the colors used on any web page. A similar Firefox add-on to check out is Rainbow Color Tools.


5. CSS Usage


CSS Usage is an extension for Firebug (thus requiring you to have Firebug installed) that uncovers unused CSS style rules. It works by identifying the CSS you use and don’t use, pointing out what unnecessary parts can be removed to keep your CSS files as lightweight as possible.


6. Page Speed


A website’s speed is important for usability and the user experience. Research has shown that website visitors hate slow websites, so you should do the best you can to design sites that are lightning fast.

Page Speed is a browser extension (for Firefox and Chrome) developed by Google that analyzes a web page and tells you where improvements can be made to increase the site’s speed. It’s a great tool for testing a web design’s ability to render fast. Alternatively, you can use Page Speed Online, which is a web-based version of the add-on. You can also check out YSlow, which functions similarly to Page Speed.


7. HTML Validator


This nifty Firefox add-on helps to make sure that you’re writing well-formed HTML. It checks your markup for standards compliance, and if it catches anything that doesn’t cut it, the add-on tells you why so that you can update the code.


8. IE Tab 2


Web designers are always concerned about the cross-browser compatibility of their work. IE Tab 2 is a Firefox add-on that allows you to view any web page using Internet Explorer without leaving Firefox. All you have to do is right-click on a web page, and then choose “View Page in IE Tab” in the contextual menu.


9. Screengrab


Taking screenshots in the browser is a common task for web designers. Screengrab is a simple tool for taking full-page or partial-page screenshots. You can copy the screenshot to your clipboard, or save it to your hard drive as an image file.


10. SEO Doctor


Search engine optimization should begin in the design phase, when the site’s HTML is still malleable and open to change. SEO Doctor is a convenient tool for checking any web page’s SEO.

SEO Doctor gives you a score between 0 and 100% and highlights areas in the web page that can be optimized for search engines. One neat feature is that you can export the data for spreadsheets for further analysis and logging.

What other add-ons do you use? Let us know in the comments.


Series Supported by Wix.com

The Web Designer Series is supported by Wix.com, which brings amazing technology home to everyday people. Discover the amazing simplicity of its online Flash builder and enjoy creating beautiful websites with powerful drag and drop interface.


More Design Resources from Mashable:


- A 12-Step Guide to Fostering Your Creativity
- 8 Powerful & Inexpensive Desktop Design Apps
- HOW TO: Get Started with the Less Framework
- 8 Essential Web Typography Resources
- HOW TO: Turn Your Foursquare Data Into an Infographic

More About: CSS, Firefox, firefox add-on, firefox plugin, html, web design, web designer series

For more Dev & Design coverage:


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl