Archive for Database Programming

As a follow-up to our tutorial on creating a responsive slideshow using bootstrap, we continue with your next request: A responsive drop down menu using bootstrap. And like the bootstrap slideshow, this one is going to be just as simple.

Let’s get started.

Create an HTML page for the drop down menu:

  1. Launch Dreamweaver
  2. Select Site > New Site.
  3. In the dialog box that appears, enter the following information:
    a) Site Name
    b) Local Site Folder: Click the Browse or Folder icon. Navigate to any of your local folders you want to use for this
    c) Click Save
  4. Create an image folder under the Site you just created and call it “img”.
  5. Copy your images to this
  6. Select File >
  7. Select Blank Page, page type as HTML, and Layout as
  8. Save the page as html

Creating the dropdown menu

  1. Open the page http://getbootstrap.com/components/#dropdowns
  2. Under the Example section for Dropdowns, click Copy in the code
  3. In Dreamweaver, paste the copied contents in between the <body>
  4. Copy the following piece of code after the title
  5. <!– Latest compiled and minified CSS –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap- theme.min.css”>

<script src=”https://code.jquery.com/jquery-1.11.2.min.js”></script>

<!– Latest compiled and minified JavaScript –>

<script  src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

  1. Save the
  2. Select File > Preview in Browser, and select a browser in which you want to preview the You should now see the drop down menu in your browser.

dropdownmenu

What exactly did you do?

The code you copied below the title tags contains links to CSS and JavaScript files that are required for your dropdown menu. Except for the structure of the menu that is defined in the body section of your HTML page, the rest of the information is contained in these files.

You can download the completed version of this HTML page from this location <link to the HTML page>

See a description of the classes that were used to create the dropdown menu. The Bootstrap Components page also provides you with information on customizing your drop down menu. Explore the various sections of the page to create a dropdown menu that best suits your requirements.

Happy Coding!

Comments (0)

A new project brief comes across your desk. You need to create something to show your client. Do you jump right into your code editor to start mocking something up or do you launch design software? We’re seeing this conversation play out across the web, so we thought we’d ask a few experts to weigh in by sharing their process. Have something to add? Let us know in the comments.


Luke Clum, Designer / Co-Founder of Storyform

lukeclum

Choosing between designing “in browser” vs “in software” isn’t a black and white decision and usually depends upon the project. If you’re working on some existing piece of software, then designing in browser is often less efficient and more restrictive. The client will most likely have their own development team and will find static PDF’s most useful. However, if you’re building a new project from the ground up, then designing in browser can be an excellent option for improving efficiency and showcasing concepts. As a general rule though, I personally try to use a mixture of both within my workflow.

The basic problem with static comps is that they don’t adequately represent the final product that the designer is asked to create. They’re not responsive, don’t show animations / interactions, often set poor expectations towards rendering (especially with typography), and ultimately don’t output anything inherently functional. However, despite the issues, designing in software is still often best for creative exploration and for sharing ideas with clients. Therefore, I like to focus on using design software to create “mood boards” in place of finalized comps. Instead of using your energy to create pixel perfect images, use your design software for what it’s good at – solidifying a solid design theme. You can then sell this “mood” to your client and work out all of the details in development. This gives you the best of both worlds: software for creative exploration, and code for iterating your layouts / interactions / animations.


Ezequiel Bruni, Dark Lord of Design at Gods of Mayhem

Ezequiel Bruni

Personally, coding my mockups makes more sense. CSS3 can do most everything I need, and image editors get reserved for, well, editing images. It’s faster and easier for me to jump straight from a wireframe to code, as it can show my partners/clients exactly how I intend for the site to work. It answers a lot of questions before they’re asked, helping to decrease confusion.


Andy Leverenz, Owner at Justalever Creative

Andy Lverenz

I tend to kick off my projects with design software to start. Most of the time, If given a blank slate, diving straight to code tends to be a little overwhelming from my perspective. In fact, those that create mockups using code from the start often have the same look as many other websites. Developers and Designers going this route tend to use frameworks like Bootstrap or Foundation which limits creativity from the start in my opinion. Coming up with ideas, even if not complete, inside design software has proved to be my process of choice. Because of this I am able to set up an original style across the entire project I’m designing for that I can always refer to when I finally transition to code.


Comments (0)

Over the past couple of years, CSS has gotten a set of new properties that allow us to create quite advanced graphical effects right in the browsers, using a few lines of code, and without having to resort to graphics editors to achieve those effects. If you are like me, then that sounds like music to your ears. I don’t do well in graphics editors and would choose a code path over a graphical editor path any day. CSS now allows us to do more graphical work right in our text editors.

Examples of graphical effects that we can create using CSS today include textured text effects, photo effects like color editing/tweaking, photo and element blending that also enable us to blend elements with other elements, clipping content to arbitrary shapes, and more. You can even wrap content to arbitrary shapes with CSS too!

CSS has gone a long way, and in this article I want to give you an overview of the CSS features that allow us to create such graphical effects—namely blend modes and filter effects.

Color Blending with CSS Blend Modes

If you’re a designer who frequently fires up a graphics editor such as Photoshop or Illustrator, then you’ve inevitably come across blending modes at some point or the other during your work, since blending is one of the most frequently used effects in graphic and print design. Blending operations, also known as blend modes provide us with a fine level of color blending control that enables us to perform operations such as inverting colours, mixing them, highlighting them, and more.

Different blend modes, when used, yield different effects. And a blend mode is used to specify how an element, known as the “source” will blend with its backdrop—also known as the “destination”.

In CSS, the element’s backdrop is the content behind the element and is what the element is composited with. Compositing is the fancy term for the process of combining an graphic element with its backdrop.

When you blend two elements in CSS with each other, only the areas where these elements overlap will be affected by the blend mode you choose because, as you can imagine, only those areas are where these two elements can be blended.

Before the CSS Compositing and Blending specification was introduced, CSS already offered us one way of compositing elements known as simple alpha compositing. This is what the opacity property is for. By changing an element’s opacity, the browser makes it translucent so that the colours of its backdrop can show through.

Today, two main properties exist in the CSS compositing and blending specification that enable us to blend elements with other elements and an element’s background images by specifying one of 16 available blend modes. These two properties are: background-blend-mode and mix-blend-mode.

Blending Background Images Using The background-blend-mode Property

The background-blend-mode property, as its name suggests, is used to specify a blend mode for an element’s background layer. A background layer can be an image, or the background color.

The background-blend-mode property is used to specify the blend mode for each background layer.

If the element has more than one background image, you can specify multiple blend modes—each blend mode will be used for a background image such that the first blend mode in the list corresponds to the first background image in the list of background images, and so on.

For example:

background-image: url(first-image.png), url(second-image.png);
background-color: orange;
background-blend-mode: screen, multiply;

The second-image.png background will blend with the background color using the multiply mode, and then the first-image.png background will blend with the second image and the background color using the screen blend mode. (Reminder: the first background image in the list is the one on top, and the ones following it are beneath it.)

The background images will only blend with each other—they will not blend with any content that lies underneath the element itself.

There are 16 blend modes available in CSS: normal (which is the default blend mode and means that no blending is applied), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity. (For the sake of brevity, I will refrain from going into technical detail about each of these modes, and will recommend this article instead to learn all about them.)

These blend modes will modify the colours of a background image resulting in a different effect for each mode.

The hardest part comes when picking a blend mode to achieve a specific effect is knowing which mode to pick. It is very hard—if not impossible—to predict the result of applying a certain blend mode to an image.

The following image shows a set of results achieved when applying the above mentioned blend modes to an image. The image is being blended with a red background color. The order of blending operations from the top left corner of the image is the same as the order mentioned in the list above.

background-blend-mode-examples

The result of applying the different blend modes to an image, in the same order mentioned above, starting from the top left corner.

Usually, the way to choose a blend mode is by trial and error. Apply the blend modes to your image and settle for the one that achieves the effect you’re after.

Some blend modes, however, yield expected results and you can memorise those and use them whenever you need. For example, the luminosity mode allows you to create monotone images (bottom right corner)—this is a handy tip to keep in mind for when you’re after creating that big header image with a white heading on top which became very trendy during the past year.

As part of an article I wrote a while back, I created an interactive demo which allows you to upload your own image and preview the different blend modes on it. You can play with the demo here.

Screenshot of the interactive blend modes demo.

Screenshot of the interactive blend modes demo.

Blending background images is great and you can achieve some really neat effects using this property. The following image shows an example of blending an element’s background image with a linear gradient image also used as a second background image on the element. This image is taken from this live demo from the Codrops CSS Reference.

The result of blending a linear gradient background image with a photo background image on an element.

The result of blending a linear gradient background image with a photo background image on an element.

More creative effects can be created when you get to blend an element with other elements on the page. This is useful for when the images you’re blending need to be foreground images—not background images, and when you want to blend a piece of text, for example, with the image behind it. This is where the mix-blend-mode property comes in.

Blending Elements with Their Backdrop using mix-blend-mode

Probably one of the most useful and practical use cases for mixing elements is mixing a piece of text with some image behind it. And this is where the interesting effects come in. Think fixed headers blending with the content as the page scrolls down, or text blended with an image in the background, or text blending with other text, etc. Using the mix-blend-mode property you can do exactly that.

Just like background-blend-mode, the property accepts one of the 16 blend mode values available. Again, to see this in action, you can refer to the interactive demo mentioned earlier.

The following screen recording shows how you can add a piece of text and then blend it with an image of your choice using one of the different blend modes.

mix-demo

Screenshot of the interactive demo showing the mix-blend-mode property in action.

An example blending a piece of text with a background image behind it could look like the following. Assuming the piece of text is contained in a wrapper that has a background image applied to it, we could have something like:

<div class=“wrapper”>
    <h1>This is a blended heading</h1>
</div>
.wrapper {
     background-image: url(path/to/image.jpg);
   background-size: cover;
    /* … */
}
h1 {
    mix-blend-mode: multiply;
     /* other styles here */
}

You can also blend text with other text, allowing you to achieve nice colourful text overlapping effects like the one shown in the top right corner of the following image. All of the effects shown in this image can be achieved using different CSS blend modes.

blending-examples

Examples of effects created using CSS blend modes.

Using negative margins or relative positioning, you can shift the position of one word so that it overlaps with the word next to it, and then apply a mix-blend-mode to the word to blend it with the other word. The possibilities are endless.

Blending Notes

Sometimes, you may not want to blend an image or an element with its backdrop, or you only want to blend a group of elements together but prevent these elements from blending with other content behind them. This is where stacking contexts come in play and, using a property called isolation, you can isolate a group of elements so that they only blend with each other and don’t blend with other content on the page.

By creating a stacking context on an element, you can isolate the content of that element and prevent them from blending with the backdrop of that element. However, you can still apply a blend mode to the entire context to blend it with its backdrop.

Moreover, If you are using the background-blend-mode property, the isolation property is not needed since background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group (the element itself), as specified in the specification. This is why the isolation property will have an effect when used with the mix-blend-mode property, but not with the background-blend-mode property.

You can learn more about the isolation property here.

Note that the mix-blend-mode property also allows you to mix or blend SVG elements too.

Browser Support

CSS blend modes support is getting better by the day. You can keep an eye on browser compatibility for the background-blend-mode property here; support for mix-blend-mode can be found here.

Whether or not a property has full browser support, you can always start using it as part of a progressively enhancing workflow. These blend modes can be used to enhance your page designs, while falling back to non-blended alternatives in non-supporting browsers. By using a feature today, you’ll help push it forward and your design will eventually look right in other browsers as they support these features. So don’t let a limited browser support stop you from having fun with these properties today!

Image Adjustments with CSS Filter Effects

A filter effect is a graphical operation that is applied to an image as it is drawn into the document. It can be described as an operation that passes an image through a filter and then renders the output of that image on the screen.

One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter. What you see on the screen is the content modified by the filters applied to it.

To apply a filter to an image using CSS, you use the filter property defined in the CSS Filter Effects specification.

Filter effects include, for example, blur effects, drop shadows, and colour shifting and manipulation like saturating/desaturating colours, among others.

There are ten primitive filter effects in CSS, and a filter is applied to an element by passing a filter function to the filter property.

The ten filter functions are:

▪ blur()
▪ brightness()
▪ contrast()
▪ grayscale()
▪ hue-rotate()
▪ invert()
▪ opacity()
▪ saturate()
▪ sepia()
▪ drop-shadow()
▪ url()

Each of these functions is used to manipulate the image’s pixels and colours, and each function takes a parameter value that specifies the degree or intensity of the filter applied.

Conceptually, any parts of the element are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants.

The blur() function

The blur() function is used to blur an element by applying a Gaussian Blur to that element. It takes a length value as a parameter; this value needs to be a positive number and cannot be set in percentages. The larger the value the more blurred the element will be. A value of zero will leave the element unchanged.

What’s interesting is that since the parameter of the blur() function is a length value, this means that you can use any possible length unit, like em and rem.

The following are examples of valid blur() values:

blur(.5em);
blur(7px);
blur(0);
filter: blur(); /* equivalent to blur(0); */

The following image shows the result of applying a 10px blur to an image:

blur

The brightness() function

The brightness() function is used to manipulate the image brightness. It is used to make the image look more or less bright. It adjusts an image’s colours between completely black (zero brightness) and the original image colours (100% brightness). A value of zero will render the image completely black. A value more than 100% will increase the image brightness.

You can also specify the amount of brightness using a number instead of a percentage such that a percentage value of 65%, for example, would be expressed as 0.65 instead.

For example, the following are all valid brightness() values:

brightness(150%);
brightness(0);
brightness(0.7);
brightness(0.01);
brightness(200%);
brightness(10%);

The following image shows the result of applying a 200% brightness to an image:

brightness

The result of applying a 200% brightness to an image.

The contrast() function

The contrast() function adjusts the contrast of the image. That is, it adjusts the difference between the darkest and lightest parts of the image.

The function is similar to the brightness() function in that, just like brightness(), a value of zero will render an image completely black. As the value increases towards 100%, the difference in darkness changes until you see the original image at 100%. Values beyond 100% will increase the difference between light and dark areas even more. If no value is passed to the contrast() function, it defaults to 100% and the image is not changed.

contrast() also takes the same values as brightness(), so the following are all valid examples:

contrast(150%);
contrast(0);
contrast(0.7);
contrast(0.01);
contrast(200%);
contrast(10%);

And the following image shows the result of applying a 200% contrast to an image:

contrast

The result of applying a 200% contrast to an image. (That is one angry cat there! ;))

The grayscale() function

The grayscale() function converts the image into a shade of grey.

The value is also a percentage or a decimal number equivalent to that percentage. However, the percentage values need be between 0 and 100%. Any value greater than 100% will be clamped to 100%. 0% leaves the image unchanged while 100% makes it completely grey. The higher you go from zero to 100% the more the image loses its colours and becomes grey.

The following are all examples of valid greyscale() values:

filter: grayscale(); /* defaults to grayscale(100%) */
filter: grayscale(1); /* same as grayscale(100%) */
filter: grayscale(36%);
filter: grayscale(0.28);

The following image shows the result of applying a 100% grayscale to an image:

grayscale

The result of applying a 100% grayscale to an image.

The hue-rotate() function

The hue-rotate() filter function rotates the colours of an image by an angle that is to be passed to the function as a parameter.

A simpler way to understand this would be to imagine a color wheel. Every color on the color wheel has an angle at which it is positioned. If you start at one point (color) at the circle and then move along the circle by a certain angle, you end up at another point with another color.

What the hue-rotate() function does is it selects each color of the input image, rotates it by the angle value passed to it, and then outputs the image with the input colors replaced with new colors. All the colors in the image are shifted in the same way to produce new colors.

A value of zero renders the image unchanged. The maximum angle of rotation is 360 degrees. If the value for the angle is not provided, it defaults to the value 0deg and the image is not changed.

The following image shows the result of applying a 120deg hue rotation to an image:

hue-rotate

The result of applying a 120deg hue rotation to an image.

The invert() function

The invert() function inverts the colours of an image. It takes a value between 0 and 100% such that the higher you go from zero to 100% the more the image will look inverted. A value of 100% is completely inverted—all the colours are flipped so that the image looks like a photo negative (like the ones generated for old non-digital cameras). Any value over 100% will be clamped back to 100%. A value of 0% leaves the input unchanged.

Note that if you don’t pass a value to the invert() function, it defaults to 100% and the image is completely inverted. And the percentage values can also be represented as decimal numbers as well.

The following are examples of valid invert() values:

invert(); /* equivalent to invert(100%) */
invert(0.24);
invert(60%);

The following image shows the result of inverting an image’s colours completely using a 100% default value:

invert

The result of inverting an image’s colours completely using a 100% default value.

The opacity() function

The opacity() function is similar in functionality to the CSS opacity property. It accepts values between 0 and 1 or its equivalent 100%. 100% means the image or element is fully opaque, and as you go down from 100% to zero, the element becomes more and more translucent until it becomes completely transparent at zero, and then the content on the page that lies behind it—if any—will show through it. Even if you pass in a value greater than 1, the browser will clamp it down to 1/100%. Negative values are not allowed.

The following image shows the result of applying a 0.5 opacity value to an image:

opacity

The result of applying a 120deg hue rotation to an image.

The saturate() function

The saturate() function saturates the colours of the image making it look more vivid. It takes a value between zero and 100% or the value’s equivalent decimal number. A value of 100% leaves the image’s colours unchanged. The value of zero completely desaturates the image while a higher value saturates the image more, and values greater than 100% will super-saturate the image. Negative values are also not allowed.

Saturating images is particularly useful for when the image’s colours are looking dull and you want to give them a more lively appearance.

The following example shows the result of applying a 250% saturation value to an image:

saturation

The result of applying a 250% saturation value to an image.

The sepia() function

Ever heard of “the sepia effect”? You likely have—ißßt’s that effect that gives a vintage appearance to an image. The sepia() function gets its name from the fact that it adjusts an image by giving it a sepia tinge like in old photographs.

Just like previous functions, it takes a value (percentage or decimal) between 0 and 100%. The higher you go from zero the stronger the sepia effect. Values greater than 100% will be clamped to 100%.

The following is the result of applying a 100% sepia tone to an image:

sepia

The result of applying a 100% sepia tone to an image.

The drop-shadow() function

The box-shadow CSS property allows us to apply a box shadow to an element. This means that even if you have a non-rectangular element or a non-rectangular image (like a PNG), the shadow applied to that element is going to be rectangular as if the element is a rectangular box. This, in many scenarios, is an unwanted results.

For example, suppose you have the following PNG image of a star. Since it’s a PNG, it is made up of some fully transparent areas, and the star is the only opaque area. When you want to apply a drop shadow to the image, you’ll likely want to achieve the following result:

drop-shadow

An image with a drop shadow applied.

Using box-shadow, you’d end up with something like this instead:

box-shadow

An image with a box shadow applied.

This looks ugly.

The drop-shadow() filter function allows us to achieve the previous result.

The drop-shadow() function takes a value similar to the value accepted by the box-shadow property, except that the drop-shadow() function’s shadow does not include a spread radius like the box-shadow‘s does, and the inset keyword is also not allowed in the drop-shadow() function. I’ll assume you’re familiar with the values of the box-shadow property. If not, please refer to this entry in the Codrops CSS Reference for a list of possible values and detailed explanation and examples of each.

To apply a drop shadow using drop-shadow(), you pass in the value of the shadow you want and simply apply it to your image. For example:

.png-img {
    filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
}

The url() function

The url() function allows you to use a filter defined in an SVG document and apply it to your element. Instead of using one of the above 10 filters, you can define your own filter in SVG and then apply it to the element by referencing the filter’s ID in the url() function. For example:

/* filter from an external SVG file */
filter: url(myFilters.xml#effect);
/* or filter defined in the main page */
url(#myFilter);

The following is an example of a blur filter defined in SVG:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>

Referencing that filter in CSS and applying it to an element would apply a Gaussian blur filter to that element.

Since SVG filters are a big and wide topic, we won’t be getting into the details of them in this article.

Live Demo!

Because CSS Filters are not supported in all browsers, I showed screenshots of the effects in all of the previous examples. That being said, you can still play with the filter values in the following live demo:

See the Pen 7405c808441c8021bb6bc59baef72441 by Sara Soueidan (@SaraSoueidan) on CodePen.

Just like with CSS blend modes, you can use CSS filters to enhance your pages, so you don’t need to wait for full browser support to start playing with and taking advantage of this cool CSS feature.  

Multiple filters

You can apply multiple filters to an image or element. When you apply multiple filters to an element, the order in which you apply those filters matters and changes the final output of that element. If you apply multiple filters, these filters should be space-separated. For example:

filter: sepia(1) brightness(150%) contrast(0.5);

 

Animating filters

Filters can also be animated, this allows you to create some really creative effects. An example of multiple filters being animated on an image is the following image fading effect by Lucas Bebber:  

See the Pen Pretty Fade by Lucas Bebber (@lbebber) on CodePen.

Lucas’s work is extraordinary, so you might want to check his Codepen profile out for more beautiful experiments that are sure to spark your creativity.. and curiosity.

Order Of Graphical Operations

In addition to blending and filters, an element could also be clipped and/or masked. If you apply more than one graphical operation to an element, the browser needs to decide which operation to apply first, and depending on the order, the end result would be different.

There is one specified order of operations in CSS according to the specification: first any filter effect is applied, then any clipping, masking, blending and compositing.

Inspiration

Not long ago, Dudley Storey created a neat experiment using CSS blend modes and clipping paths to create a 3D Glasses effect.

3d-glasses

Screenshot of Dudley’s 3D Glasses demo using CSS blend modes.

You can check his demo and tutorial out here.

Final Words

CSS Blend Modes and Filters are only two of the features that CSS proves us with to create graphical effects on the web. Other effects also exist that bridge the gap between print design and web design, giving us—web developers and designers—more control and better tools for designing in the browser, without having to resort to graphics editors to achieve such simple—yet powerful and impressive—effects.

If you’d like to learn more about other CSS graphics features, make sure to leave a comment below requesting a followup article.

I hope you found this article useful. Thank you for reading!

Comments (0)
devices

Image source: http://bit.ly/1HmCBQI

The rapid and seemingly endless proliferation of device sizes and form factors can be exhausting! The new landscape means people are coming to the web on a whole range of devices, from tiny smart watch screens to ‘phablets’ that look comically out of scale when making calls.

So what’s a designer to do? The good news is that regardless of the size of the mobile screen, they all have one thing in common. Content! Users are coming to these devices to devour content in their quest to achieve tasks.

A content first approach means designing with and understanding the actual content as early as possible. It honors content as the raw ingredient of any experience.

The risks of content… later

  • The project outputs of templates filled with lorem ipsum may not meet the needs of the client when the content gets poured in.
  • The content ‘breaks’ the design. Text wrapping and awkward layouts are symptoms of this.
  • Clients often underestimate the effort that goes into creating, editing and imputing content, which vastly delays projects. We can help by starting to think about content earlier.

Tips and Tricks for Content First

1. Do a content audit

A content audit is an inventory of existing content on a site. This is especially powerful when undertaking a redesign of a large site, and helps to get the lay of the land. This usually takes the form of a spreadsheet, detailing each page, page title, url and the content type found on the page. You can tailor these fields to suit your purposes.

content audit

Image source: http://bit.ly/1HmCXqF

This is a great opportunity to think about how fresh or relevant content is, and whether some of it might need to be archived. If you don’t have the resources for a full audit, a content sample or partial audit can be hugely helpful.

Once your content audit is complete, you can work to identify what should be kept, repurposed and completely binned. This upfront work is a great way to find gaps and to get you off on the right foot, designing with the content in mind.

2. Use proto-content

Lorem ipsum is a UX designer’s enemy. It is a shape shifting beast, which conveniently expands to fill the desired space. It prevents us from asking the tough questions we need to ask like – what date format will we use? How long will these headlines typically be? What happens if there is drastically less content? Or radically more?

events

Image source: http://bit.ly/1OfvkXa

The alternative is to get as close to the real thing as possible. You could try:

  • Writing copy yourself – approximating what you think the content will be. This is a great opportunity to inform the type and tone of content that will make for the best user experience – especially when dealing with transactional flows, CTAs and instructional copy.
  • Using existing copy. This is a great way to be realistic about lengths of headings, product descriptions and CTAs.
  • Using competitor content – looking at similar sites can be a great way to get a sense of the type of material to expect your design to accommodate.

Be clear that the content provided is for placement only, and to ensure a process is in place for the final design to be populated with actual content.

3. Try your designs out at scale

Best of all is to get it on the relevant device screen. Put your design through its paces and try it out at different screen sizes.

  • Email yourself JPGs and open them on your smartphone.
  • Print out screens to scale and stick them to the device.
  • Tools like LiveView facilitate doing this as you work.
  • Viewport resizers are a quick in-browser way to test. I like ish as it does not focus on specific breakpoints, but rather ranges.

Content first is a great way to move your projects towards better UX that will be a joy to interact with on screens of all sizes!

Comments (0)

It all starts with the paragraph. For those who don’t identify as a designer, developing a typographic system for the web can be intimidating. Jason Pamental, lead UX strategist at Fresh Tilled Soil and author of Responsive Typography, took the stage at FITC Toronto last week to share how to implement beautiful, readable responsive typography from the inside out.

“UX is not paint. It’s not something that can just go across the top,” said Pamental. “It’s something that’s made up of a thousand little details that add up to an emotional connection with the thing with which you’re interacting.”

When developing a typographic system, we start with type because it is “the clothes which words wear.” When it comes down to it, type is often the basis for which you build everything on a website around. How so? From the very beginning, a core principle of responsive design is that content needs to be consumable across all devices. Therefore, you should really be thinking about designing for content first. Given that content is often text based, what you’re really doing on a micro-level is designing from the type outwards.

“We have to narrow our focus. We have to get a little closer to the thing which drives the design and the way we interact with something…really any kind of digital product,” said Pamental. “So a volume of a thousand lines begins with a single <p>.”

Currently with web projects, we’re designing in visual systems. We’re building patterns of objects and code to create consistencies by starting with small objects that can easily be replicated. The question is how can we apply this systematic approach to content like text? The most primitive elements of content are smaller than all the pages of the book or even a full page; it’s the smallest chunk of content – the paragraph.

“We start our journey for building a great typographic system by coming to the very heart,” said Pamental. “Each [paragraph] style is going to have an impact on readability, scan-ability, and flow.”

By dissecting the elements a single paragraph, Pamental shares what you can do to develop a beautiful typographic system that doesn’t require additional markup or special classes.

Paragraph breaks, Widows and Orphans

From the written to the typed word, the style of the paragraph has evolved over centuries into what we commonly see on the web today. Most people are familiar with the simple visual line break which we commonly see as defining a paragraph. This visual cue came about from hitting the double return on a typewriter. In fact, the following CSS does exactly this and it’s often where most people stop when ‘stylizing’ a paragraph:

p{

 margin-bottom: 1em;

}

While sufficient in the most basic sense, this approach does not deal with things like “every editor’s worst nightmare, the orphan,” said Pamental. In a content management system you don’t know how often the content will change and you don’t know how wide the screen is that users are consuming it on. A couple of ways to address widows and orphans is through a JavaScript library such as Widow Tamer or by implementing something on the server side depending on the content management system (Drupal and WordPress offer plugins).

Line-Endings and Hyphenation

Looking further into the paragraph at line-endings, it’s clear that while you can maintain beautiful spacing between words with a left-align waterfall, you can in turn create a whole lot of not-so-pretty gaps on the right hand side which are even more apparent on smaller screens. Pamental recommends a combined approach of a ragged-right (left-align) with hyphenation, noting that even a justified paragraph with hyphenation is a better approach for small screens.

In terms of how hyphenation is handled, Opera and Chrome both have built in support, but with no dictionary. The Hyphenator JavaScript library will handle the rest, but it should be scoped to browsers without built in support which means a bit more work, but better performance.

Drop Caps

There are many ways to achieve a drop cap on the web, but often it requires the insertion of special classes which are not systematic. With a little extra effort, you can implement a drop cap with the following CSS (with conditional HTML classes for older versions of IE) without a single extra class:

p:first-of-type:first-letter.lt-ie9 p:first-letter {

 font-size: 5em;

 font-family: ‘Bluntz W00’;

 font-size: 5em;

 color: 5em;

 line-height: 0.9em;

 float: left;

 padding-right: 0.05em;

 margin-top: -0.125em;

}

The fallback on this is just regular text.

Bold First Line

You can also make your first line of text standout in bold text using the first-line pseudo-selector.

p:first-line {

 font-size: 1.1em;

 font-weight: bold;

}

This will work no matter how many words appear on the first line, which would of course vary based on screen size.

Links

Links are often overlooked in terms of style. Beautiful typefaces are often heavily underlined in a very unattractive manner. One way to solve this is going with a border-bottom, however you’re still limited. Inspired by Medium, Pamental designed a lighter weight line tucked up under the letters with breaks around the descenders. The CSS for this is:

.nicelink {

 font-size: 5em;

 text-shadow: 1px 0 0 #ff, 1px 0 0 #fff,

  -1px 0 0 #fff, -1px 0 0 #fff;

 background-image: linear-gradient (to bottom,

 transparent, rgba(#00194d, 0) 75%,

  rgba(#00194d, 0.85) 75%, transparent));

 background-repeat: repeat-x;

 background-size: 2px 2px;

 background-position: 0 0.8em;

 display: inline;

 word-break: break-word:

}

While this is a more complicated approach, it is accessible and it’s easy to create fallbacks for it if it’s not supported by browsers. There is also a Sass mixin available for retina displays. It’s worth it for the grace and beauty it adds to the reading experience.

Open Type Polish

Open Type features allow you to add a bit of flair to your typefaces; so rather than just having standard italic you can have characters or ligatures that connect lines between say an ‘f’ and an ‘f’ or an ‘s’ and a ‘t’ for that extra polish. This can be added with a line or two of CSS as long as the typeface supports it. The fallback is standard text, so you’re not really losing anything. The CSS (which looks more complicated than it is due to browser prefixing) is:

.otf {

 -moz-font-feature-settings: “dlig=1”,”liga=1”;

 -moz-font-feature-settings: “dlig” 1,”liga” 1;

 -webkit-font-feature-settings: “dlig” 1,”liga” 1;

 -ms-font-feature-settings: “dlig=1”,”liga=1”;

 -o-font-feature-settings: “dlig” 1,”liga” 1;

 font-feature-settings: “dlig” 1,”liga” 1;

}

There is also a mixin for this. Find more code from Jason Pamental on GitHub.

So what is the perfect <p>?

perfect p

View the life of <p> presentation in full here:

View the full deck:


You can find Jason Pamental on GitHub and on Twitter.

Comments (0)

One dozen projects, a whole lot of lessons worth sharing. Nick Van Weerdenberg, CEO of design and development firm rangle.io, took the stage of FITC Toronto last week to share insights on how to stop UX from breaking the agile development process.

One of the main reasons for tackling a project with an agile development approach is because user behavior and needs are impossible to predict from the outset, however it is often treated as waterfall activity. The final UX of a project is the result of the practice of designing the user experience (UXDesign) combined with the practice of developing the user experience (UXDevelopment). The trick to ensuring a great UX is actually balancing and coordinating effort among teams who put their function first (designers prioritize design, developers prioritize development, etc.).

However, one of the problems with the modern UXDesign process is it demands a complete solution upfront for sign off – effectively killing any hope of a truly agile development approach.

Pulling from a dozen projects with various UX, Van Weerdenburg put together a list of lessons learned to avoid breaking agile development which are distilled below:

1. Build close to the conversations around the features

The problem with developing a full spec is it becomes the defacto authority and it replaces conversations once the software is actually being built. Design removed from conversation and validation suffers rapid entropy, resulting in projects being built on assumptions and misconceptions. The solution to this is treating upfront UX as a hypothesis. You should define your UX as the list of core values that your product abides by, not the specific solution.

 

2. Test and Validate

Create experiments which validate the ongoing direction of development. Use testing to close the differences between perception and actual interactions with design artifacts. Find ways to highlight and emphasize the actual user experience.

 

3. Capture core guiding assumptions in style guides and validated lessons learned

Move from prototypes to style guides which capture the structural approach, but do not define the end product completely.

Some resources:

 

4. Don’t fall into a waterfall trap by relying on documents that have no traceability or living context

Great UX is the result of testing and captures validated user experience from delivered, heavily used code.

 

5. Realize UX is both about the user, and the team’s understanding of the user. Neither exists without the other.

Document the validated UX for the team to reference and to have conversations against.

 

Watch the full session below:

View Nick Van Weerdenberg’s full slide deck from FITC Toronto 2015:

Any other tips you’d add to the list? Let us know in the comments.

Comments (0)
Apr
17

Motion in Web Design the Smart Way

Posted by: | Comments (0)

If you’ve been around for a while then you probably remember those corny “site under construction” animations used back in the late ’90s. We all loved those, didn’t we?

Anyway, web design has surely come a long way since then. And so did web animation. Nowadays, it’s no longer corny. More so, it seems that it has finally found its own place among other design mechanisms and tools.

So let’s have a look at how to use animated motion effectively and what place it has in the modern web design space.

The role of motion for modern web

This might sound surprising at first, but when it comes to the core benefits that good motion animation can bring, nothing has changed over the last decade. Mainly because human brains still work more or less the same, regardless of the design trend that’s currently the most popular one.

For instance, it’s been proven that animation helps us get a grasp on what’s happening on the screen and what’s the most important element that we should pay attention to. Why? It’s just how we work. Thousands of years of evolution made us who we are, and made us pay attention to motion. Otherwise, we wouldn’t be able to survive a predator’s attack back when we were living in caves.

So quite interestingly, even in the era of flat design and minimalism, motion still has its place and it indeed can (and should) be used to enrich user experience and make our designs more understandable.

The only thing that has changed is the form in which we should use it effectively. From a technical point of view, good animation in 2015 looks nothing like the animations from the late ’90s or early 2000s.

Many reasons for that, but two in particular:

1. New technology.

With modern CSS and JavaScript libraries we can now create impressive animations through accessible APIs and pre-made frameworks. We also don’t have to understand things on the most basic ground level of coding. What we do need to know instead is how to work inside the interface that the API is providing us with.

For instance, something you might know from the Adobe camp is the Edge Animate environment. Its purpose is to let web designers create interactive HTML motion animations through an easy-to-grasp interface. At the end of the day, it’s the tool that handles the heavy lifting and you can focus on the creative part without worrying what’s under the hood.

But technology is not only about tools, CSS, or JavaScript. It’s also about hardware, and particularly the hardware inside mobile devices.

Let’s face it, mobile devices of today are basically standard computers with great processing power. The only thing that’s different about them is the screen size. Other than that, they can cope with anything.

2. Web design maturity.

Maybe it’s just my impression, but it seems that several years ago webmasters wanted to have animated blocks on their sites just for the sake of it.

Those animations often made navigation harder (physically harder – with elements taking longer to load and so on), and less straightforward (it was difficult to figure out what was clickable and what wasn’t).

These days it’s different. We’re no longer that impressed with animated motion as a standalone thing and we want to see it serve a specific purpose rather than just be there for no reason.

In other words, what’s going on with animation is somewhat similar to the early days of the automobile. When cars first appeared, you could still travel faster by horse (and more reliably). If you had a car back then, you had it for the sake of it, or just to show off. Nowadays, however, the car is mainly a tool for getting a certain job done. Web animation is heading more or less in the same direction.

That being said, we are still somewhere at the beginning of this road and it will take time to get accustomed to the tools, the libraries, and the technical aspects in general. This is something that Steven Snell of Vandelay Design pointed out when asked about the role he sees animated motion taking in the future of web design:

The era of web animation is still in its infancy, but with the introduction of recent HTML5 standards it is already playing a key role in web design. UI and UX designers are leading the way by creating beautifully animated SVG icons and navigation with CSS and JavaScript.

So at the end of the day, the question is how to use motion to put yourself in the right track and make your interfaces more user-friendly, as opposed to just more confusing and flashy. Here are some ideas:

1. Use motion to showcase hierarchy

Most static web designs showcase the layout’s hierarchy by using exclusive colors, big and bold elements and a lot of white space around the most crucial blocks. This is a sound strategy, but we can do so much more with the addition of motion.

It’s been scientifically proven that movement is a lot more noticeable than any other form of presentation. Therefore, there isn’t any better way of conveying some element’s importance than by bringing it to life with movement. For instance, take this example:

motion1

MUSIC App Animation by Sergey Valiukh and Tubik Studio on Behance

It’s clear right away what the most important element on this page is – the app demo. It does a great job of focusing the visitor’s attention right away.

2. Make flat design easier to grasp

As great as flat design is, there are still some serious problems with the concept itself. For instance, even though users who are proficient with how web interfaces work have no trouble interacting with flat sites, those who are a bit less savvy have a lot harder time.

The reason of this confusion is that flat design tends to make various interface elements look very much alike, thus elements such as buttons are not always that straightforward in their appearance compared to everything else.

In this case, animation is one of the few mechanics that can still set things apart and make the interface understandable again.

For example, take a look at these animated icons:

motion2

115 Animated Icons by Hakan Ertan & Sinan Karaçam on Behance

 

The gentle motion, although isn’t anything special in itself, does a great job at grabbing the visitor’s attention and encouraging them to interact with the icon.

3. Be subtle, not flashy

The late ’90s are long gone, thus animation just for the sake of it has no place on the web any more. And since users are no longer impressed with things simply moving about, the core nature of the animation needs to be a bit more subtle.

The gold standard would be to make it just alive enough that it can be easily noticed, but also subtle enough to not overpower the whole design completely.

The value of such an approach is that it makes the visitor less likely to get distracted and focus on the motion itself rather than on the call to action that this motion is trying to pitch.

4. Keep testing on mobile relentlessly

These days, mobile is the main environment for which your design should be optimized.

This can’t be emphasized enough, so let me say it again from a slightly different angle – mobile is now more significant than desktop.

First of all, 60 percent of all web traffic comes from mobile now. Secondly, even Google has just about had it with sites that are not mobile-friendly, so they issued this statement:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.

What this means in plain English is that if your site is not mobile-friendly, your search ranking will suffer. Also, making a site mobile-friendly is often about much more than just making it responsive. That’s something worth keeping in mind not only when designing animations, but when working on your next site in general.

Therefore, rolling out any animation that isn’t mobile-friendly or, even worse, that isn’t accessible on mobile at all is just asking for trouble.

Make it a recurring step in your development process to keep testing your animations on all popular mobile devices.

5. Use animation as your “what-makes-me-unique” element

Let’s stay with flat design for one more minute here. Like was said earlier in this post, many flat designs often look very similar, so making your creation distinguishable becomes quite tough. While you can always search for a creative color scheme or something, you are still limited by the corporate identity and the appearance associated with the brand you’re building the design for.

All of those limitations make motion the perfect tool to make your design unique. Most importantly, you don’t need much to stand out. Consider these examples:

motion4

Dianping Film promotion Html5 / FURY by wang 2mu, He Fan & 3 Water on Behance

Both designs are very simple in nature, and the animations used on them are the only elements that make those sites interesting. If you were to remove those animations, the designs would look rather basic and wouldn’t grab as much attention.

6. Use motion for individual pieces of content

Making a custom website design with the use of motion is one thing, but you can also go for a smaller scale approach and use motion when working on individual pieces of content.

For example, Neil Patel of Quick Sprout has been known for publishing and popularizing the concept of motion infographics. In its core, the idea itself is very straightforward. He creates what would normally be a standard infographic, but then adds animated elements to it. Here’s an example. Another animated infographic.

Doing this can give you an additional edge over the competition and other sites in the same niche, all fighting for the visitor’s attention.

Now, infographics are just one concept. You can also use the same idea when working on standard posts, articles, case studies, or any other piece of content.

7. Try scroll-based motion

Motion is a broad topic and also quite a complex one. For instance, in order for something to be considered in motion, does it actually have to be moving, or does it only need to appear like it is? For instance, parallax scrolling effects and other cases of scroll-triggered animation are great examples here.

The idea is to create the impression of movement by using custom CSS, JavaScript, and HTML. By itself, the design is static, but once the visitor starts scrolling, they can see a depth-of-field illusion or even full-blown moving elements.

Consider these examples. First, simple parallax transition effect. More complex scroll-triggered animation.

8. Use motion for notifications

Animation is most visible when it first pops up on the screen. This makes it a perfect tool to display various kinds of notifications. For instance, whenever there’s something going on in the background of a web interface (e.g. some settings being saved in an online admin panel), you can notify the user that the operation has been completed through an animated box appearing somewhere at the top of the screen. This sensation of unexpected motion in an otherwise static environment is all you need to alert the user.

For example, have a look at the notifications that can be built with this tool.

It’s nothing striking in terms of design, but it does its job well and grabs the user’s attention.

9. Focus on motion quality

Less is more for web animation of today (and likely in the future as well), but you still can’t compromise quality in your pursuit of less.

Even Google is making this very clear with their material design guidelines in regards to working with motion. In the official docs, they encourage designers to make every element’s motion authentic. This means giving it mass and weight, acceleration, and other characteristics that a real-life element would have.

Feel free to go here to see the guidelines along with some demo videos by Google.

Conclusion

Motion wasn’t always the most appreciated tool in web design history, but that is likely to change in 2015 and going forward.

With the technological developments and the overall maturity of the web design world, people are more willing to experiment and try improving their user interfaces with subtle, yet useful moving elements.

On one hand, the days of flashy animation used just for the sake of it are long gone. But on the other, the days of animation that enriches the user experience and makes websites more functional have just begun.

What’s your take here? Have you stumbled upon any creative ways to incorporate motion in web design that are worth pointing out?

Comments (0)

Creating an image carousel (slideshow) using HTML, CSS and Javascript is a challenging task that only advanced web designers and developers can accomplish, right? Wrong! In this Your Questions Answered post, we’ll be walking you through how to build a responsive carousel in Dreamweaver CC using the Bootstrap Carousel Plugin from w3school.com.

Unless you have been living under a rock for the past couple years, you’ve probably heard of the term responsive web design and you likely know what it is. However, in case you’re not sure it’s a technique for building websites that dynamically adapt to any screen or device based on the size, resolution and orientation.

Bootstrap is a HTML, CSS and JS framework for developing responsive, mobile first projects on the web.

Building a Responsive HTML Carousel Using Bootstrap

To get started:

  1. Launch Dreamweaver CC.
  2. Select Site > New Site.
  3. In the dialog box that appears, enter the following information:
    1. Site Name
    2. Local Site Folder: Click the Browse or Folder icon. Navigate to any of your local folders you want to use for this project.
    3. Click Save
  4. Create an image folder under the Site you just created and call it “img”.
  5. Copy your images to this folder.
  6. Select File > New.
  7. Select Blank Page, page type as HTML, and Layout as none.
  8. Save the page as slideshow.html.
  9. Open this page in your web browser.
  10. Copy the contents below Edit This Code.
  11. In Dreamweaver, select the content in Code view and paste the content that you copied.
  12. In the HTML section of the code, edit the <img> tag to read <img src=”img/<nameofimage.jpg>”> For instance, for the first image, I used <img src=”img/img_chania.jpg”>
  13. I have edited the H3 Tag and the P tags to add the relevant captions for the images. You could do that as well.
  14. Select File > Preview in Browser to preview in a browser of your choice.

Resize the browser window. The images and captions in the slideshow should resize to fit the new dimensions of the screen.

Tell me more

If you look in the <head> section of your code, you should see the following:

<meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

What is happening here is that the page is linked to CSS and JS files at remote locations. Dreamweaver gets the contents of these files and displays them for you. Because the files are at a remote location, you cannot edit them in Dreamweaver.

Feel free to click on each of the files to look at the code contained in each of them.

For a list of websites and applications built using Bootstrap, see http://bit.ly/1F1QArx.

Comments (0)

Babusi Nyoni does not identify as a web developer despite the repertoire of work he’s created using Dreamweaver CC which now lives on the web. He’s the art director for all things digital at M&C SAATCHI ABEL, South Africa’s fastest growing agency which is part of the largest independent agency network in the world. His keen eye for design and experience working in web design is likely what drew us to his Behance profile.

“Development is something new that I took up out of curiosity and decided to pursue after discovering I had a talent for it,” said Nyoni.

Some people simply ooze creativity and need an outlet to express it for self-fulfillment. Nyoni built out his skill set to do just that, leveraging several apps from the Creative Cloud to bring his ideas to life. His passion was clear in his answer to our question, ‘what’s your favorite part of the job?’

“It’s the almost-tangible joy of bringing something new into the world as a creator,” said Nyoni. “Sometimes creatives take their ability to make stuff for granted but I’m forever enchanted with the prospect of birthing something unseen and unheard of to the world whenever I set out to create.”

Steve-Chikosi-Website-Home-Demo

We asked Nyoni some questions about one of his featured projects, Steven Chikosi Photography. Chikosi, a talented peer, was looking to refresh the look of his existing blog and didn’t want to use an unoriginal theme, so Nyoni set to work on an original design.

“My greatest challenge was restricting the interface to a blog layout while still keeping it bold and using design elements that the predominantly Zimbabwean audience could relate to,” said Nyoni. “Inasmuch as he’s a photographer, Steve [Chikosi] didn’t want this site to serve as a portfolio.”

Nyoni wanted to communicate to users that Chikosi travels a lot and captures images across a broad subject-matter spectrum. All design restrictions considered, he tapped into the Creative Cloud to make things happen.

“I used Illustrator CC for the website wireframing and design because I find the workspace quite intuitive,” said Nyoni. “It allows me to work on multiple design screens without having to toggle windows or layers to access them.”

Steven Chikosi Website-03

 

Once he had the bold blog design he was going for, Nyoni moved it into Dreamweaver CC to bring it to life with HTML, CSS, JavaScript and PHP for WordPress.

“I used Dreamweaver because of how easy it makes working with dynamically related files be and how it totally understands PHP syntax,” said Nyoni. “Live View also lets me work on the look of the site without having to switch between text-editor and browser.”

In the end, Nyoni created a fully-responsive website with clean white spaces, easy-to-read type, Zimbabwean graphic elements and a canvas to display Chikosi’s diverse photography.

Steven-Chikosi-Website-02

 

In terms of work overall, Nyoni says he’s inspired by a few different people who include:

  1. Sindiso Nyoni:
    “One of South Africa’s most prolific and universally revered illustrators. His work has never lost its African roots regardless of the subject matter.”
  1. Hello Monday:
    “Their web work continues to push technological boundaries yet retaining pleasing aesthetics and a good user experience.”
  1. Kanye West:
    “Through him I learned to not allow people to confine talent based on what they expect or prefer.”

Check out Babusi Nyoni on Behance.

Comments (0)

The hamburger menu. Three lines of navigation goodness, but does it share the cheesy, greasy qualities of its likeness? We asked some experts to weigh in on the chatter we’ve heard on the web to get to the bottom of whether or not you should or shouldn’t implement a hamburger menu in your next project.


Linn Vizard, User Experience Designer, Usability Matters

Linn

As is so often the case in UX (and in life!) the answer is: it depends. Increasing ubiquity of the hamburger menu is a symptom of UX design adapting to multi-platform, responsive, device agnostic environments. Some key considerations include: audience, goals and context.

–    Audience: some research suggests that users under 44 years old are more likely to understand this as navigation. Who is going to be using the interface?

–    Goals: what is the interface trying to achieve? Is navigation a key pathway to meeting those goals? Hiding menus on secondary screens can reduce discoverability of and engagement with those options.

–    Context: In a native mobile app context, tabbed bar menus may be more appropriate and could increase engagement. On a large screen view of a responsive site, it may make more sense to surface navigation, as screen real estate is at less of a premium.

Great UX design is always contextual and considers the many factors that make up the experience. Putting some thought to these considerations will assist with decision making.


Jake Rocheleau, Freelance Writer & UI Designer

jrocheleau

I support hamburger menus when used properly. Some designers feel averse to sliding hamburger menus because the links are hidden off-screen and seem more difficult to locate. But a lot of native iOS/Android mobile applications use these hamburger menus, so people are becoming more familiar with how they function. Responsive websites can benefit greatly from these sliding menus if they’re implemented properly and behave consistently throughout the whole site.


Sandyha Talwalker, Senior Experience Designer, Adobe

sandhya

Facebook’s old iPhone app and the Path app popularized the hamburger icon.  Unfortunately what a few big names do becomes the ‘trend’. The more I see it, it’s just a dumping ground for miscellaneous items. If something doesn’t deserve to have a place in your app then maybe it shouldn’t be there at all. It’s important to figure out what the primary, secondary and tertiary functions of the app are. I’d say keep primary functions visible and accessible. Secondary function’s maybe a tap away but don’t detract from the primary. As far as tertiary functions are considered maybe find a way to write them out of the app or figure out if they are absolutely necessary. I think it all boils out to content prioritization and strategy which in turn keeps the app focused and light. Also, research from the Nielson Group  states that icons like the hamburger icon still require labels for clarification.


Jerry Cao, UX Content Strategist, UXPin

JERRY CAO

The hamburger menu makes sense on mobile, but not so much on desktop when responsive versions exist. For example, it’s not really necessary on a site like this.

If a desktop site doesn’t have a mobile version (or responsive breakpoints), the hamburger menu can be a nice backup navigation if the page loads on a tablet since it’s easier to tap than a text link. But that’s becoming less necessary in today’s age of responsive everything.

I don’t think the hamburger menu will disappear though, just because so many users are already used to it (and it’s fairly minimalistic and sleek, which falls in line with current design trends).


So, what do you think? Weigh in below with your comments!

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.