Make your Website User Friendly - Learn Responsive Web Design (RWD)

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Let us learn something new about responsive web design.

What is Responsive Web Design?

-> RWD stands for Responsive Web Design.
-> RWD can deliver web pages in variable sizes and resolutions.
-> RWD is a must for tablets and mobile devices.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

In other words, Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

How does Responsive Web Design works?

An introduction to responsive webdesign is the future of websites. Nowadays RWD is used widely across the globe for reducing /saving money, improved SEO and better site performance. Unlike desktop alone websites, RWD adapts the layout to the viewing environment by using fluid, proportion based grids and flexible images.

The two main techniques which make up responsive web design are Fluid Layouts and Media Queries. Media queries are mostly used in the web design industry for responsive layouts. Rather than looking for a type of device they look at the capability of the device, and user can use them to check for all kinds of things. For example:

1. width and height (of the browser window)
2. device width and height
3. orientation – landscape or portrait mode
4. resolution

These are the commonly used media queries in the webdesign. These resolutions mentioned here are not fixed; it may vary according to website's requirement.

@media only screen and (min-device-width: 767px)  and (max-device-width: 1024px) {

/** media queries**/
}

@media only screen and (min-device-width: 600px)  and (max-device-width: 768px) {

/** media queries**/

}

@media only screen and (min-device-width: 480px)  and (max-device-width: 599px) {

/** media queries**/

}

@media only screen and (min-device-width: 320px)  and (max-device-width: 479px) {

/** media queries**/

}

Responsive Framework:

Earlier, the websites are made responsive by writing media queries for all elements. But recently many designers are started using responsive HTML framework for their projects. Some of its example are Bootstrap, Semantic, Foundation, HTML5 Boilerplate, HTML KickStart, Skeleton, 1140 grid system, 960 grid system, Less Framework and so on.


Source: w3cschools, wikipedia, smashing magazine, magicdust, hubspot

Learn Iconography

Icons are symbolic representation of the content in the website. Design is all about communication: it doesn’t matter how important or exciting the information that you’re sharing. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website.

Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention. So, stop wasting time writing so much content that no one will read, and start using icons!

Here are some of the best practices of using icons to support content in web design. Please feel free to take a look at the showcases of navigation menus, search boxes, block quotes and web forms.

Icons make the user to understand the content design in easier manner. In simpler words, icons can reduce complexity in the content.

1.) Use simple and appropriate icons for the content.

2.) List features, characteristics, services and other listing information content can added with suitable icons.

3.) A UI designer must know placement of icons and where to use of icons in the content.

4.) Icon-size is more important. According to design elements, icon size can be fixed by designer. 
     a.) In case of header, icons can be in the minimum size of 15x15 to 25x25. 
     b.) In case of icons in content area, icons can be in the minimum size of 20x20 to 50x50.

5.) Simple flat icons and material icons are mostly  used in web design industry.

6.) Usage of icon web fonts in the webdesign in trending the web design and application layouts.

7.) Time to load icons and web icon fonts are very minimal and so the website performance is more better.

And that's all for iconography. If an UI designer follows these rules, the layout will rule the industry for long withstand. In forthcoming articles, we can discuss about other related topics in web design.


Source: smashing magazine

Typography Explained - II

Let us learn something new about fonts.

As we have discussed in previous post about Typography Explained - I, Fonts are one of the important element in the design layout. Bigger and larger fonts for headlines and topics will make the user to understand the content easier.I have discussed few points on typography rules, which makes you in becoming 85% professional designers/writers.

The typographic quality of your document or a website is determined largely by how the body text looks. Why? Because there’s more body text than anything else. So start every project by making the body text look good, then worry about the rest.

In turn, the appearance of the body text is determined primarily by these four typographic choices:

Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.

Line spac­ing is the ver­ti­cal distance be­tween lines. It should be 120–145% of the point size. In word proces­sors, use the “Ex­act” line-spac­ing op­tion to achieve this. The de­fault sin­gle-line op­tion is too tight; the 1½-line op­tion is too loose. In CSS, use line-height.

Line length is the hor­i­zon­tal width of the text block. Line length should be an av­er­age of 45–90 characters per line (use your word-count func­tion) or 2–3 low­er­case al­pha­bets. eg:
abcde­fghijklmnopqrstu­vwxyz­abcde­fghijklmnopqrstu­vwxyz­abcd

In a printed doc­u­ment, this usu­ally means page mar­gins larger than the tra­di­tional one inch. On a web page, it usu­ally means not al­low­ing the text to flow to the edges of the browser window.

Font choice is a final one. The fastest, eas­i­est, and most vis­i­ble im­prove­ment you can make to your ty­pog­ra­phy is to ig­nore the fonts that came free with your com­puter (known as sys­tem fonts) and buy a pro­fes­sional font (like my fonts eq­uity and con­course, or oth­ers found in font rec­om­men­da­tions). A pro­fes­sional font gives you the ben­e­fit of a pro­fes­sional de­signer’s skills with­out hav­ing to hire one.If that’s im­pos­si­ble, you can still make good ty­pog­ra­phy with sys­tem fonts. But choose wisely. And never choose times new ro­man or Ar­ial, as those fonts are fa­vored only by the ap­a­thetic and sloppy. Not by ty­pog­ra­phers. Not by you.

That’s it. As you put these five rules to work, you’ll no­tice your doc­u­ments start­ing to look more like pro­fes­sion­ally pub­lished material.Then, if you’re ready for a lit­tle more, try the sum­mary of key rules.

Web fonts:

When the page loads the browser tries to write text to the screen using a specific font that is stored and available on the computer running the browser. If the font is not on the computer, then the browser won't be able to display the font, and the website will not show any text!

Now, you may wonder how this can happen when your computer has so many fonts installed on it? The reason is because there are mainly 2 widely popular operating systems used today - Windows and Mac OS X - and each comes pre-installed with different fonts. 

Most Frequently Used Fonts in the Web:

The use of web fonts has continued across the globe. Nowadays, designers are no longer using content with standard system fonts like Arial, Georgia, Tahoma, Veranda, etc.. Here we can categorize the web fonts that are commonly used in the website designs.

Web fonts are bringing the aesthetics of print design to the web. These are the few points which help UI designer's to make best use of them. Few years before, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same. 

After the evolution of Web 2.0 in earlier 2010, there is wide spread out of @font-face in all major browsers and a new web open font format WOFF, which has led to a technical revolution and the rise of a number of web font hosting services.Here are the few tips for web fonts before using it in website.

1. Be Selective:

Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).

2. Put Type First:

Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design. 

3. Take your Time:

The web may move at lightning speed, but quality typesetting requires lots of patience.

4. Look for Specific Suggestions:

Before selecting fonts, justify why that font is used in the website. Use appropriate fonts for the website or application which is designed.

5. Be Mindful of file Size:

While designing, please keep the size of your font as an essential one. Headings and topics related texts are given in bold and legible fonts which can make user understandable. And also the font size used for content must be precise and legible to read. Do not use display or decorative fonts for content texts unless it is not necessary 

6. Stay across browser updates

Some of the downloaded web fonts are not compatible in older version browsers. Check web fonts before using it in website.

7. Try Before you Buy:

Most of web fonts are not free. User have to buy it before using. Before buying a new font, try it once and make sure it suits the project.

8. Consider free web fonts

Try to use free web fonts available around the internet, which mostly supports all modern browsers. 


Source:  praticaltypography, creativeblog

Typography Explained - I

Typography could be considered the most important part of any design. In this post, we’ll discuss about the basics of typographic theory, including the different kinds of typefaces (and how typefaces and fonts differ), as well as the basic anatomy of a typeface. And each part will also offer more resources for delving deeper into typography.

Typography is the art and technique of arranging texts to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line-height, line length, line-spacing (leading), letter-spacing (tracking) and adjusting the space within letters pairs (kerning). In modern times, typography has been used in we design (web and print media) film, television and online broadcasts to add emotion to communication.

In other words,Typography means the style and appearance of content in web and print media. The art or procedure of arranging type or processing data and printing from it.

Most of them would confuse between typeface and fonts. A typeface is a set of typographical symbols and characters. It’s the letters, numbers, and other characters that let us put words on paper (or screen). A font, on the other hand, is traditionally defined as a complete character set within a typeface, often of a particular size and style. Fonts are also specific computer files that contain all the characters and glyphs within a typeface.

Classifying Types:

There are a number of different ways to classify typefaces and type families. The most common classifications are by technical style: 

1.) Serif
2.) Sans-Serif
3.) Script
4.) Display
and so on.

Mostly used font typefaces are serif and sans-serif. Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. An example would be the Times New Roman font. Sans serif does not have these details or flourishes. An example would be the Arial font.

Script typefaces are derived from 17th century formal writing styles. Many characters have strokes that join them to other letters. These typefaces include calligraphic writing, manuscripts and casual joining letters scripts. Good Example of script typefaces are Brush Script, Lucida Calligraphy, Monotype Corsiva, etc..

Decorative or Display styles is the largest category and also the most diverse. Rarely used for lengthy blocks of text, decorative typefaces are popular for signage, headlines and similar situations were a strong typographic statement is desired. Sample typefaces are ITC Tempus Sans, ITC Blackadder, Droid sans, etc..

The Anatomy of a Typeface:

The different letter forms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface:

The above image shows the different guidelines that are generally present in a typeface. The baseline is the invisible line that all the characters sit on. Rounded letters sometimes sit just a tiny bit under the baseline, and descenders always drop below this line. A given typeface will have a consistent baseline.

The meanline is the height of most of the lowercase characters within a typeface, and is generally based on the lowercase “x” if there are varying heights among the lowercase characters. This is also where the term “x-height” comes from. The cap height is the distance between the baseline and the top of uppercase letters like “A”.

The above illustration shows three common parts to letterforms. The stem is the main upright of any letter, including the primary diagonal. It’s could be considered the anchor of the character. The bar is any horizontal part, which are sometimes also called arms. The bowl is the curved part of a character that creates an interior empty space. The inside of a bowl is a counter.

The ascender of a lowercase character is any part that rises above the meanline, such as the uprights on the letters “d”, “h”, and “b”. Descenders are the parts of a lowercase character that drop below the baseline, such as in a “p”, “q” or “g”.

Serifs are the extra flourish at the end of a stroke on serif typefaces. Some typefaces have very pronounced serifs, while others are barely distinguishable.

The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m”. An ear is a decorative extension on a letter, as highlighted on the “g” above. Hairlines are the thinnest part of a serif typeface.

Crossbars are horizontal strokes, as found on the uppercase “A” and “H”. Terminals are only found on serif characters, and are the end of any line that doesn’t have a serif. Loops are found on some lowercase “g” characters, and can be fully closed or partially closed.

Spurs are tiny projections from curved strokes, such as on some uppercase “G” characters. Links connect the top and bottom bowls of a double-stacked lowercase “g”. The spine is the curved stroke found on the letter “s”.

Tails are sometimes-decorative descending strokes, as seen on an uppercase “R”. Finials are the tapered endings of some strokes. Shoulders are any curved stroke that originate from a stem.

Rest of basic typography concepts are explained in next posts.

Source: practicaltypography, noupe, wikipedia, maconprinting, buzzfeed, fonts.com

What is the difference between UI & UX ?

In today’s creative and technical web environment, the terms 'UID' (User Interface Design) and 'UXD' (User Experience Design) are being used more than ever. Most of the designers and developers have a open doubt about the difference between UI and UX. Even some will be assuming that both UI and UX are same terms. But in short,

 UI != UX 

The term UI means the actual buttons, text, and pixels that appear on the screen. So the UI designer would be responsible for everything about how a web site or application appears in the interface - this would include visuals as well as overall architecture of the page. In shorter, UI is everything that shows up on the screen: the images, text, diagrams, and widgets as well as their color, size, and positioning. For example, 

1.) Are the buttons blue or red?
2.) Do they have gradients or are they flat?
3.) What background color can be used?
4.) What is the border color and thickness that can be used for box shapes?
5.) Is box-shadow required for the side widget? 
etc.. 

UX is next or higher-level discipline than UI, because it includes not just the design interface, but also all the systems and interactions that support it. UX is an overall experience and interaction with design. And also how end user feel easier towards the design. UX is much more comprehensive than UI. It’s the entire experience a user has when they use your product. For example,

1.) Where to place social media buttons in the header?
2.) Is sticky header menu is necessary for this page?
3.) What font-size to be used in website?
4.) What standard of colors can be used for fonts?
5.) What is the delay time used in animation effects?
etc..

"User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” - Rahul Varshney

There are some basic concepts which are called as 'Umberlla Effect'. 

User Experience Design - how the user thinks and feels
Information Architecture - how the system is organized 
User Interface Design - how the content is organized 
Interaction Design - how the user and device act and react 
Visual Design - how it looks

To be more clear and perfect, the examples of UI and UX are shared below:

1.) Take restaurant as a example. The utensils, plate, table and chair. That's User Interface (which can contribute to experience). The food served, service and ambiance. That's User Experience.

2.) We can take Ketchup bottle as one more example. Initially, a company manufactured their ketchup in a slim bottle with narrow neck at the top and with small opening holes. The bottle was strong and user can slightly tilt down the bottle to pour ketchup in his food. When the bottle was about to empty, user need to shake / tilt the bottle 270 deg for ketchup. Also, It is not easy for keeping the bottle upside down (in the refrigerator).

Here the bottle design and narrow edge at top is UI. But uncomfortability of using bottle in fridge and tilting 270 deg is the 'poor' UX. But later, bottle was designed stronger with broad top with bigger cap. Now everything became easier for end user. This is called UX.

Source: udacity, careerfoundry, quora