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.
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!)..some-class { display: box // or should we use flex? or the weird flexbox?; display: -moz-box; display: -webkit-box; }
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 (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 |
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 |
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.