Web And Design Trends | Bypeople

premiumpacks

Web And Design Trends

The Internet, as an important part of emerging technology, keeps changing and evolving, depending on the major direction that people are pursuing. Therefore, we have decided to create this complete trend guide to show what’s going on, what’s on the table and what is definitely setting the direction to follow in everything related to graphic and web design and development, which by the way, are getting way closer to each other each passing day.

As the fields of Web design and web development increasingly intertwine, the need to use concepts that can be understood by both designers and developers becomes crucial. That’s why we want to help foster the growth of a new generation of web ninjas with this article-gift prior to our launching. Take this as a reminder of our commitment to fresh, quality and stunning content.

Be on the top-spot of responsiveness, embrace the latest practices

Responsiveness is the trend, the norm, the north and the right path to follow. If you are still confused about this concept, you can take a peek at A List Apart’s review by Ethan Marcotte. Thereafter you can take a look to Brad Frost‘s great resources showcase: This is responsive

It has become imperative to adapt the layout of every website to every new device and its respective resolution. Anyone who dares to dispute that fact or even assert an opposite view is going in an absolute wrong way… But wait, is it actually the wrong way?

Not as wrong as you would think.  It didn’t matter how strong Achilles was, his heel was always his weak point.  And so responsive web design, the modern day hero of the Internet, has its own flaw.

Of course, it’s still not perfect yet, it can sacrifices information in favor of layout, it is not yet adaptive enough, and is built on a foundation of standards that are not as adequately responsive as the end goal is supposed to be.

This is why it is important for us to take a look into the future, at some areas of opportunity, in other words, to the emerging evolution of responsive web design.

The raising brand new web rockstar: RESS

As we get immersed in Responsive web design development, we find many weaknesses that focus our efforts right there  as we try to minimize or completely solve these issues. Of all problem solving approaches for responsive design,  RESS  stands out.  RESS is the result of a acronym merger between Responsive Web Design and Server Side.  RESS is intended to enhance web performance by combining client side and server side powers.
“The idea behind it is that we combine responsive web design techniques and server side techniques to serve an optimal experience for each device. This means that we will serve slightly different requests to some devices for a given URL, but we still use responsive techniques for whatever ends up on those devices.” Anders M. Andersen – .net Magazine

Such a concept was introduced in September 2011 by Luke Wroblewski, as he was making some bare implementations of this technique. It is thought to improve the way the layout of a website is displayed in different devices, as well as its performance and usability.

Let’s take a deeper insight into this. First off, let’s explain the basic flow of one RESS implementation: we begin  gathering  as much info as possible about the device (sizes, features, etc.), then we get the proper markup in the server: “this could be a drop down menu for a mobile site and a horizontal menu for bigger sizes or images with the proper size and with proper methods.” When the markup specially generated to match the device is sent, we use media queries and other responsive design techniques to ensure that this markup will be adequate to what we are aiming at. In short, server-side markup will create the content we will show and responsive design techniques will determine how it will be shown. This sounds easy, but it actually requires a lot of good planning and coding; doing this the right way is the right choice. RESS source code can be found in Github, and you can get started with this cool guide.

Smarter RWD: Top-notch tips and techniques

We can’t ignore that currently responsive design is becoming more complex due to the rapid and continuous development of technology, especially in the mobile arena. It’s practically impossible to test and design for all devices. Simplicity slowly starts to be accepted as the reigning rule. We’re not just talking about visual simplicity, but also a simpler UX, simpler coding and simpler layouts. This phenomenon stimulates a trend of giving more importance to content (the focus in this part of the guide) which is finally the core of every site. Here we will disclose those tips and techniques that would become trending about RWD and will define the next step of its evolution.
“Make things as simple as possible, but not simpler.” Albert Einstein

Responsiveness will be all about typography

Typography and font handling have become increasingly important in web design because of their versatile nature, and so it’s quite logical (not wrong at all) to think that typography will be the trendsetter in responsive design. In fact typography is being more important than ever as it’s undoubtedly effective at increasing site performance and highlighting content. One of the obvious benefits of focusing on typography is the gain of simplicity since CSS has introduced the use of custom and web fonts. Now web designers have more elements to create stunning designs. They  should analyze the behavior of a typography as the layout responds to the different resolutions, in addition to take into account the regular rules of proper typography. Some considerations to keep in mind here are:
  • Remember, fonts are resizable by the end user.
  • Fonts may behave quite weirdly at different resolutions, so it’s useful to consider different font-faces.
  • Fonts should always keep a good readable structure.
  • There must always be a balance between content and design. In other words, typography must be a core part of design.
Content is always important and typography is the best way to convey a message, so assigning a great relevance to its handling in different responsiveness scenarios will provide more strength to the content on-screen.

Responsiveness will focus on standing out content

As a matter of fact, the world of web design got stunned and challenged by the sudden trend of mobile device browsing. The 2000’s decade was characterized by a beautiful and dynamic (not always usable enough) Internet. One of the main reasons of responsive design is to adapt this tendency of prettiness to a more usable stage. It’s not uncommon, however,  to see a prevalence of design over content, and the goal of any site, which is to convey a message, just ends underachieved in the midst of this dazzle. That’s why, as a way of recovering the essence of web, we have to focus on responsiveness without losing the sense of beauty. A first step for this approach should be establishing priorities: which is the most important content to display regardless the resolution? What about foreground advertisers? Which images are actually illustrating the content and which ones are merely decorative? Taking these aspects into account is the key to concede more relevance to contents when designing layouts with small resolution. In these cases a more accurate structure should be planned, avoiding the simplistic and common practice of indiscriminately piling columns up when resizing, relegating important contents to the bottom part of the scheme. Now that we have understood the importance of prioritizing, let’s introduce a concept which may become a strong reference for this purpose. Based on this concept we can find a first comprehensive approach called Content Choreography, posted by Trent Walton. The goal is to rearrange the layout after establishing the content’s hierarchy and relocating it in strategic positions, depending on the output size. It can be easily done with media queries and the use of the awesome, yet elusive, CSS3 Flexible Box Layout Module well explained in a post written by Chris Coyier.
.some-class {
 display: box // or should we use flex? or the weird flexbox?;
 display: -moz-box;
 display: -webkit-box;
}
After this article, using display: box seems to be the most supported syntax, but that should change soon since the latest approved and actually more intuitive syntax is display:flex (we’re still waiting for you on this, Firefox 18!). Warning: neither of these notations will work in IE (surprise!). Before we continue to the next point, we can review what Jordan Moore wrote about this great implementation of responsiveness  in a simple but well explained article. Traditional responsiveness layout vs. Content Choreography This face-off shows on top a regular Responsive implementation, as the content is transposed once the resolution changes just taking into account its original order. On bottom, Content Choreography implementation which may arrange the content to pile it up depending on the relevance instead of the original order. Here, a practical example to describe this behavior. Another really interesting view has been introduced by Karen McGrane. In her talk, Adapting ourselves to Adaptive content, McGrane exposes the idea that web designers and developers should stop thinking in order to create bunches of layouts to be adapted to any possible device, but start creating reusable contents, hence this content will start to be more flexible, and may save lots of money as new contents could be replaced by already made ones. Finally, all these concepts bring as a result an interesting definition about layout design, which puts the web in the road to device-agnosticism: refrain from designing for all screen resolutions, just design instead for any resolution.

Responsiveness will not care about resolution

Responsiveness needs independence since the goal is to be as versatile as possible and device agnostic. The thing that gradually needs to be accepted is that any design must be ready to fit any screen, instead of every existing screen. It’s not cheap to make multiple assets of a specific graphic in order to fit several resolutions. If you want to adapt to anything, from a small mobile screen to high definition displays, a vector approach is the answer. SVG images could be a nice solution, as the format allows vectors to be displayed in browsers with all the advantages this brings, like theoretical infinite resizing without showing significant aliasing; however, it’s not yet fully supported and may take really long to load which diminishes performance. At the time being it may be better to use this solution with some moderation. On the other hand we have font icons, which are widely supported. There are a lot of related resources out there which could be included on any project and even customized. Because the relevant issue here is resolution, we need to test in the maximum amount of devices possible, and in order to do that more efficiently Viljami Salminen introduced a great tool called Remote Preview, a JS based tool which allows to load a URL in many devices at the same time, becoming a great timesaver on responsive design processes when adjusting layouts to every viewport.

Responsiveness shouldn’t care about devices either

Responsiveness is something more than just how a set of containers will look across several existing resolutions and orientations. It should be focused on displaying content properly in any device, any browser and any circumstance.To do this is not necessary to fill your design with stunning effects and flourishing motion streams. You just need a little planning and executed design. The term Mobile Web is commonly used to describe layouts for portable devices such as tablets, video game consoles and mobile phones. However these layouts don’t include anything different than HTML, CSS, in some cases JS. Hence the web remains the same one regardless the device where it is displayed. This is why Jeremy Keith wrote a vast article regarding this topic, claiming that there is no mobile web. In addition, a more efficient process of web engineering should rely on new technologies, although being in the cutting edge shouldn’t be a must. This is when HTML5, which has been already on stage for a while, starts taking some importance for creating a cleaner web which can be  device and circumstances agnostic. Some features of HTML5, should help a lot to achieve this goal. For instance, creating standard based fallbacks for those moments when everything fails will prevent displaying an ugly website; although it won’t display all the effects and features, it will still be usable. In this sense, Christian Heilman has a set of very strong arguments in favor of HTML5, as he states in “Keep calm and trust HTML5”, a really useful slideshow if you prefer to have a more efficient website, rather than just applying an excess of latest and not well proven techniques that will only work in a reduced number of browsers.

Smart imaging for a more graphic web avoiding performance loss

The Web is becoming more and more demanding and one of its requirements is the need to make all elements responsive and focused mainly to the contents. This is why a concept like Smart Imaging becomes strong. Next, we’re reviewing in depth the new techniques that improve this.

Bitmap perfect vectorization. A very first step to pixel extinction

The limitations of bitmaps and vector images are well known, and these limitations have a huge impact in responsive web design. On responsiveness sake, it would be really nice to work with vector images. However, they represent a huge sacrifice in performance and are strictly limited to basic shapes. Nevertheless, two British professors, John Patterson and Philip Willis, are claiming that the pixel will pass away within few years. The basis of their claim is a codec they developed which transforms bitmaps into vector images. Even photos and video! Their work is named VPI, which stands for Vectorized Photographic Images, and VSV (Vectorized Streaming Video). It consists of perfect conversions of image/video bitmaps into vectors. As we can see in the comparison below, when zooming in both images, the vectorized photo has better quality than the bitmap. vpi-vector-codec Comparison of qualities between bitmap (left) and vectorized photo (right). Click to enlarge. Source – Extremetech Although it may sound really awesome, it has a big but: the performance is too slow as the codec is still too heavy. However, it seems to be a nice approach to solve the recurrent issue of having awful images when zooming in or increasing size of bitmaps, and that would help a lot on responsive designing processes.

The future of responsive imaging is here with JPEG2000 and WebP

One of the toughest headaches when handling raster images in responsive design is the eternal quest for reducing the ratio between quality and low file size. We all know they are inversely proportional to each other. This situation has caused developers and designers around the world to design, propose and implement many solutions, but no one has been universally or even widely accepted due to the fact that many times some of those tend to go very unbalanced. David Bushell introduces to us the possibility of extending the support for SVG format, which now works for icons, shapes and simple images but not that much for raster images such as photos and complex patterns. Other choice might be the creation of a new adaptive friendly image format for which we don’t need to wait too much. There are currently some alternatives. We will talk briefly about the advantages of JPEG2000 and WebP formats. Let’s start with JPEG2000, developed in 2000 (oh, yeah! way long ago) by the Joint Photographic Experts Group, same developers of the well known JPEG format, trying to improve the compression of images. Among the features of this improved format we can find:
  • The compression may be either lossless or lossy, against the sole lossless compression of standard JPEG.
  • The ability to display an image at a different size and resolution from the same image file.
  • The result of the compression is an image clearer than standard JPEG, avoiding the disgusting blurry and blocky characteristic look.
These features would simply make the web design rock, as the loss of quality would stop concerning designers and developers. A similar solution is currently being developed as an open project by Google. It’s the WebP format, a lossy compression format which is intended to take the place of the beloved JPEG. WebP is currently supported by Chrome and Opera and native image editing software support includes Pixelmator and ImageMagick, while Photoshop and GIMP have available WebP plugins. WebP is supposed to have a higher compression rate than .jpg format, which could be adjustable when necessary, preserving quality and they’re planning to include alpha channel support to handle transparencies. The format hasn’t had a warm welcome from professionals, specially from photographers who state that the compression method makes the images more blurry and in some cases the color goes wrong as some information is lost. As we can see, the future is here. Browser developers will realize -sooner than later- the importance of giving support to these raising solutions in function of the evolution of responsiveness. WEBP_TEST How the WebP compression looks (left) and its low size, against a raw PNG (right).

Let’s get back to today, with these nice hacks for the meantime

An important fact here is that image responsiveness has been focused on size, on looking nice in every device. Now with the appearance of HiDPI devices (carrying the ‘Retina’ moniker on Apple HiDPI products), the obvious result is that competitors attempt to create similar or better technologies and many designers may start thinking that the paradigm should focus, as Ben Frain tells us, on hyper high resolution imaging.

That’s kind of true, nonetheless it has a huge “but” and it’s a well known one: the bigger the resolution, the heavier the image and the lower the performance.

In the race to develop the web in favor of Hi-quality, vectorial and lightweight images, the .SVG format plays a fundamental role as web browsers are gradually supporting it. The challenge would consist on how to make these vector images responsive, as shown in Joshua Sortino’s blog earlier this year.

Dan Denney uses SVG instead of PNG for certain illustrations, even those with a great level of detail, with great results on HiDPI devices. A really interesting study performed by Daan Jobsis at netviles blog shows a comparison between small images with low JPEG compression against huge images with high compression. The result is beautiful looking images with really similar file sizes. In fact, in the case of huge images, sometimes their size in kb was even lower than smaller ones, which is fantastic when displayed in brand new devices with HiDPI technologies without sacrificing performance. Now, is it really necessary to keep creating those huge images? Are the owners of these devices always going to have super broadband connections able to display those images as quick as a finger snap? Are most of viewers set to wait enough time for those images to load? The answer for all those questions would have a common denominator and it is a huge NO! The average web surfers have average devices; for example the raw competition among mobile OS keeps placing Android on top, and its version 2.3.x, Gingerbread is still the most used, so it may illustrate how pointless would be to standardize these HiDPI practices. The concept of adaptive images, by Matt Wilcox, could be saving the day out there as it optimizes not just the dimensions, but the actual size of the image file, enhancing the user experience without losing layout responsiveness and keeping also the aesthetic identity of the site. Finally, let’s put on the table one really interesting practice, a project by Adam Bradley from CDNConnect entitled Focal Point. Its underlying goal is to crop and slightly resize an image using only CSS, all while keeping the focus, and subsequently the point of interest on the foreground of the picture. This contrasts with most practices today, where images are merely shrunk down, often losing context. A few benefits of this technique include that it works from only a small set of CSS, requires no JavaScript, and content editors are in control of how images crop using CSS classnames. This nice practice illustrates our point: along the design process, content placement is becoming more important and needs to be as balanced as possible with layout, and we would predict that this will start to be the rule in a not too distant future.

Time for Ad-apting to the responsive stream

The beneficial relationship between media and advertising has always been absolutely undeniable, and whether you like it or not, this relationship must remain solid and strong as both business models depend on each other to succeed and be profitable. That profitability might have been affected with the arrival of responsive design as many advertising content just gets displaced, downplayed or simply disappears in the midst of the run for designing a nice looking layout when resized. If you were the one paying the advertising place, wouldn’t you like to see your foreground ad (normally banner) going downwards or simply disappearing when the screen becomes smaller. That’s not what you have paid for, huh? It’s a fact that a banner displayed at the very bottom of the site will have a really low CTR. Advertising should also be adapted to responsive design. At this point, a significant problem may appear; how to make responsive advertising stand out without losing the grip on content which is after all the focus of any campaign. Some solutions have be proposed, although not widely implemented. For example, Mark Boulton suggests on his blog to change the concept of selling single ad spaces at a determined place of the site, for selling packages of ads including one different solution for each designed layout, depending on resolution. Another interesting view is presented by Josh Clark, who suggests a model called Snap Banners, consisting in a fixed banner at the bottom, after a bit of scrolling the banner scrolls with the content and places itself at certain point; if the viewer decides to tap it, a full-screen content will be displayed. On the other hand, Trent Walton’s suggests to change the way ads are created by making the text in HTML independent from the images, thus, making each banner adaptable to different layouts. Josh Clark has another model in which the banner on the bottom moves upwards at a certain scrolling point and lets the user roll it over to see its full content. Clark's responsive advertising solution Josh Clark model; at certain point of scrolling the banner on bottom moves upwards and lets the user to roll it over to see its full content. These solutions don’t look bad at all and are indeed really good temporary implementations until a fully responsive answer to this becomes widespread… and we may actually predict which one is that going to be. What about adapting not only the banner size but adapting its position and orientation too? And what if when resizing, the banner it just not only scale, but becomes a simpler, less detailed and effective version of the ad that looks great on any small resolution? This is the approach by Responsive Ads, called Stretch, which introduces this concept and illustrates several scenarios where this technique could be implemented. We can highlight the principal advantages of this solution; the very content of the advertisement is given more importance as the banners are not simply changing their size but are adapting the ad’s text to the resolution and orientation of the display. Stretch - A responsive advertising implementation Different examples of how Stretch, by Responsive Ads are smartly adapted to screen depending on resolution of device. The problem of hiding foreground advertising would be gone too, as the placement of banners will vary depending on the resolution. So, when displaying the web on mobile, the impression rate of the ad will remain the same than on a widescreen resolution; the click rate will improve and so will do the CTR. This could probably mark the path of reconciliation between advertising and beautiful web design.

Convey the message in a more clever way:  eMail responsiveness sneak peek

Let’s not forget that, despite all the shine of today’s web trends, the one thing that started the revolution in communications was the E-mail. E-mail has played an absolutely important role, so it shouldn’t be taken apart from the responsiveness stream. That’s exactly what we are going to talk about right here. In this case, responsive emailing is supposed to improve the relationship between marketing and the mean of web communication par excellence, as it is intended to cause some impact in the receiver and, of course, to reach most devices with access to the web. Out there the topic is already being discussed both from the design point of view and from the marketing standpoint. Many things come into analysis and away from the usual challenge of having many devices. It’s not as easy as just considering multiple browser support. Since the early years of public Internet, there are eMail clients, and with the wide use of mobile devices, the number of these assistants is really big; the first obstacle here is to find some kind of universal support. We must consider which is the best way to reach mobile surfers. Here we can check out at Jakob Nielsen, who states that responsive design of Newsletters comes to be a central component of usability as users may simply ignore the content of an eMail if it’s not fitting and looking good on those small screens. Not to comply with the mobile experience would reduce the actual target of the newsletter, and also its impact. Take a minute to check out this impressive guide made by Campaign Monitor, which includes all tricks and tips to take into account when designing responsively for eMail. And, of course, there is also Zurb’s great set of templates for eMail responsive design.

Basics may still be the answer: Improving RWD classics

It’s not the end (yet) for desktop devices, formerly known as PC’s and laptops. Do you remember those? I’m actually kidding. I’m using one right now and the odds are you are also using one to read this at this very moment. The amount of people surfing the web from non-mobile devices is still considerable if you check the Nielsen Stats. RW designers should keep this clear, clear enough.

This is why a clean 960px grid still rocks (give a chance to 1200px too)

Studies reveal as a matter of fact,  that many users are switching to even wider screens and higher resolutions, so designing in yet old 960px grid is a good choice, but have in mind that 1200px grid layouts can become more popular. 16:9 aspect ratio screens are becoming a trend instead of the 4:3 ones, this will make in the long run absolutely worth to take advantage of that leftover space. More users prefer widescreen resolutions Statistics show how 1024×768 resolution (4:3) has been decreasing its popularity, contrasting with the  1366×768 resolution (16:9) that has been more popular. Of course the idea of the 1200px grid is not new at all, but it’s not widely implemented due to the common belief that 4:3 resolutions are still the main rule referring to big screen devices such as PC’s and their portable variations. There are nice tools like Boilerplate which allows the creation of content from the 1200px grid, but can be customized to start from 960px or any width. Another one is Percentage based CSS grid system, which dynamically adjusts responsive content starting from a 1200px layout, and it turns out to be a nice approach. Hence, if you’re having huge expectations and want to take advantage of a widescreen resolution, think outside the 4:3 box, and get used to this idea because it will become trendy for sure.

Web and native apps career – Performance against responsiveness

As the Internet is continuously changing, the way of surfing it is changing too. The old times of static and merely informative websites are history; people have made the Internet a part of their lives. Internet functions as an assistant, as a partner, and almost as a friend. All this is a consequence of the proliferation of devices that connect to the web. Each one has its own way to take advantage of the information and the interactive possibilities offered. Hence, the need of applications focused on specific tasks built for each device became natural and rapidly widespread, and manufacturers took advantage from this to raise the popularity of their products by grouping them in marketplaces. Basically that’s the origin of native mobile apps. On the other hand, the revolutionary responsiveness evolved due to the need of making the web friendly to mobile devices. The goal is making sites look and feel good in small resolutions, although in some cases, even when the content is rearranged to be visible on those displays, it may not be well enough as usability and user experience gets downplayed, and this is when web mobile apps come to play their role. Native and web apps have quite similar goals, and that’s why there are applications with native and web versions, as we can see in the comparison below between Twitter native and mobile apps: Twittercomparison Twitter mobile native app (left) and mobile web app in Dolphin browser (right) Moreover, the performance of a web application depends a lot on its design process. Good planning will result on a responsive, fast, beautiful and complete application. Thereby, it becomes easier to achieve this ideal scenario of creating an efficient app if we have powerful tools to do so, and to this regard, Google developer Addy Osmani suggests a comprehensive guide to the use of Chrome DevTools  Timeline and Profiles which help developers to find weaknesses on apps performance, making these applications run much smoother. An interesting view which justifies the creation and use of web apps has been presented by Simurai in a short speech for a conference, which was titled Flexible Web Apps, and established the difference between web sites and web apps and the utility of using flexbox to accelerate and improve the web app development process.

CSS has to be your best friend, why not glancing at its future?

In the beginning everything was dark, then the advanced techniques of styling appeared and everything was… just a bit clearer. They still had a lot of limitations, as layouts were designed using tables that produced rigid designs that wasted tons of precious minutes of machine rendering. Afterwards the concept and approach of floating layouts took the stage and everything was better as it became the cornerstone of what we know today as responsive layouts. It finally made possible to place several columns alongside, handling those easier and reducing a lot the HTML lines to use. Nonetheless, light is not clear enough at this point and new concepts need to be introduced to solve limitations like the lack of a center property for float and some difficulties with containment and column height handling, among some others. Well guess what? We’re going to check possible solutions to these issues and the upcoming new stuff on the horizon.

Font module is bringing on cool solutions

Typography has been evolving alongside the web, and new features have been added in order to render nicely these features in web pages. For instance, open type fonts are well known for including ligatures between determined characters, however this feature is only available for now in applications like Adobe’s CS5-6 Illustrator, Indesign and Photoshop. Here’s an interesting hack which enables this feature on most used browsers, as a shortcut solution while browsers adapt to these features. By enabling font-feature-settings property with ‘liga’ value. (And assigning the appropriate prefixes for browser support), browser will enable those ligatures in the selected font. Code would look like this:
h1 {
 font-feature-settings: 'liga';
}
In addition, there are some other ways to use different language characters with specific fonts besides adding font icons; the use of the unicode-range property. By setting a determined range, special characters could be displayed in the desired font and also, unicode tables have specific slots to allow font designers to add special non-standard glyphs.

Layout is becoming more organic

Nowadays the Internet is all about adapting to everything: adapting to devices, resolutions, user preferences, languages, handicaps, time zones, use, abuse, sluggishness, light speed performances, coding and designing constraints, etc. However, as the web is not linear at all, it needs to start adapting to the pure essence of nature; the web needs be organic. The following implementations are still in larval stage and should be kept out from the reach of squared minded folks. Advertences apart, let’s introduce CSS Exclusions and CSS Regions.

Exclusions: wrapping and flowing organic shapes

This implementation allows text to flow inside or wrap around organic and irregular shapes. Exclusions are a first approach to the design process of organic layouts, as it happens in printed magazines, giving a strong element for text layout, specially useful when we want to integrate all the elements inside our design, instead of just having elements, i.e. images, that may well illustrate the idea shown in our text, but at design level looks to be really apart from the remaining layout. This idea presented by Adobe, looks for a complimentary relationship between irregular shapes and text alignment. CSS Exclusions in action CSS Exclusions in action – as seen on Chrome Canary Bird in CSS Exclusions A bird shape depicted using CSS Exclusions – as seen in Chrome Canary

Regions: destroying linear concepts of text layout

Complementing the previous concept, Adobe’s crew has been working in other great concept for text layout purposes called Regions. They allow a block of text, semantically marked up, to flow into elements (boxes). Regions review First, we can see a block of marked up text, second the delimited regions where the text will flow and finally how the text flows into these regions. The following video shows an extract from a Google dev SXSW lightning talk in early 2012, where the technique is demonstrated. SXSW lightning talk, a brief show about CSS regions by Paul Irish (starts at 1:50:57s) This amazing implementation, still in development stage, will change the way the web is being designed. Round elements, organic and irregular shapes will have more importance and use, and even though both, exclusions and regions, are not a significant advance in responsiveness sake, they will become trendy as they will be adding more design elements to web design.

CSS and HTML Preprocessors

One of the easiest ways of coding HTML and CSS is with a shortcut. Shortcuts? Oh, yeah, that’s the role that Preprocessors play, as they use a slightly or sometimes completely different syntax to the original language. Check with us these great preprocessors which and get into the amazing world of shortcuts.

HAML – A father for markup languages

HAML is a lightweight markup language which describes XHTML by following some basic principles for its implementation, hence HAML scripting has to be beautiful, well indented and the resulting XHTML structure should be clear enough. HAML produced the development of SASS, so it’s common and accurate to say that HAML is to HTML what SASS is to CSS. Originally for use with ruby, HAML also has a PHP implementation.
/* HAML */
!!! 5
%html{lang: 'en'}
 %head
 %title Hello World
 %body
 %h2 Hello World, this is HAML
/* HTML Compiled */
 <!DOCTYPE html>
 <html lang = 'en'>
 <head>
 <title>Hello World</title>
 </head>
 <body>
 <h2>Hello World, this is HAML</h2>
 </body>
 </html>

SASS – Simpler CSS for the win

Inspired in HAML syntax, SASS is a meta language created to work more efficiently with CSS by using some features such as, variables, nesting, mix ins and selector inheritance. SASS counts with two different syntaxes: the indented syntax, the older one, replaces many elements such as semicolons and braces for indented lines. The newer one is SCSS, whose syntax is quite similar to regular CSS implementations, uses all the elements omitted by the first approach. Both have advantages over each other. The indented syntax doesn’t have many colons, semicolons and braces, its readability is increased, and it looks to be more understandable by humans by using indenting to separate blocks. It comes to be less abstract and also looks more concise over its newer implementations.
/* Indented SASS */
#main
color: blue
font-size: 0.3em
a
 font:
 weight: bold
 family: serif
 &:hover
 background-color: #eee
/* Sassy SASS (SCSS) */
#main
 color: blue;
 font-size: 0.3em;
 a {
 font: {
 weight: bold;
 family: serif;
 }
 &:hover {
 background-color: #eee;
 }
}
The Sassy CSS syntax. That’s what SCSS stands for. It’s a fresh option that’s really close to raw CSS syntax. It uses braces to separate script blocks, which allows creating better inline documentation and being more expressive.
/* style.css */
#fixed-header {
 font-size: 15px;
 background-color: #ffaa00;
 width: 80%;
 height: 15px;
 padding: 4px 1px;
 z-index: 99;
 font-family: 'open-sans';
}
#fixed-header ul li {
 float: left;
 margin-right: 8px;
}
#fixed-header ul li a {
 text-decoration: none;
 color: #bbb;
}
#fixed-header ul li.skip-header a {
 background-color: #000;
 color: #fafafa;
 padding: 3px 3px;
}
/* style.scss */
#fixed-header {
 font-size: 15px;
 background-color: $fixedHeaderBg;
 width: 80%;
 height: 15px;
 padding: 4px 1px;
 z-index: 99;
 font-family: 'open sans';
 ul li {
 float: left;
 margin-right: 8px;
 a {
 text-decoration: none;
 color: $fixedHeaderText;
 }
 &.skip-header {
 a {
 background-color: $fixedHeaderText;
 color: $fixedHeaderBg;
 padding: 3px 3px;
 }
 }
 }
}

LESS – Double sided CSS improver

Less is a dynamic stylesheet language and an extension for CSS which works similarly to SASS. However, it’s able to work either in client and server sides, providing variables, nesting, mixins, operations, and functions. It can also be compiled using PHP as an alternative to the JS compiler.
/* LESS */
#header {
 h2 {
 font-size: 21px;
 font-weight: bold;
 }
 p { 
 font-size: 15px;
 a { 
 text-decoration: none;
 &:hover { 
 border-width: 3px 
 }
 }
 }
}
/* Compiled CSS */
#header h2 {
 font-size: 21px;
 font-weight: bold;
}
#header p {
 text-decoration: none;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 3px;
}

STYLUS – Taking minimalism to code

Similarly to the indented syntax of SASS, Stylus simplifies the code by making the use of colons, semicolons and braces optional.
/* Stylus */
border-radius()
 -webkit-border-radius arguments
 -moz-border-radius arguments
 border-radius arguments
body
 font 15px Tahoma, sans-serif
a.button
 border-radius(7px)
/* Compiled CSS */
body {
 font: 15px Tahoma, sans-serif;
}
a.button {
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}

HAMLET – A simple and romantic helper for HTML

This is defined as a templating language for XHTML. It supposedly simplifies the code by avoiding the rule of closing tags and having sets of tags for structures like conditionals, loops and maybes.
/* Hamlet */
$doctype 5
<html>
 <head>
 <title>#{pageTitle} - My Site
 <link rel=stylesheet href=@{Stylesheet}>
 <body>
 <h2 .page-title>#{pageTitle}
 <p>Take a look to this list:
 $if null elements
 <p>There are no elements to show.
 $else
 <ul>
 $forall Element type cost <- elements
 <li>#{type} (#{cost} dollars)
 <footer>{copyright}

MORECSS – A really, really semantic option

Here’s one more syntax option for CSS. It’s able to run whether in client side and server side. Numbers are written in words, which theoretically makes the code easier for human reading, but harder when coding (and many might find it pointless, by the way) and many of its variables and parameters should be introduced in British English.
/* MoreCSS */
#header colour: cmyk(one-hundred-and-eight, eighteen, zero, forty-five) !unimportant;
#header width: twenty-five-and-three-quarters percent !unimportant;
#header h3 span background-attachment: scroll !unimportant;
#header h3 span background-colour: spot(PANTONE one-hundred-and-twenty-four C) !unimportant;
#header h3 span background-image: none !unimportant;
#header h3 span background-repeat: repeat !unimportant;
#header h3 span background-position-horizontal: zero !unimportant;
#header h3 span background-position-vertical: zero !unimportant;
#header h3 span colour: cmyk(one-hundred-and-one, zero, one-hundred-and-one, four) !unimportant;

Bonus track: Get rid or prefixes on your CSS code

One of the most annoying tasks to do when laying out a style sheet is the need to add some prefixes to certain properties to make them work well. This action may demand a lot of time that could be used for advancing in other features. There’s this great tool, a Javascript plugin developed by Lea Verou which adds automatically and behind the scenes these prefixes only when needed: -prefix-free as this project is called, is a useful client-side plugin, which won’t affect the already included prefixes (although some bugs may appear there. In their documentation they suggest some hacks to fix this). This plugin works well and is natively supported in IE and Firefox, while Opera and Chrome need some tweaks to do local testing. prefixfree-logo

JavaScript has been there for a long time, but this time is its time!

It’s undeniable that JavaScript has been helping the web to evolve for a long time. And it has also been treated with certain jealousy mistrust by developers and other languages founders. In some certain way, this mistrust was indirectly caused by the early 2000’s Flash boom, which delayed JS evolution. But now, with the mainstream following the trends and techniques of HTML5 and CSS, JavaScript has been given its place: the backbone of today’s web design. Whether it appears in its AJAX (Asynchronous JavaScript and XML) or jQuery invocations, specially this last one nowadays, JavaScript has become widely used all around the world and has sparked interest from many developers. All this interest drives its continuous improvement with new surprising features. It’s totally worth learning and sinking into JavaScript’s world.  

So, are you gonna take JavaScript seriously? learn Node.js then

Node.js, or commonly called just Node, is a server-side implementation of JavaScript, and it does boost JS features to the point that you may go surprised with the results and start wondering if it is actually JavaScript or not. Going earnestly into Node may require some knowledge of event-driven programming and a lot of curiosity for understanding JS, as it will actually deepen in its complexity to create great web applications and show all the glory of this language, largely despised for a long time in spite of its power and versatility. Probably, the greatest thing about Node is the fact that it is JavaScript. There is no need to learn a new syntax. And the fact that it’s a fairly known syntax for web developers, is great for companies able to merge their client-side team with their server-side team. This is not just good for humans, the machines will benefit from having the same language as well. Think of it this way, if server and client speak the same language no translation is needed. We would bet you are thinking about AJAX calls and responses… well, if you do you’re thinking properly. Node.js is event-driven. That is, it’s a big machine listening for events and handling them accordingly (sounds like jQuery doesn’t it?) so every client AJAX calls is just a small step to the server side processing, no middlemen (well, sort of). Is that it? No middleman? Well, if that’s not convincing enough for you here’s, probably, the biggest advantage with Node.js: it is lightning speed fast. If web server platforms and frameworks were superheroes Node.js would be The Flash. Most of the speed related to Node is caused by the fact that there are no translation preparations in the client-server communications (‘json_encode()’ anyone?) and the simplicity of JS events to handle asynchronous calls. If Node is that fast, can it handle ‘real-time’ responses in a client-server interaction? Yes, here’s a brief demo by Wes Bos: We’ve been talking about real-time web applications using a single language. Is it there more of it? Yes. Probably the greatest feature of Node.js is the power of scalability. Node.js is a very, very fast guy that doesn’t need a translator, and that makes it the perfect messenger. It can handle scalable connections between servers with great speed and a reduced server footprint. As you should know by now, there are no perfect tools, they are perfect for this or that purpose, but not overall perfect. Node is fast on execution, but not that fast on development. Handling heavy processes with JS is not the wisest move, of course you can still use C++ that can do the heavy stuff for Node.js, but that’s development time there. Node.js is a platform, not a complete web framework (such as Ruby On Rails), so use it with care, taking into account there could be different issues that the platform won’t clear for you (like the framework does). Here are some great resources: first, Manuel Kiessling wrote this nice tutorial to go towards Node, it’s nicely written and has good explanations to become, as they say, an advanced novice. This directory is a site with a bunch of resources for JS/Node developers, it’s quite great. There is also Express, the great framework which will improve your node development speed. You may consider giving a chance to them, you may become a Node, JavaScript master and for sure you’re not going to regret it.

Bringing JavaScript to the next level

Two awesome tools to speed up JavaScript development are CoffeeScript and TypeScript. Figuratively speaking, the first brings JS a lot of gadgets as a super secret spy, and the last makes it taller by giving it a pair of stilts. Let’s see.

CoffeeScript – It’s JS with a full of gadgets belt

Launched in late 2009, CoffeeScript was made to enhance JavaScript syntax by, for example, making the parenthesis unnecessary. Therefore, function calls are implicit, replacing the use of braces for indenting lines to identify script blocks. The whole objective is to write the minimum code possible. The CoffeeScript simplification is so clean that it doesn’t need anything different than the JavaScript Compiler to run in any browser. However it’s a lot smoother when compiled server-side using Node.js or your favorite server-side language/framework. The greatest thing about CoffeeScript is the fact that it follows a simple golden rule “It’s just JavaScript”, this means any library written in JS will work flawlessly with CoffeeScript and vice versa.

TypeScript – It’s JavaScript with stilts

Developed by Microsoft as an open source project (oh, yes, you’ve read it well), TypeScript is a superset of JavaScript, which doesn’t enhance script syntax as Coffee does, but extends it, thus any JavaScript code is already contained in TypeScript. “TypeScript type system is basically just a formalization of JavaScript’s type system.” Anders Hejlsberg, Microsoft Technical Fellow

Rise of frameworks: designers and developers are closer than ever

Web evolution has brought an incredible growth of development and web design skills. Each discipline has been bringing some hacks and trends to light, and the web benefited from this exchange. However, with the boom of mobile and responsiveness, web development and design have become more complex. On the same way, web designers have realized the importance of knowing how their layouts become live by using code, and developers have learned that if the content doesn’t look good, it will not attract anybody. However, it could be tedious and impractical for a designer to try to learn programming or for a developer to attempt to get into design. That’s why some interesting solutions have come to light and we’re talking about web frameworks. As they have a lot of strong basis to start and speed up web development, they can also be customized in order to give a fancy and nice look to a project.

Don’t you know about Bootstrap yet? Get into it, own it, love it, but customize it!

Developed by Twitter, Bootstrap is quickly becoming one of the most important web frameworks out there. This framework became the most popular Github project in early 2012 as it makes available a series of tools to create responsive websites in such an easy way. There is no need to have a specific skill set to start using it. Some other characteristics of this great framework:
  • Comes with very attractive UI styles. They rely on the trend of being simple, minimalistic and clear.
  • It uses LESS helping to keep code organized and allows for rapid development.
  • Includes cool integrated JavaScript plugins to create sliders, carousels and light boxes with a simple and great look.
  • Bootstrap has rich documentation on its official site and as is well supported by many third party enthusiasts, it’s easy to find any assistance needed .
In spite of this, Bootstrap has an obvious and very criticized disadvantage; most of bootstrap based sites tend to look really similar, in other words, it tends to be quite obvious when a site is built with this framework. Not many people are eager to customize it. The reason behind this may be that most users barely know how to use Bootstrap, so they don’t have enough knowledge to customize it. To remedy this, some tools and resources have been under continuous development in order to customize and give a fresh look to the webs created using Bootstrap. As many third-parties and developers have been really keen to use it, there are literally tons of resources out there. We are glad to share a couple of nice tools with you. Are you new to Bootstrap, but the UI design is not enough pretty for you? Don’t worry, this great guide will not only introduce you to its world, but Anna Powell-Smith will also teach you how to customize its basic appearance. Furthermore, you can complement this with some valuable information about how to customize Bootstrap by Antonin Januska.

BootTheme, the tool that Bootstrap was waiting for to be complete

It’s worth to make a brief parenthesis here to talk about BootTheme. This is a great tool which uses and enhances Bootstrap with a lot of cool options to design web sites and creating themes. It includes free responsive themes, icons, a wide gallery, glyphicons, supports Google web fonts, LESS as CSS preprocessor and obviously all the features of BootStrap. Any review would be short compared with its wide range of features, so it’s well worth to take a deep look to it. BootTheme

Great tools to rule the world with your Bootstrap at hand

As Bootstrap quickly becomes more and more popular, the huge community supporting and using it has developed a great amount of tools to improve and enhance this framework and added strong features to it.
  • Tocify by Greg Franko – It’s a plugin that dynamically generates a table of contents and can be themed with Bootstrap or jQueryUI. Tocify supports show/hide effects for nested TOC items and uses the scroll spy effect to provide dynamic scroll TOC item highlighting. Additional features include smooth scrolling and history support. If you are looking to improve your documentation, Tocify is your plugin.
  • Bootstrap-Lightbox by Jason Butz – This plugin for Bootstrap adds a lightbox to the site, based on the modal dialog.
  • My-Bootstrap-DateTimePicker by Martijn Gussekloo  – A customizable date/time picker, allows to change the names of days and months in order to achieve an international standard.
  • Bootstrap-wysihtml5-rails by Gonzalo Rodríguez – Wysihtml5 for Rails is a WYSIWYG editor for Bootstrap.
  • WP-BootStrap-Gallery by Edward McIntyre – This custom WP gallery works for a dynamic thumbnail layout using Bootstrap 2.2.2 thumbnails. Its goal is to format a WP gallery short code to use Bootstrap thumbnail layouts.
  • SelectBoxIt by Greg Franko – This plugin replaces the ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. To use SelectBoxIt, you do not need to rewrite any of your existing form validation logic or event handling. SelectBoxIt just works. SelectBoxIt also provides first-class support for mobile, tablet, and desktop browsers, triggering the native “wheel” interface for mobile and tablet devices. Additional features include full keyboard navigation and search, ARIA, and event & method API support.
There is still a handful of more resources available so It’s very recommended that you take a deep look.

A glance on other raising frameworks that will surely rock the web

The amount of frameworks making their way on the web is really big, and it would be nice to take a quick glance to their main features and current statuses. Let’s review some of the best options:

Foundation – The most advanced alternative

This responsive framework is an open-source project, already in its version 3.2. It has been developed using Sass preprocessor and has a wide support for older browsers, even IE8. Foundation

Kube – A minimalistic and beautiful framework

Kube is a cross-browser framework, characterized by its minimalistic design. Developers version includes LESS with its mix ins, variables and modules. It also includes styles for web elements like forms, grids, buttons, tables and typography. Kube

Maxmert – Created differently from other choices

This framework built with node.js claims to be different from other frameworks as it has namespaces, so custom classes won’t interfere with its own classes. The JS plugins use CSS animation and it’s managed through Github and Bitbucket. Maxmertkit

99Lime HTML Kickstart – The framework focused on timesaving

This is a great framework which includes a set of HTML5, CSS and JS files, created to ease design process, thus saving lots of time to web developers and designers on their web projects. HTML Kickstart

inuit.css – A really powerful Framework based on Sass

Developed by Harry Roberts, inuit.css is an ideal framework for developers who want to handle their own design; it’s simple and requires just a few things to work and create highly scalable front-ends from scratch. inuit-css-logo

Skeleton – A design respectful boilerplate

A mobile friendly boilerplate which uses a 960px grid to start, style agnostic, includes great font styles, buttons, forms and media queries. Has great support for many browsers and takes care of working properly even in IE. Skeleton Boilerplate

Ink – Staining your website’s layout

Defined as a kit for rapid development, INK emphasizes simplicity and flexibility. A content-centric framework that offers amazing results. ink-logo

Workless – The classy framework that prevents from double-work

This framework developed by Scoot Parry, has the necessary elements to develop great website projects liberating users from repetitive actions. workless-fw-logo

HTML eMail Boilerplate – For the fancy display of emails

This is a complete and free boilerplate for eMail. It has a really careful design as it can reset many styles applied by eMail clients, allowing most of them a nice eMail display. It’s main goal is to prevent rendering problems. HTML eMail Boilerplate

CMS Evolution, no SQL and Static Publishing

The way of handling web data has been changing quickly and everything needs to be more dynamic, less rigid and lots of features are now required. It’s way better when a tool fits naturally to this new web full of responsiveness, interactivity, rich applications and content prioritization. That’s why we’re showing now some projects which are improving data handling in the world of Internet .

Let HTTP take a rest and use Jekyll

Jekyll Jekyll is a static site generator whose objective is to reduce HTTP requests as well as database searches, becoming a great time saver for both client and server sides. It will take files from a directory and generate a blog or a website from them . Having some templates and site content is quite enough to let this CMS generate gracefully our site. Authored by Parker Moore, Jekyll is able to process either HTML or Liquid Markup. This is specially great for those folks who are not used to bare coding. Jekyll also provides a set of variables to use into the templates, which are available in its documentation. Moreover, once the page is online, no code will be running on the web server, this will definitely improve performance a lot as all the content will be loaded there already and everything will flow better. Harry Roberts, one of the top-notch developers and designers of today’s web (by the way, also the creator of inuit.css framework) has developed his website, CSS Wizardry by using his own CSS framework powered by Jekyll. As there is no running code that may cause vulnerabilities, security increases because of static HTML, so once your site is live, securing your website wouldn’t be a mind blown; this is a step towards a more perfect world.

Easy CMS?