Advanced Web & Design Trends 2013

Technology shift is been tremendous from the last few years according to demands and trends of users it grows rapidly and brings a threshold or change. Thereby, I am going to bring in a complete guide to let you know current trends and what has been vanished from the designers' minds and how they are very familiar with people interaction abilities with web interfaces.

Here I am going to evolve a concept for developers and designers how they can improvise there abilities to meet current web development ninjas and bring flexible outcomes for their users.

Be on the top of Website Responsiveness, with the latest practices

Responsiveness is the trend, the rule, the way to make people out of ugly looking layouts and designs towards the most demanding platform oriented designs. If you are still confused about this concept, you can take a gander to A List Apart’s review,  furthermore there’s an accurate practical showcase of what is responsive, courteously created by  Brad Frost for you to finally make it clearer than water.

Now, it has become essential to adapt the layout of every site -which forces to rock the web- to every new device and anyone who dares to dispute that fact or even assert an opposite view is going in an absolute wrong way… wait, is it actually the wrong way?

Not as absolute as said, his heel will always be his weak point, and responsive web design, as nowadays hero of the Internet, has its own, obviously it is still not perfect, as it’s  information in favor of layout, is not being yet adaptive enough, and is starting from basis and standards not adequately responsive as the objective is supposed to be.

That’s why we’re gonna take a look to the future, over those opportunity areas, in other words, to the evolution of responsive web design.

The newly evolved web rockstar: RESS

 As we’re still in the middle of Responsive web design development, it has shown yet many weaknesses and many efforts are focused right there, on trying to minimize or completely solve these issues. Among the several approaches presented daily, there is one, RESS (stands for a merger between Responsive Web Design and Server Side), intended to enhance web performance by combining client side and server side powers.

Let’s take a little deeper sight to this. This technique requires a lot of angles to look at, but it has the power to handle almost any of them easily. First off, let’s explain the basic flow of one RESS implementation: at first we gather as much info on the device as possible (sizes, features, …), then in the server we get the proper markup, in a big scale, this could be a drop down menu for mobile site and a horizontal menu for bigger sizes or images with the proper size and with the proper methods.

When the specially delivered markup, that fits the device, is sent, we use media queries and other responsive design techniques to ensure that this markup fits what we are aiming at. 

Smarter Responsiveness: Best practices and techniques

We can’t ignore that nowadays responsive design is becoming even harder as time goes by, due to the continuous development of technology industries, specially at the mobile side and the practically impossible way to test (and design for) ‘em all, simplicity slowly starts to be accepted as the reigning rule, and we’re not just talking about visual simplicity but a simpler UX, simpler coding and simpler layouts.
This is bringing along a trend of giving more importance to the different contents displayed on a site (which will be our focus in this part of the guide), which is at the end, the actual goal of every site. We are going to present here, those tips and techniques that would become the trend about RWD and define the next step to its evolution.

“Make things as simple as possible, but not simpler.” Albert Einstein

Responsiveness will be all about typography

As typography and font handling have become increasingly important on web design fields, and due to its versatile nature, it’s quite logical (and not wrong, at all) thinking that typography will be the trendsetter on responsive design. In fact typography is being more important than ever, as it’s really nice in the way of achieving specific goals: increase site performance and focus on content.

One of the natural aftermaths of laying out with typography could be the gain of simplicity, also, as CSS has introduced the use of custom and web fonts, web designers count with more elements to create stunning design. Apart from taking into account the regular basis for balanced typography, in this case web designers should consider the behavior a typography may have, once the layout begins to respond to the different resolutions, in order to keep it clean, readable and to avoid affecting design aesthetics. Some considerations to keep in mind here are:
    • Fonts are resizable. Not just by the screen but by the user too.
    • Fonts may behave quite weird in different resolutions, then it’s nice to consider different font-faces when size changes.
    • Fonts should always keep good structures and be readable.
    • There must be always a balance between content and design, in other words, typography should be key part of design.

Responsiveness will focus on standing out content

The first step to giving more, and enough, importance to contents when limited -smaller- resolution layouts are designed, and therefore, a more accurate structure could be planned, avoiding the simple and common practice of indiscriminately piling columns up when resizing, relegating important contents to the very low part of the scheme. Now that we have stood out 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; it’s been posted by Trent Walton, and entitled Content choreography whose goal is rearranging the layout, after establishing contents’ hierarchy and placing them in strategic positions depending on design size. This approach is quite useful when we have prioritized content that should have a privileged position in any display. 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;
As of this article, using display: box seems to be the most supported, 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!).

Responsiveness will not care about resolution

Responsiveness needs independence, as the goal is being 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. In the way of achieving that independence, the first step is being given in graphics field.

As it’s not nice to have multiple assets of a specific graphic to fit several resolutions, from small-screen mobile to high definition displays, vectorial approaches and web icon fonts seem to have the answer. SVG images could be a nice solution, as the format allows vectors to be displayed in browsers with all the advantages which it brings, like theoretical infinite resizing without showing significant aliasing; however, it’s not yet fully supported and may take really long to be loaded; that could be a stone in the shoe for performance.

At this level it may be better to use this solution with some moderation. On the other hand, we have font icons, which are widely supported, and there are a lot of related resources out there which could be included on any project and even customized.

Responsiveness shouldn’t care about devices either

Responsiveness is something bigger than just how a set of containers will look across the several existing resolutions and orientations, it should be focused on displaying well in any device, any browser and any circumstance, and to do that is not necessary to fill the web with stunning effects and flourishing motion streams, it just need a little of deep planning and good design to do so.
Web is a single concept, its core is the same, the interconnection of networks where several devices are connected to, then applying specific concepts of web as if they were subsets could be wrong.  The term Mobile Web is commonly used to describe these layouts we must design in order to display nicely our contents in portable devices such as tablets, videogame consoles and mobile phones, however these layouts doesn’t include anything different than HTML, CSS, in some cases JS and other languages and plugins we use to layout for bigger and wider viewports, hence web remains the same one, regardless the device where it is displayed.  

Smart imaging for a more graphical web decreasing performance loss

Web is becoming every time more demanding, and inside its requirements the need of making all its elements responsive and focused mainly in contents. This is why a concept like Smart Imaging becomes strong, as web professionals are aiming to handle more efficiently with those. 

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 as image handling is a hot and live challenge trying to be faced and beaten. On responsiveness sake, it’d be really nice to work with vector images, however they represent a huge sacrifice of performance and similarly they are strictly limited to basic shapes, illustrations, icons, and many UI elements.

Difference of qualities between bitmap and vector graphics
Difference of qualities between bitmap (left) and vectorized photo (right).
Although it may sound really awesome, as any rising solution, it has a big but: its performance is way slow as the code is yet heavyweight, however the long way to go, 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, lies in the eternal quest of reducing the bias between quality and low file size, as theoretically 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.

Now, we believe that the future of image responsiveness could be just there in the use of new formats, but there’s no need to think beyond, because they may actually be already there, then, we will talk briefly about the advantages of JPEG2000 and WebP formats. Let’s start with JPEG2000, developed by Joint Photographic Experts Group, same developers of the well known JPEG format, in 2000 (oh, yeah! way long ago) pretending to improve the compression of images.  

Among the features of this improved format we can find:
    • Its compression may be either lossless or lossy, against the sole lossless compression of standard JPEG.
    • Able to display an image at different size and resolution from the same image file.
    • The result of the compression is a clearer image than standard JPEG, avoiding the blurry and blocky disgusting characteristic. 

Time for Ad-apting to the responsive stream

The mutual requirement between media and advertising has always been absolutely undeniable, and whether you like it or not, this relationship must remain solid and be strengthened as both business models depends 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 get 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, you wouldn’t 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 is a fact that a banner displayed at the very bottom of the site will have a really low CTR as the impressions may go dramatically reduced. In that order of ideas, advertising should be adapted to responsive design and enough importance should be given to its content.

Ad Banner placement in different devices
Ad Banner placement in different devices
 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 remark the principal advantages of using this solution; the content of the advertisement is given more importance as the banners are not simply changing its size, but they are adapting to the resolution and with the orientation of the display, and the simpler version of the banner, when resized, is still good enough to convey the message intended by the advertising campaign.

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 because they had yet a lot of limitations, as layouts were designed using tables producing rigid designs, waste of precious minutes waiting for the machine to render those properly and stuff like that. 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, as it made possible to place several columns alongside, handling those easier and reducing a lot the HTML lines to use.  

Font module is bringing on cool solutions

Once typography has been evolving alongside web, new features have been added to their personality and it has become job of browser dev teams, work 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 at edition applications like Adobe’s CS5-6 Illustrator, Indesign and Photoshop, for now. 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';
These hints have a common factor and is the use of  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, readers’ preferences, languages, handicaps, timezones, use, abuse, sluggishness, light speed performances, coding and designing constraints, etc. However, as web is not linear at all, it needs to start adapting to the pure essence of nature; web needs to adapt to organics. The following implementations are still in larval stage, may impair your ability to think inside the box, and should be kept out from the reach of squared minded folks. Advertences apart, let’s introduce CSS Exclusions and CSS Regions.

CSS Exclusions in action
CSS Exclusions in action
This implementation allows text to flow inside or wrap around organic and irregular shapes. Exclusions are a first approach to the design process of organical 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. 
Share on Google Plus

About Khawar Akram

Efficient professional with approximately 3 years of experience in a medium size digital web agency and geotechnical engineering organization. Has profound knowledge of web and e-commerce application development. Expertise and experience in application deployments, analysis user requirements and client trainings and support. And proficient in adapt latest technologies, motivated and accomplished IT professional with resource management and programming skills and cooperative to peers and friendly to the starters.