There is no single right workflow to build a website. But there are ways to improve your workflow and make your job a little easier.

Whether you design or write code there’s usually some part to the process that can be streamlined. This can change depending whether you work solo or in a team environment. But if you know how to tweak your process you can get projects done faster with fewer manual tasks and your workflow can improve greatly using DIY tools or custom layout builders.

In the past we’ve covered responsive workflows and in this post I want to share common design & dev workflow optimization strategies. I’ll offer tips and resources for the creative process and help web designers & developers build their projects with more accuracy and precision.

Starting with a Wireframe

It’s a good idea to start with a wireframe on every single web project. This helps you flesh out ideas for the content, the layout style, and the organization of page elements like the logo, nav bar, and CTA buttons.

Your initial goal should be to construct a rough layout using lo-fi wireframes. Keep them quick and loose. You’ll save time on bad ideas and laser in on the good ones.

If you need some wireframe templates to get started I recommend Noupe’s gallery full of digital wireframes.

But I personally prefer working on paper with pencil for quick sketching. It’s my top recommendation for anyone who wants to rapidly prototype wireframes from scratch to get ideas down quickly. Erasing is much easier on paper and you have much more control over the whole sketching process.

Don’t be afraid to put down 10 or more different wireframe ideas. I never get it right the first time and I don’t think any other designers do either.

If possible try to get your final wireframe precise before moving onto a mockup.

This way you have less guesswork down the pipeline and each stage of development just further clarifies your original concepts.

Planning Copy & Behaviors

Once you roughly know how the site should look you can start getting into the details. This can start with a mockup but I prefer building a higher fidelity wireframe first.

This involves placing sample widgets and web copy into the wireframe that looks good and guides users down the page.

This is a difficult task and it’ll be slightly different for every project. But you should think about what your users want to do and keep this in mind the entire time.

Also consider usability and how your written copy can affect the user experience.

There is no single correct way to write content. But the writing should be compelling and guide users further into the site.

While planning high-fidelity wireframes it helps to add image placeholders along with written copy. This way you can see how the layout could eventually look without using filler content.

But also consider the value of large headings and custom styled page copy like bulleted lists. Your title text draws users into each section and you often have just a few seconds to capture their attention.

Always work around two concepts when designing page text: clear contrast and plenty of whitespace.

You don’t need to choose a font face or text color during this step. If your wireframe is easy to skim it should be obvious at a glance.

Understanding user behavior makes it easier to build copy that helps users get around the site. This high-fidelity/light mockup is probably the most important stage because once you get into the full mockup design you’ll already know the layout is readable and easy to use.

Trust Frontend Frameworks

There’s a lot of buzz surrounding frontend development frameworks. These mostly include libraries like React, Angular, and Ember.

All of these can save time when building a new site, assuming you know how to use your framework of choice. The goal isn’t just to streamline frontend development but to also architect your whole website. Check out this thread to learn a bit more.

The primary goal of any framework is to separate complex functions and help you build more with less code. Modern JS frameworks handle user input and control how data gets transferred from the backend to the frontend.

The new Angular 2 release does this well and has garnered a lot of attention.

But I’ve really grown to appreciate the detail in Ember.js which comes out of the box with features for routing and asynchronous behavior. The Ember learning curve is steep but with the right learning resources you can move quickly and might even enjoy the learning process.

The biggest upside of a framework is modularity when it comes to building a new project.

You’ll know exactly where to start, how to scale, and how to organize new files with the same structure. Architecture is just as important as how you write your code.

If you’re curious to learn more check out this guide to see how other devs implement frontend frameworks into modern web projects.

Testing & Debugging

I first started writing code when IE6 was still popular. If you don’t already know, web developers have some discontent for Internet Explorer.

Browser quirks are far less common these days but they do still exist. For this reason testing should still be a big part of your dev workflow.

Beyond major browser bugs you’ll often have minor differences between how certain browsers render margins, patterns, box sizing, and similar properties in browser engines like Gecko vs WebKit.

One way to test is to have all these browsers on your development computer. After you make big changes to your code just check your work in all browsers. However this can get annoying quickly.

Instead try using browser testing tools that’ll save time and frustration. Here are some of the most popular choices:

• BrowserStack
• Browser Shots
• Browserling

I’d also recommend that developers add responsive testing tools into their workflow.

This helps you test each major breakpoint in a responsive layout without needing to constantly resize and switch the browser.

My two favorite extensions are Responsive Web Design Tester and the Viewport Resizer. Both are completely free and work great for live testing.

Another tool I highly recommend is the in-browser debugging console. This is great for testing JavaScript code and looking for potential errors in your HTML/CSS code validation.

Google has an entire guide to the console window teaching how to get started and what each of the panels does.

All of these tools are incredibly valuable to the debugging process. But each developer will fall into their own workflow so it’s up to you to decide which tools offer the most value.

Wrapping Up

There is no single proper way to build a workflow on the web. But there are best practices and techniques that you can adopt to make the process smoother and easier to manage.

I hope these tips can help shape your workflow both on the design and development side. It’s now much easier to build and launch a new website, so if you’re constantly launching new projects these little tips can make a world of difference in the long run.

Read More at Workflow Tips For Web Designers & Frontend Developers

One of NYC’s finest designers is Roberto Blake who just so happens to also run a small YouTube channel with advice on the design industry.

Recently I stumbled onto this great 13min clip that covers crucial info about marketing yourself and being the kind of person that creative directors want to hire. I know the title seems really generic, but the content itself is phenomenal – especially for people fresh out of design school. You can stream the video for free right off YouTube.

Some of the key concepts & ideas he mentions are:

• How to Get Hired as a Graphic Designer
• How to Get Graphic Design Clients
• How to Market Yourself Effectively as a Designer in the Current Era
• How to Find Inspiration as a Graphic Designer
• How to Be Successful as a Graphic Designer

I’m not intimately familiar with Roberto Blake or his work, but I have to say this is one seriously helpful video. Whether you’ve gone to college or not these tips ring true for all fields of design including print, illustration, animation, and in some cases even development.

The most important concept to remember is likability. Sell your work but also really try to sell yourself as someone that people want to work with. That’s the secret to getting a 2nd interview callback or building a network of trusted freelance clients.

In truth, all of his tips are essential to the business of design. This is something you won’t always learn in college but will always be a big part of any creative career path.

Read More at Roberto Blake’s 5 Things you won’t Learn in Design School

The word “accordion” typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript and more prominently jQuery.

I’d like to cover a series of examples and techniques for building accordion interfaces into any website layout. Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions. This post should outline the important concepts and topics related to accordion interface design.

Why use Accordion Menus?

I like to think of accordions as content management tools. When you have a page that’s broken into dozens of paragraphs, links, images, or just too many blocks of content… accordion menus to the rescue.

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. And you can build quick accordions if you use website builders or CMS engines like WordPress.

But each interface works differently based on the circumstances of the layout & the type of website.

Nowadays the biggest concerning factor would be the total number of visitors who don’t have JS-supported browsers. Over the past decade this number has dwindled considerably low as more people are upgrading their computers. This means you should have almost no concern because even mobile smartphone browsers support JavaScript. If the content is viewable and the accordion is usable then where’s the harm?

Just be sure that each accordion component has a real purpose. There are times where I’ve found accordion FAQ pages that could have just listed content down the page without forcing me to click on each heading. Granted I understand the premise but if each answer can be surmised in a few sentences, hiding that content isn’t going to improve the user experience.

So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organize content in a way that makes navigation simpler than endless scrolling.

Sliding Menu Effects

One of the most common interfaces you’ll experience is the sliding menu effect. This is usually vertical with a series of links hidden within sub-links. Clicking on a primary link will then expand the list of sub-links in a sliding animation.

Sometimes a website’s entire navigation menu is built on this accordion effect. Other common choices are dropdown menus which appear on hover – but accordion menus don’t slide over the page since they’re built into the page. So the effect is somewhat different and offers a different user experience by comparison.

Take a look at this Designmodo tutorial which explains the process of accordion development in a nice tutorial. The source code is free to download but it should really serve as an example describing how this interface might work. Designmodo has a live sample preview which demonstrates how the menu behaves in action.

Notice how the menu will automatically close when opening a new section. This is typical behavior when constructing an accordion menu because only one primary menu is open at any given time. But this is not a mandatory feature and, in fact, most accordion menus allow every section to be open. This choice depends largely on the website itself and how content is expected to behave.

CSS3 Tabbed Content

Another example of accordion content is based on tabbed widgets. So instead of having links listed vertically, tabs are used to manage shifting content. This is another really popular method of content management because JavaScript has made the process super easy. But since most developers are already familiar with JavaScript, I’d like to cover the more advanced techniques.

An alternative to JavaScript is the expandable accordion UI with CSS3. Granted they both seem like a risk but CSS3 has much less browser support. The only benefit is that CSS3 doesn’t require as much code and offers a simpler method of animation. If you prefer modern CSS3 animation check out the following tutorial:

Codrops publishes very high-quality content and their accordion CSS3 tutorial is no exception. The code is free and downloadable if you want to try it out yourself. Their live demo includes a couple different options which utilize checkboxes vs. radio buttons.

Checkboxes allow users to select multiple items at once. Using the checkbox method you can have many different content areas open at the same time. Radio buttons only allow one radio item to be selected. This means when opening a new section the previously-open section will close. Both work great and will vary based on the needs of each project.

Sliding Portfolio

Webpage content is managed via alternate pages for simplicity and ease-of-use. Visitors would rather browse through different pages rather than sift through a long single-page design. However working with collapsible accordion content makes the latter a lot more reasonable.

Take for example the homepage of Toko which uses a dynamic portfolio listing. As you click on each item the list will collapse smaller for an easier view of the project. This is by far an odd concept but it works great on their website. Why? Perhaps because of the minimalist design, perhaps because of the grid-like structure.

Either way portfolio sites can be an excellent choice for accordion widgets. Not every project should rely on accordions to best manage content. But think of the control you can offer visitors by organizing projects into larger categories and even sub-categories. Make use of this sparingly but keep it in mind.

Image Galleries

In a similar vein as the portfolio listing is a collapsable image gallery. In accordion-style this can take many forms as vertical, horizontal, slidable, tabbed, you name it! Touch-based interfaces have also allowed for swipeable image galleries that work nicely with computer mice too.

Getting back to Codrops I found another great tutorial covering an image accordion with CSS3. The effect is really cool and surprisingly supports click events. Each image is given some caption text which animates into view. What I like about this design is that it doesn’t rely on tabs or links or anything outside of the images themselves – so the content becomes the tabs. Pretty cool right?

Here’s a free jQuery plugin for building a responsive accordion image gallery. This example behaves similarly to the Codrops tutorial except all the animations are handled through jQuery. Also the caption text is a bit larger and seems more smooth. I’d like to state that either one of these effects could be duplicated and pushed onto the other – it’s simply a matter of recoding the design to fit the interface.

But my point is to demonstrate that both CSS3 and JavaScript can be used to create most of these effects. Unfortunately older browsers will never be backwards-compatible to support new CSS3 animation. Working with JavaScript is still the safest choice, but as more people upgrade their web browsers we can hope to see a future with primary support for CSS3.

Free Code Snippets

I’d like to wrap up this post by offering a collection of free open source code snippets. Each sample demonstrates the power of accordion content whether in a navigation, FAQ listing, or tabbed widget. All of these codes have been shared on CodePen and should be reusable on any project.

Granted you can always pick up a free plugin to rebuild something from scratch instead. Lots of developers release their code for free and try to help the community with free plugins. And of course there will always be those who prefer to build everything from scratch. But if time is a factor then I highly recommend working from these code snippets to ensure greater compatibility and a much quicker development schedule.

3D Accordion

Material List

Animated Accordion

CSS3 Dark UI

Full-Width Content

Multi-Level Accordion

Flyout Dropdown

Colored Bars

Multi-Level Accordion

Responsive Content

Sexy CSS Accordion

Dope Accordion Menu

Vertical Radios

Horizontal Radios

BEM Accordion

Pure CSS

Blue Accordion

Flexbox Tabs

Pure CSS Menu

Multi-Color Accordion

Read More at Best Practices for Accordion Menu in Web Design

Hamburger icons are those little three-bar icons you see in the corner of many websites and mobile apps. These primarily trigger a sliding drawer navigation which contains links to pages all around the website. Sliding drawer nav menus are great for responsive design but they can also be tricky to implement. These tips will help designers come to terms with the most popular solutions for hamburger menu design.

Please note this article will not be a discussion on the pros & cons of using hamburger menus. These are just some good tips and design patterns for building sliding drawer hamburger menus. Plenty of alternate navigation styles exist which could be used in place of sliding menus if these feel too restricting.

But well-designed sliding nav menus can fit perfectly into most layouts and have become a well-known interface style by most smartphone users.

Extensive Browser Support

Every major web browser and operating system should be considered when designing these menus. However mobile users would be the ones truly afflicted if they were unable to browse through a website.

The majority of modern browsers support pure CSS sliding menus and basically all of them support JavaScript. So a good idea might be to use pure CSS for the animation with JavaScript as a fallback. I wrote a great tutorial detailing how to create this effect for any layout.

Generally speaking the real troublemakers would be older smartphones and/or depreciated browsers like Internet Explorer 6 or Firefox 2. While these older browsers do support JavaScript, they may not support CSS rendering for menus on top of content or sliding animations.

But at some point you’ll have to accept which browsers are being support and which aren’t. It’s possible to design a fallback using IE conditionals where the sliding drawer becomes an inline block list of links.

Your goal should be to support the widest variety of browsers without compromising the design. It may not be possible to support IE6 but you should aim for the vast majority of mobile operating systems along with all current browsers. Also try using Google Analytics to track which browsers are most commonly used by visitors over an extended period of time.

Use a Recognizable Icon

The traditional 3-bar icon is used by most websites with the sliding drawer menu. This is how the menu came to be named “hamburger” since the 3 bars could be considered a patty with two buns.

It’s easy to design your own hamburger from scratch or grab a free icon from various online sources. But the point is to remain consistent for a good user experience.

Icon design is already a confusing subject with so many different glyphs and symbols out there. By sticking with the traditional three-bar icon you give users a sense of closure because they will instinctively know(or assume) what it does. Most users are familiar with the 3-bar icon so it’s the safest bet.

Bring Focus to the Menu

There are different methods of drawing attention to a hamburger menu. Some use fancy animation while others take up the majority of the screen. Although there aren’t any incorrect methods, there are some that feel better to me from a UX perspective.

One of my favorite hamburger menus can be found on the homepage for Comedy Central. When the site is fullscreen all the navigation links stream across a horizontal navbar. However when the site drops below a certain width all the links are hidden within a sliding responsive nav menu.

The reason I love their effect is because the nav menu opens a dark modal over the page when triggered. So when a user opens the menu it’ll appear “on top” of the page because it won’t be shrouded within the semi-transparent dark layer. Also the website text cannot be selected which leaves the navigation as the only clickable item.

Their sliding drawer menu can be closed by either clicking the 3-line icon or clicking anywhere else on the page. It’s a simple effect and this is what makes it so great – the design blends perfectly without any major rendering bugs.

But alternatively you might try going with a vertical navigation instead. This can be created from the same icon link, but instead have the navigation slide down from above the page.

You’ll see an example on The Minute of Silence mobile website. When the page is fullscreen it’ll use a sliding nav menu which appears vertically. This is when the site loads on the primary domain – but using the mobile prefix it’ll pull from the top menu instead.

I find this technique works best if you don’t have too many links in the menu. Vertical navs are perfect for large companies that have over a dozen links which people need to access. So the design style is completely relative to each website project.

Top Free Sliding Nav Plugins

Let’s wrap up these best practices with a collection of the best sliding navigation plugins. The majority are built for jQuery since it’s the most popular JavaScript library, but there are others available.

Take a look over the following plugins to see if any of them could be useful. When going for a customized hamburger menu it would be easier to just hard-code your own from scratch. But not every project needs a custom design and you will save time by going with a pre-built solution.

Slideout.js

Very recently I stumbled onto Slideout.js which is a touch-enabled hamburger nav menu library. Slideout.js is not a plugin – it’s a dependency-free JS library for creating sliding drawer menus.

It has native scrolling and works great on all touchscreen devices. As of writing this article the Slideout GitHub page has frequent activity ranging only a few days back, which means the developers are still actively working on updates. So far I’m truly impressed with this project!

Shifter

Shifter is a lovable little guy because it’s a newer component library which has been minimized for production websites. This plugin does run off jQuery and incorporates all the traditional features you would expect.

The difference with Shifter is that it’s ridiculously simple. There are very few customizable options and the only methods to call are for open/close and to destroy a menu. If you’re skilled at writing JavaScript then this could be a library for you to customize yourself, but it won’t be fully-featured right out of the box.

Drawer

The combination of CSS3 and JavaScript has been a true match made in heaven. Drawer is a jQuery plugin which relies on CSS3 as the natural method for transition effects. This is often better since the animations can be smoother and CSS is rarely disabled like JavaScript.

Please note that Drawer requires a hefty amount of plugins like iScroll to create some of the effects. But it does work great and looks fantastic on mobile devices.

Sidr

For a more straightforward plugin you might try Sidr on purely-responsive websites. This plugin was built not only for hamburger menus but also to display the full menu on larger screens. Sidr is controlled programmatically so it can work from a click or swipe event. The code is easy to use and easy to customize for a first-timer.

Pure Drawer

The Pure Drawer library is built using CSS transition effects for off-canvas menus. This library is triggered exactly like sliding hamburger menus with the added benefit of relying on CSS to handle the majority of effects.

Pure Drawer has lots of custom options for pulling the menu left, right, or even from the top of the page. You can also change the animation style and icon design for the menu. If you want a nav made with pure CSS then I’d highly recommend this library your hamburger menu.

Slidebars

Slidebars is yet another jQuery plugin for implementing sliding sidebars and hamburger menus. It’s a little slower with development because the creator has been busy with other work. But it does have a GitHub project page where contributors can ask questions or supply bug fixes.

Wrap Up

Design is not full of rules, but rather guidelines for creating wonderful ideas. In web design these ideas need to be usable and easy to interpret on any screen. Hamburger menus get a lot of flak but they’re still used a lot because they work. So while this trend is still around it’s a good idea to create menus that users will anticipate rather than trying to radically change the game.

featured image source

Read More at Best Practices for Sliding Hamburger Menus

Have you ever thought of something that would really improve your workflow, but you just don’t have the skills to make it?

Request for Startup is a service that brings all these ideas together into one curated feed. Twitter users can send an idea to @Request4Startup for a chance to be featured on the site.

Ideas can get voted on either from the site itself, or via faves/retweets on Twitter. The highest-voted ideas naturally rise to the top for extra visibility.

Then talented developers can check out the list and pick out cool ideas that seem worth building.

You can sort by newest ideas, currently trending ideas, and the top ideas of all-time. This gives everyone a chance to get noticed and (hopefully) see some cool stuff added into the world.

Check out the Request for Startup homepage to see recent ideas or sign up for the weekly newsletter.

Folks who want in on the action should fire out a tweet to @Request4Startup to see if their idea can get listed on the website.

Read More at Got a Startup Idea? Send it onto @Request4Startup to get Featured

HTML preprocessors like Haml make coding items a breeze. However the hard-coding aspect of HTML is never fun – it’s not hard but rather mundane and monotonous.

While a webapp can’t automate the whole process, Listify can help when building HTML lists.

You simply input a raw text list of items and choose an ordered/unordered list format. You’ll also be able to specify if each list item should have an ID or various classes. You can choose spacing counts for indentations along with many other similar settings.

The Listify webapp is actually hosted for free on a GitHub project page. Anyone is free to fork the Listify repo or download a full copy for their local web server.

If you want to try it out just visit the Listify page and give it all you’ve got.

While it is rather simple, it’s also an incredible piece of automation for frontend developers who constantly find themselves transcribing Word documents into HTML.

Read More at Listify Converts Plain Text Lists into HTML Syntax

Font Combiner is a free web tool used to customize, reuporpose, and publish fonts to get them ready for use on the web.

Users have access to 100+ different free web fonts that are ready for customization. All you have to do is set your own parameters and publish the font files. Each creation will export all the necessary items for including within a CSS file.

Here’s a brief snippet from the Font Combiner website:

All fonts offered as sources are free and open license. Simply apply as many or as few glyphs as you require and generate a brand new custom font.

A versatile web font creator and font improvement tool exposing advanced font features to the end user – kerning, subsetting, various hinting options and custom font glyph combinations.

Free to use, with an ethical subscription service for advanced users allowing the upload of any TTF or OTF font for use with the same system (license permitting).

This can be an excellent choice for anyone who wants to craft their own webfonts without any worry of licencing issues.

To learn more & try it out just visit the app homepage or follow the latest updates on Twitter @FontCombiner.

Read More at Font Combiner can Reformat TTF/OTF files for the Web