The February edition of what’s new for web designers and developers includes new web apps, frameworks, jQuery plugins, icons, productivity tools, responsive design resources, and some really great new fonts.
Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.
As always, if we’ve missed something you think should have been included, please let us know in the comments.
And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.
Osmosis
Osmosis is a simple app for managing your client questionnaires in a way that makes it easier to interact with your clients and gather the information you need from them. It’s made to fit into your workflow while still being easy to use for your clients.
MockVault
MockVault is a web app for getting approval from clients for your designs. It guides them through the design you’ve created, making it easier for them to review and approve.
Trajectory
Trajectory is a new app for managing software projects. It makes it easy to write user stories, track bugs and to-dos, while also facilitating discussion.
The Responsinator
The Responsinator lets you test any live website for responsiveness on a variety of mobile devices, including tablets and e-readers. All you have to do is enter a URL.
Font Awesome
Font Awesome is an icon font designed specifically for use with Twitter Bootstrap. It includes over 150 icons, is free for commercial use, offers infinite scalability, and is screen reader compatible.
TOC
Need a table of contents for your website? TOC is a jQuery plugin that does just that. It’s completely customizable, automatically highlights the current section, and is extremely lightweight.
Simple Green
SimpleGreen is an icon pack for sustainable businesses. The free version includes 48 environment and social icons, while the paid version includes 200 icons.
Codiqa
Codiqa is a tool for rapidly creating mobile app prototypes. It’s drag-and-drop jQuery interface makes it quick and easy to build what you need, and it also includes tools for sharing those prototypes.
Iubenda
Iubenda lets you quickly and easily generate a privacy policy for your website. Just add services, insert the owner, embed the policy, and show the result.
Curtain.js
Curtain.js is a plugin for creating a web page with multiple fixed panels that unroll with a curtain-rising effect. Navigation is done via keyboard, scrollbar, or your mousewheel.
Wonderflux
Wonderflux is a new free WordPress theme framework that lets you rapidly create WP themes. It’s licensed under the GPLv2, so you can use it on unlimited client, personal, and commercial sites.
Centratissimo
Centratissimo is an all-centered, auto-resizable layout. It includes smooth scrolling between pages and dynamic resizing, along with some other neat features, all done with jQuery.
Turn.js
Turn.js is a jQuery plugin for creating page-turning transitions with HTML5. It uses hardware acceleration, works on tablets and smartphones, is lightweight (only 6K), and is easy to manipulate.
jQuery Org Chart
jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use.
bgStretcher II
bgStretcher is a jQuery plugin for adding a full-page background image that proportionally resizes to fill the entire window area. It’s unobtrusive and simple to setup, and works with all modern browsers.
Hogan.js
Hogan.js is a JavaScript templating engine developed by Twitter. It’s only 2.5K, and was developed against the mustache test suite (so all the specs for that hold true for Hogan.js).
Entypo
Entypo is a set of more than a hundred pictograms, available as an OpenType font, a web font, and vector EPS. It’s Creative Commons Attribution-Share Alike licensed, so you can use it on personal and commercial projects.
Prefix Free
Prefix Free processes your code to add the current browser’s prefix to any CSS code, so you can use only un-prefixed CSS properties in your code. It works in IE9+, Opera 10+, Firefox 3.5+, Safari 4+, and Chrome.
Zoomooz
Zoomooz is a jQuery plugin for making any element on your website zoomable. It’s supported by all modern browsers and has detailed settings options.
Underscore.js
Underscore.js is a utility-belt library for JavaScript that gives you a lot of the functional support you’d expect from Ruby or Prototype.js without extending any of the built-in JavaScript objects. It provides over sixty functions that support the usual functional suspects, including map, select, invoke, as well as more specialized ones.
Socialico
Socialico is a set of 74 social media icons, combined with a single weight font. Lowercase letters show the icons in a circle, while the capital letters of the same alphabet show the icons without the circle.
Warm Framework
The Warp Framework provides a set of tools for developing cross-platform themes. It currently supports Joomla and WordPress, and can be extended to work with other systems. It makes it possible to create themes that are easily portable between supported systems while retaining all features.
Glisse.js
Glisse.js is a responsive and customizable jQuery photo viewer. Transitions between images are entirely assumed by CSS3.
Collusion
Collusion is a Firefox add-on that lets you see all the third parties that are tracking your movements online. In real time, it shows how that data creates a spiderweb of interaction.
Cyfe
Cyfe is an all-in-one business dashboard that lets you see an overview of your entire business in real time. View data from Google Analytics, Salesforce, AdSense, MailChimp, Amazon, Facebook, WordPress, Zendesk, Twitter, and more from a single location!
jQuery HTML5 Placeholder Plugin
This jQuery HTML5 Placeholder Plugin adds cross-browser support for the HTML5 placeholder attribute functionality via jQuery. It has a couple of customization options and usage is very straightforward.
FanMix
FanMix is a “social inbox” that lets you manage all of your conversations online from a single inbox, just like email. Probably the most useful feature is the ability to search across your entire social history.
Adobe Photoshop Lightroom 4
Lightroom 4 was just released and includes some great new features. It includes new adjustment controls to maximize dynamic range from cameras, as well as new and improved auto adjustments. The upgrade is $79, while the full version is $149.
Geared (name your price)
Geared is a distressed slab serif typeface with a style reminiscent of athletic t-shirts. It comes with four unique weights: thin, regular, bold, and extrabold.
Abraham Lincoln (name your price)
Abraham Lincoln has perhaps the best tagline of any typeface: “Tall. Skinny. Honest.” It was inspired by the proportions of its namesake and the advertisements and playbills of the 1800s.
Sedgwick Co (free)
Sedgwick Co is an uppercase slab serif typeface inspired by the city of Wichita, KS. It’s both classic and modern, and reminscent of western-style fonts.
Web Serveroff (free)
Web Serveroff is a modern, condensed sans serif typeface. It comes in both regular and italic styles.
Kommisar ($16.25)
Kommisar is loosely based on the Trajan capital in Rome and influenced by Father Edward Catich, an American sign painter and lettering artist. It’s contemporary, but with a decidedly antiquarian look.
Yeti ($5)
Yeti is a display typeface, hand-drawn with a hint of calligraphy. It supports multiple languages and even comes with some graphics and web icons.
Intro (free)
Intro is a free geometric font from FontFabric. The letterforms are mostly created based on simple geometric shapes — triangles, circles, and squares.
Written exclusively for WDD by Cameron Chapman.
Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!
Designing for responsive websites can be a bit challenging at first because the process is so different.
As designers, we’ve gotten used to building pixel-perfect mockups as our web blueprints. But responsive design takes a different approach.
A designer’s role is no longer to produce a mockup and then pass it off to the developer because responsive design is not just a two step process, it is a series of revisions. Most of which are made in the browser. It is a collaborative effort between the designer and developer, no longer two separate tasks.
Here are some tips and a general workflow to make the transition from designing static sites to designing responsive ones a little easier.
Knowing your viewports
Before starting any project it is important to determine your viewports. A typical approach would be to build one layout for smartphones, one for tablets and smaller viewports, a larger desktop version, and maybe a second desktop version for even larger/wider screens, say 1200 or 1400 pixels or more.
Planning ahead
Sketching can be your best friend. Take one piece of paper and make 3-4 boxes to represent each viewport. Having all of your viewports on one page helps you to not focus on any one design more than the others. When laying out your design, take the most important content first and add it to each of the viewports, working your way down to the less important stuff as you go.
You will quickly realize that not all of the content may fit in the smaller viewports. Better to find that out now while doing sketches, instead of trying to make changes to a finished design.
Yup, those are my actual scribbles. You might not be able to make out what each element is but those are from an actual project. I did the design and development so I didn’t have to make it clear for anyone else. The point being, nothing is faster than pen and paper for quickly jotting down layout ideas.
Wireframes and mockups
The most important part of wireframing, is having the developer take an active role. He or she should know right away if your idea is going to work or not and can give suggestions on ways to get your vision across without having to reinvent the wheel.
With responsive design you can no longer spend 90% of your design time before the development begins. So mockups need to be quick and rough. Also, be open to changes because chances are your original ideas may not work exactly as planned.
The browser
Because of the large amount of testing involved, responsive design is best done as a process of revisions in the browser. As soon as a basic layout is agreed upon it is best to begin the development right away. Having your layouts viewable from a browser helps prevent a lot of design problems.
Another thing to consider as a designer is what elements of your design can be created with CSS alone. Many devises today are able to display drop-shadows, gradients, borders, rounded corners and other design elements created with CSS. CSS only elements are easier to change, takes less design time to create, and don’t require images or image slices to implement. Of course if you are not developing the site yourself you will need to be able to communicate your layout ideas with the developer.
Taking it into Photoshop
I highly recommend using one .psd for all the layouts. Here is a quick example using 1200 pixels as the largest viewport. So start with a new .psd at 1200 pixels wide by 2000 pixels tall. The other viewports will be 480, 1020, and 768 pixels wide.
To start, unlock your background layer and duplicate it for as many viewports as you need plus one. Fill in the original background layer black and leave the rest white. Put each white background layer in a folder and name it for its viewport (example: “480”).
Next set up each viewport in the .psd. Remember you only need to do this one time and just reuse the template for all of your projects.
First add guides at the edges of each viewport. (View -> New Guide and select “Vertical”). Add guides at 90, 216, 360, 840, and 1110 pixels.
Next create Layer Masks on each folder, which will form the edges of each viewport. Use the Rectangular Marquee Tool to select the area inside the center two guides (480 pixels).
Having Snap checked (View -> Snap) makes this a lot easier. With the selection made and the correct folder selected in the Layers Pallet, click the Add Layer Mask Button to apply it. Do the same step for the other viewports.
Now to see a given viewport simply turn off the other folders. I also included a photo of the Layers Pallet if you wanted to see what that should look like.
Mockups
If you already have a rough site developed, take a screenshot at each viewport and add those into your .psd in the correct folder.
Generally it is easier to start with the smallest viewport and work your way up to the larger ones in Photoshop. So flesh out your 480 pixel design, then duplicate the layers and drop them into the 768 pixel folder.
There is no need to be pixel perfect with any of your layouts. I tend to get one viewport looking correct but for the rest I only change the elements that are truly different in each. Don’t worry about getting the margins around text blocks perfect. Really just ignore text as much as you can because Photoshop cannot render it the way it will appear in the browser, and most of the text design will be done with CSS.
Understand how content changes
When thinking about the design you need to understand how the layout will be altered as it changes from one viewport to another. You also need to consider what happens if a layout is slightly smaller or larger than the viewport you are designing for.
There are a few options for allowing your content to adapt to each layout. Each element can be fixed, hidden, floated (left or right), liquid, or they can scale. Any give responsive design will use a combination of all of these.
Floating elements are most commonly seen in content areas that sit side-by-side in large layouts, but stack on top of each other in smaller viewports. As the viewport begins to get smaller and each element is floated left, the elements on the right side will begin stacking below the elements on the left side.
Liquid content adapts best to changing viewports but can become awkward if used on large viewports. Liquid content is typically used for columns of text that scale as wide as the viewport allows. They work great on smaller viewports but can become too wide on larger ones, so it can be best to switch to fixed for those.
Similar to liquid, scaling elements are given a percentage size and scale as small or wide as the viewport allows. These are different in that it can apply to images and text sizes. These elements are given a percent width and/or height and adjust to the viewport.
Fixed is the most rigid way of laying out content. If you have a piece of content that you don’t want it to scale or change size in any way, it will be fixed. The best thing to do with fixed elements is design them to fit the smallest viewport. It is a lot easier to use a small elements in a large viewport over trying to fit a huge element in a small viewport.
When you want to remove an element or just don’t have room for it you can hide it. Hidden elements will not be seen by the user but will still be downloaded. So if you are using large images but hiding them from mobile users, the page will still take the same amount of time to load whether the images are visible or not.
Remember that you can and should use a combination of all of these on the same element. That means a text box will be fluid in one viewport, fixed and floating left in another, and may be hidden in a third.
Designers are not being forgotten
Because so much of a layout can be created with CSS it may feel like your role as a designer has diminished. Really, your role has just changed. Web design for too long has been about designing the interface while neglecting the content.
The layout is still important but the developer can do much of it. The designer should focus on making sure the goals of the website are met. Spend the most time on strengthening the conversion process, emphasising important content, and making it more palatable and digestible.
To be perfectly honest, I tried looking for some good examples of this in responsive design, but really couldn’t come up with any good examples.
Graphical elements and images
There are some special considerations to make when dealing with images in responsive design. The safest approach is to make images that fit the smallest viewport. This way you keep the file size down and have images that will work in each viewport size.
Here is an example images that can easily be displayed in multiple viewports from Orestis.nl.
Large background images can be particularly problematic when scaled down for smart phone use. If you plan on using them make sure to do it in a way that keeps file sizes and load times to a minimum.
Consistency
One of the biggest problems with responsive design is the lack of consistency. Users may have trouble navigating your site on a tablet when they are used to their desktop design.
Make sure to use the same color scheme on every layout and keep at least one consistent element throughout. The logo being the easiest element to transition through all. Always make navigation clearly marked and easily found. If you have to remove elements from smaller viewport designs, have other methods of getting to that content.
Don’t reinvent the wheel
When you are designing a static website you can have a lot of freedom but in responsive design there are more things to account for. Use a method that works and spend your time making that look great. If people can make email templates look awesome you can do the same with a responsive design, it just takes a little creativity.
Tyler Herman is a web designer and blogger. You can follow him on Twitter @couchable where he serves up design and web business related news and articles worth taking a look at. Or at his blog Couchable.
What do you think is the most difficult thing to keep in mind when designing a responsive site as opposed to separate mobile and static sites? Let us know in the comments!
Learn to identify and use the golden rectangle to create harmony in web design projects.
The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites. Although the exact origins of the formula and shape are not known, examples of its use can be found through history – Egyptians used the shape in the design of the great pyramids and Greeks used it for the Parthenon (note the shape below).
Print designers have been using the concept for newspaper and magazine design for more than 100 years and the basis for many websites starts with the divine proportion. But is this a “magic” formula and does it have a place in today’s web design toolbox?
Identification
The divine proportion goes by a handful of names that all refer to the same rectangular shape. Golden rectangle, golden ratio, mean ratio and Phi all refer to the shape that is considered the most pleasing and harmonious to the eye.
The golden rectangle is defined by a shape that has a proportion of 1.618; this is sometimes referred to as the magic number. Although the mathematical equation is quite precise, the use of this theory for design is not. Many opt to round numbers to two decimals and whole numbers to make creating the formula less complex.
But the golden rectangle is used for more than just an overall aesthetic. The shape can be found in navigation bars, the shapes of photographs and in the grouping of parts on a page. Because the shape is so common, many designers create golden rectangles throughout their work without even knowing it.
Perhaps one of the most famous examples of the golden rectangle appears as a Leonardo Da Vinci’s “Vitruvian Man” drawing, which was first published in “De Divina Proportione.” Parts of the shape, in particular the spiral, can also be found in nature; this shape is exemplified by the shell of the nautilus.
Create
To get this shape for your website, measure the width of your available content area and divide that by 1.618. The resulting number would be the width of your content area and the remaining with would be the space you use for the site’s sidebar.
Using a little math, you can create a simple golden ratio outline for your website. Start with your content area. (We will use 1,024 pixels, the width for most laptop and flat-screen monitors.)
1,024 px/1.618 = 632.88 px (which we will round to 633 px)
This number, 633 pixels, will be the width of the main content area.1,024 px – 633 px = 391 px
This number, 391 pixels, is the width for the sidebar.The perfect golden rectangle maintains the aspect ratio of the original square and adds the extra with to it. So the optimal height in this formula would also be 1,024 pixels.
You can also use an online calculator to figure this equation. Golden Ratio Calculator is a good tool that allows you to enter a width and get an instant calculation that breaks a width into a golden rectangle, such as the 1,024 pixels we used above. Further it uses that number as the width of the larger portion of the golden rectangle and provides the width of the small section and overall shape.
Uses
Twitter, which launched a redesign late in 2011, used the golden rectangle for the outline of its site. The feed and sidebar combined mirror the golden rectangle. The use of the magic formula was quite intentional according to Doug Bowman, the site’s creative director, in a post on Flickr: “We didn’t leave those ratios to chance. This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.”
It’s Numbered uses the idea of the golden ratio to pair images and text. The idea of the golden rectangle can be used for more than just the overall site design; it can also be used to group items within the site outline.
MmDesign uses the principle of the golden rectangle for the dominant image on its site. Not only is the image striking, it has the perfect harmonic shape. The golden rectangle is not just for site design but can be used to create balanced parts throughout a site.
Pros and cons
Using the golden rectangle will not ensure that your site design works. There are a host of other factors that contribute to a successful design. The formula, though, can help you create harmony and balance and provide a basis for how to formulate a design concept. Many beautifully designed sites do not use this principle, but you are likely to find examples of the golden rectangle within the site structure. Photos, text blocks and sidebars can also showcase this “perfect” shape.
Use the golden rectangle in projects where you want to create a feeling of natural balance and harmony. The structure created by using the shape is naturally pleasing and mimics some of the most well-known images of all time and even nature. Without knowing it, visitors to your site will feel comfortable with the look you have created.
But not all designers agree with the concept. Trying to design around a mathematical formula can be complicated, time consuming and won’t guarantee a nice site layout.
Analysis
Using the theory of the divine proportion is not for everyone. I think using the theory can get all-consuming when planning a site outline. Moreover because of the depth of each web page, it is almost impossible to maintain the true ratio and then you get stuck trying to fit a golden rectangle above the scroll or stacking multiple golden rectangles in the page design. (Neither option is very efficient.)
When designing with the golden rectangle in mind, try to not get too caught up in the numbers (although some math purists will disagree). Go for the basic shape and idea but don’t force it on your design. Play with variations as well. Create a golden rectangle and forget using the perfect height. (This can work for creating a sidebar for the full depth of your site.) Use the golden rectangle for the shape of images throughout your site or for colored frames.
The golden rectangle works best in web design when used for parts of the site rather than the whole. The shape will help you create beautifully arranged groups of images or text blocks of mirroring size. It can also be used to pair photos without that overly symmetric look. (Size one photo, then size the other using the 1.618 proportion and pair them side by side.)
Look at the grouping of multiple images on the Irving & Co page. The landing page features six images. The group uses the outline of the golden rectangle, but the photos are cropped and put together in an interesting way. The shape is not mathematically perfect, but creates a sense of balance and harmony that goes hand-in-hand with the principles of the formula. When using the golden rectangle, plan your design to mirror the shape but not fit into perfectly, pre-shaped boxes. Look past the numbers and think about the overall effect.
I like the classical feel of pages that employ the principle of the golden triangle. Nothing tops a good feel when you land on a new site. Using this theory, you can create that feel and sense of balance using a time-tested theory. But as with any design concept, use the golden rectangle in moderation. Too many perfect shapes stacked on top of each other can end up looking flat, repetitious and uninviting.
Previous:
Animated Content Tabs with CSS3
Business.txt es una de esas iniciativas que son interesantes por su utilidad y simplicidad. La idea, de manera muy resumida, es la de utilizar un pequeño archivo de texto, fácil de editar con cualquier editor o procesador de texto, que contenga la información respectiva al negocio.
Este archivo se colocaría en la raíz de nuestro dominio, lugar que históricamente utilizamos para mostrar otros archivos como robots.txt, o bien humans.txt. Obviamente los datos contenidos en este archivo estarían estandarizados, permitiendo que cualquier bot o araña de buscador encuentre fácilmente la información vinculada a un negocio, por ejemplo podemos obtener de este documento: ubicación, teléfono, cuenta de Twitter, Facebook, etc.Ejemplo de business.txt
Name: RJ Grunts Categories: American Restaurant, Bar Street: 2056 North Lincoln Park W (at Dickens Ave.) Zip: 60614 City: Chicago State: Illinois Country: United States Coordinates: 41.92012, -87.63645 Phone: (1) 773-929-5363 Open: Mon-Fri 11.30am-12am, Sat 10am-12am, Sun 10am-9pm Website: http://www.rjgruntschicago.com/Por el momento business.txt es solo una idea, una propuesta interesante, y que ira evolucionando con el pasar de los días. Conceptualmente me parece una solución simple a un problema generalizado, un pequeño archivo que ayudaría considerablemente a muchos proyectos a obtener más información sobre un negocio sin la necesidad de que el propietario del mismo vaya completando perfiles en distintos sitios sociales.
Veremos que ocurre. El ultimo proyecto similar que recuerdo fue humans.txt que no tuvo demasiada aceptación, una lastima.
Web: Business.txt ~ Imagen cortesía de: ElegantePress
Webfont embedding is so widely supported by modern browsers at this point that there's really no excuse not to incorporate them when appropriate in your
I really believe that an important issue that deserves our attention when developing a website is its navigation. From well developed buttons, menus, layouts and schemes you can get your viewers attention or loose it, so here are a few good examples of navigations to inspire you.
Blending Ads into your Website Layout
Advertising is the age-old medium which has been transformed via the Internet. Ads can be served on websites in different ways than TV or radio shows. Google
Read these tips and strategies that will help you rank better in the recent Google Panda search engine algorithm update.
Crear un efecto de “cargar página” o “loading” en jquery mientras se van cargando todos los elementos de la página web es realmente sencillo gracias a la función load() de jQuery.
A continuación un ejemplo que puedes customizar el css a tu gusto de mil formas.
1º. Creamos damos estilos al div que aparecerá primero por encima del resto (con posición absoluta en css) hasta que se cargen ya todos los elementos del documento, que es cuando este div ya desaparecera.
#cargando {
position:absolute;
width:100%;
height:100%;
background:#fff url(imagenes/loading.gif) no-repeat center;
}2º. Insertamos en script dentro del “head” de nuestro documento:
$(window).load(function () {
// Una vez se cargue al completo la página desaparecerá el div "cargando"
$('#cargando').hide();
});Y por último, insertamos el div con id “cargando” al principio o final del “body” de nuestra página web:
<body>
<div id="cargando">Cargando...</div>Y aquí ya va todo el contenido (divs, imagenes, etc...) de tu pagina...
</body>Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación puedes hacer un cargador de página mucho más original (Puedes crear diferentes imagenes de loading en http://www.ajaxload.info/).
Si tengo tiempo ya os pondré algunos ejemplos diferentes de cargadores utilizando este simple script como base.
About the author
Soy de León, y me encanta todo lo relacionado con el desarrollo web. Jorge Maiden
Dark versus light design has been a long and controversial topic since almost… forever. You probably have read many articles about this matter and you probably have found contradictory facts among them. The truth is that there are no certainties whether you should use a light or dark design on your new layout. However, there are indeed strong indicators that may tell you which version you should be using to provide the majority of your visitors with a better experience.
Since I’m going to give you a personal opinion on how you should build your dark layout, it makes sense for me to first see if you should or should not indeed adopt a dark version for your website.
Dark vs Light background
There are three crucial indicators that should make your life easier when deciding if you should or should not design a dark layout. Most of them are pretty much common sense and should only take a few minutes to analyse.
1) Subject
Are you going to sell clothes? Is it a blog about weddings? Or a vacation planning site? As you may know, color and contrast are associated to feelings and that’s why a very dark gray background may not be suitable on a website that sells vacation plans to the best beaches during the summer.
2) User
Now you should ask yourself:
- Who is going to visit your website more often
- What type of person
- Social level
- Age
This question is not only useful for the type of contrast and colors you should use on your website or application, it also defines the majority of other question marks like style, minimalism and typography. You may realize that a person in his late 50′s may prefer a light background color, not due to readability (you’ll understand why in the next topic) but maybe because that person is used to visiting light background websites. It’s all about what they do, what they are used to and what they like.
3) Purpose
Will it be a store? Just a blog? Someone’s portfolio? A photo gallery? Always remember that every website has a purpose. If you’re going to sell a product to which you need to emphasize colors (this obviously depends on the type of product) a dark background would suit that purpose better than a light background, however if you’re going to have a news portal with plenty of content, a light background may suit your needs better.
Does the use of dark background really affect readability?
There are contradictory studies and scientific research so all I can give you is my personal opinion which is no, a dark background does not affect readability.
You may be wondering “What are all those sites and articles talking about when authors say dark backgrounds really affects readability? They even give examples!” To answer your question, readability is affected by the use of wrong text color, wrong line-height, kerning and font size, not by the use of a dark background. In the end it’s all about typography and the elements you use, not the background itself. It’s obvious that you just can’t compare a paragraph of text with a line-height set to 0.5 in a light and dark background – you always need to adjust the element you are using to the surrounding background.
I’ll give you tips on how to design a dark layout focusing on elements, I won’t tell you if you should use a #000 or #111 color for your background – that’s irrelevant. I’m going to tell you how you should use and design the elements on your dark background. Again, is all about how you use the elements.
So let’s get started.
White Space
If you have read some of my articles, you know I always touch on this key topic. White-space is there to help in almost every design related topic.
As I said above, you need to suit every element to the condition they are in. In the case of dark layouts, you can actually focus better on each element which gives you the feeling that elements are closer than they really are leading to a cluttering sensation.This is why you need to use white-space effectively. Readability is also favored with more white-space.
Avoid cluttering more than ever
Consequently related to the white-space topic above, cluttering is something to avoid when you’re using a dark background. Remember that a dark design is more sensitive to content spacing so what may sound enough on a light background may not be the case on a dark one. If you have low to medium content you always need to make efficient use of white-space, however, if you have too much content you should consider separating it through subpages/sections or changing to a light background.
Typography
Typography is the most sensitive element in any design but especially while using a dark background. It clearly needs to be carefully planned otherwise you will see more and more articles stating that dark backgrounds are bad for readability.
In order to improve readability, the first thing you can do is increase font-size, line-height, kerning and write in small paragraphs. You may have noticed that all these text options are still related to white-space. Having this said, your second concern should be with the font itself. Should you use sans-serif or serif fonts? Serif fonts are not clean which makes it harder to read with small sizes. This means you should use serif fonts for bigger sizes like titles and sans-serif fonts for small text like paragraphs.
Contrast
I could have written about contrast on the Typography topic above, however, what applies to typography also applies to every other element on your page except for imagery.
So you wake up and you suddenly look up to the sky with a very bright sun-light… you know the feeling right? The same applies to the contrast use on your screen. Using pure white text on pure black background (or vice-versa) will somehow be unpleasant to your eyes. The first basic rule is to never use pure-white/black on the opposite color. Using #ddd for your text and #111 will be more preferable than #fff text color on #000 background.
Content emphasis
One big advantage while using a dark background is the ability to easily apply emphasis on a desired element like text or image. That’s because in a darker background the focus will be completely transferred to the main elements. You also have more ways to do it than in a regular light background. You could achieve great emphasis using reflections and different blending modes for vivid colors or gradients which are possibilities that would be very difficult or almost impossible to get with a light background.
Background elements
If you’re going to use a dark background, one thing you can do is to make use of background images, textures or patterns. On most cases, images/textures and light backgrounds don’t make a perfect match. Nevertheless, be sure to avoid making your background distracting, focus needs to be on the content.
Conclusion
I believe that everything should be used according to the surrounding elements, so a dark background can have real benefits over light backgrounds when the elements are properly adjusted to it. Some people prefer reading and using light backgrounds and others not so much, as I said there are no certainties so all you can do is to check competition, make some research on your end-user and conclude which option is the best for your business.
Good luck!
The <meta> tag also known as meta data provides additional information about your web page, for example, keywords, author information, language type, description and much more. The <meta> tag is also used to embed information about your web page that most search engines use to index and categorize your web page. The information within the <meta> tags may be used by servers and browsers as well.
Read More ››
Desde que Google anuncio que la velocidad de carga de un sitio web iba a influir positivamente/ negativamente en el posicionamiento web, muchos usuarios nos
En los últimos años he visto como muchas webs han ido cambiando (según las modas, los estándares, lo que ha mejorado el lenguaje web, etc.) y he visto en
With bounce rate and time-on-site assumed to be the top trump cards in Google's new algorithm; there is most certainly a push from Google — and subsequently
MERCADOTECNIA PUBLICIDAD | Revista Merca2.0
The HTML5-based, jQuery-powered A-Z solution for building modern web applications. All you need for your client-side development.
Ante la pregunta: ¿Por qué quiere un sitio web para su pequeña empresa?, usted responderá que un gran objetivo es conseguir...
Let's make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010.
So you learned the base id, class, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.
(Continue)
This entry is part 2 of 16 in the CSS3 Mastery Session
Hace ya tiempo varias personas me pidieron un tutorial para hacer un diseño web a 3 columnas, me di cuenta que hace mucho mucho que no uso 3 columnas y despues de pensar e informarme he decidido crear este artículo.
Las webs de antes
Con antes me refiero a antes de ponerse de moda las 16:9, cuando las pantallas eran todas de 4:3 se llegó a un momento que la gran mayoría de webs contaban con 3 columnas y una cabecera.
Estas normalmente eran: un menú vertical (izquierda, por la L visual), el contenido (grande y en el centro), extras (zona de la derecha con todo aquello que quieres destacar, calendarios, botones importantes, etc).
Era algo lógico cuando tu pantalla prácticamente ¡Era un cuadrado!.En que camino estan evolucionando las pantallas
Como todo en este mundo las pantallas estan evolucionando y mucho en su aspecto cada vez son más horizontales (y lo seguirán siendo) ya que está comprobado que cuanto más horizontal es más se está pareciendo a como vemos los humanos con lo cual decimos que vemos algo mejor en un una 16:9 que 4:3, tampoco veo necesario profundizar mucho más en este aspecto con esto es suficiente para lo que vamos a ver hoy.
¿Y ahora que?
Si las pantallas son más anchas que antes, la vista en esta se torna más horizontal con lo cual una web vertical (entre otras cosas, cuantas más columnas más verticalidad) es más incómoda de ver que una horizontal.
Con lo cual vamos a intentar que nuestro diseño de la sensación de horizontalidad.
Pero.. ¿Y en los móviles?
Hay gente que a veces me comenta: los móviles cada vez son más altos que anchos, es un gran error pensar eso, cada vez son de una resolución más ancha, ¿Que móvil moderno no permite girar su pantalla? Películas, fotos, etc. Aunque he de decir que para los móviles es mejor crear una versión móvil de la web y que el 90% de las veces las webs cuadran con la pantalla en vertical si el móvil es medianamente bueno (y su navegador).
Un diseño cómodo y lógico
Después de hablar sobre todos estos conceptos que yo creo básicos os voy a comentar como, para mi, es un diseño cómodo y lógico en la actualidad.
1.- Estaría bien comenzar por una cabecera compuesta por el logo a la izquierda y una imagen/frase/titulo a su derecha.
2.- Debajo de esta cabecera a mi me parece que queda bien el menú principal con pocas opciones y que destaquen, puedes ponerle un menú desplegable o un submenú (preferiblemente horizontales) con las demás opciones que faltan.
3.- El cuerpo (content) de la web:
Aquí es donde vienen las columnas, vosotros sois los que tenéis que decidir cuantas columnas vais a necesitar, os voy a comentar las diferentes posibilidades.
- Con más de 3 columnas: Sinceramente después de todo lo que he escrito no puedo decir más que: no lo recomiendo, en mi opinión no hay que usar esta opción.
- Diseños a 3 columnas:
Como ya he dicho no me parece lo más recomendable aunque hay dos casos, poco comunes que si podríamos usarlo. El primero serían webs con poco contenido central y muchos widgets y demás (por favor no hagas una web así gracias). El otro caso que se me ocurre es una web que quiera ser muy ancha dejando de lado anchos inferiores a unos 800-1024 px ya que ese tipo de resoluciones verían todo el contenido central muy apretado, para gustos los colores, eso si aunque tengamos una pantalla muy ancha si le pones muchas columnas va a seguir dando sensación de verticalidad ya que el contenido de cada columna se lee por separado.
- Con 2 columnas:
A mi parecer el más actual, el más utilizado y cómodo de ver.
La columna ‘grande’ la del contenido en sí a la izquierda y la derecha más estrecha una columna que puede ir bien para widgets de redes sociales, calendarios, capas para subscribirte, etc…
¿Pero no digo siempre que la L visual la encontramos a la izquierda?
Pues si de hecho es lógico ponerlo así ya que se subscribirán o te seguirán por las redes sociales después de saber de que es tu web y no antes.- 1 Sola columna:
Lo he utilizado en contadas veces pero también se puede utilizar para gente que no quiere nada de redes sociales o widgets en general, también es útil para mostrar textos extensos o documentos online.
4.- Footer de tu web:
Es quizá la parte a la que la gente da menos importancia normalmente, ya que está ahí abajo, escondida del resto y es al último sitio que llegas.
Hace ya un tiempo me di cuenta que lo que hay que hacer con esas cosas en contra que vemos en esta parte es girarlas, dando importáncia al footer con elementos que destaquen mucho y no en pequeño como enlaces o más widgets (sin abusar) con esto consigues que la gente al pasar rápido por el footer como siempre ya que se esperan 4 frases que en cierto modo no tienen mucha importancia, encontrarán cosas vistosas y de cierta importancia cosa que hará que quizá se fijen un poco más en aquello que has decidido poner y tu no pierdes nada.5.- barra inferior al footer (muy opcional):
Está compuesta por una línea de texto donde puedes poner cuando se ha hecho, quien es el dueño, los derechos de la web etc..
Espero que este artículo os haya servido y como siempre podéis sugerir más en los comentarios o en mi twitter o facebook.
Developing emphasis in web design can be tricky in that it all depends on what you want to accomplish with it. For the most part, whatever the product is, is what will be our focal point and in most cases it's not the picture of the product but how to get the product that becomes the focal point - the call to action.
Un interesante artículo publicado en Mashable nos invita a reflexionar sobre cómo, las redes sociales son relevantes en el posicionamiento Web. Sí,
Full responsive web design review: a new trend in web design. Good practices, pros and contras, great examples and tons of useful tools and articles.
Don't worry, we won't post anything.
4
51
