Businesses Have Misconceptions about Web Development

It has observed that when businesses decided to have their own web presence and even in responsive web designing, they are running with some common misunderstanding regarding the web development process and web development team. These misconceptions or myths may sour their relationships with web development team or company itself.

Therefore, I have decided to give some insights based on our experiences as a web development team at Lujayn serving wide range of clienteles across the globe.

Myth #1 – These Are Simple Changes

Being a well-experienced web development company, team at Lujayn is preparing project scope documents where we are defining things in advance that what should be included, and what should exclude in the set price structure. Despite such preventions for project creeps, some businesses come up with small changes that they think as minor ones and can address with little efforts and time.

However, that is not true at technical point of view because simple looking websites may have intricate functionality and complex interactions in backend. Thus, always their programming becomes time-consuming and expensive at logic even a simple change in location of a button may take days to accomplish in coding and testing.

Solutions:

Businesses should define their requirements upfront and always discuss with team prior to suggest any changes as well as offer extra cost if your changes require the substantial amount of time and efforts from your hired web development team.

Myth #2 – Templates Are Okay

It is true that market is flooding with ready to use templates or themes and some software available to build a website using GUI tools without doing any coding at all, just drop and drag work flow. Of course, templates are good for those who need low-end and temporary web identity at initial stage and ready to customize them when their time and money come on hand.

Solutions:

In majority of cases, businesses, be they small or big want to augment their brands and have thirst for good ranking in SERP for their business keywords. Therefore, it is imperative for them to come up with unique and SEO friendly websites for their users and bots in order to get the best ROI.

Myth #3 – Web Development One Time Process

Majority of businesses think that once website has built their work is over. However, they are not true because web development is not one time process even though you have created customized web identity with the latest responsive web designing technologies, as web development team needs to update it regularly as well as check or test it frequently for its compatibility and user experiences in contemporary sense.

Web and mobile technologies are ever-changing field and your current websites may become obsolete after two or three years and you need to redesign it with the latest coming technologies at that time.

Solutions:

Therefore, my best advice for business houses to keep good relation with your web development company and take their help regularly by paying on their maintenance packages or for support or update charges.

Myth #4 – Anyone Can Do UX

When businesses have to select the web development company as their IT partners, they used to check presence and capabilities of graphics designers for UI and programmers for interactions and dynamism, but never ask for UX experts. Designing mere UIs and programming them can’t bring good user experiences on your websites because expertise and experiences in UX is quite advance and different discipline in software development as well as in any industrial product development.

Solutions:

Thus, check whether your hired web development team has UX experts included or not and ask for the portfolio of UX professionals too.

Current Common Practices in Web Typography Part 1

Summary:

It is true that web typography is a bit different from print and constantly evolving due to ever-changing nature of web itself. At present, we are experiencing new opportunities on presentation front due to emerging mobile era as well as facing intricacies in implementations. These all force us to reconsider our practices and outlook.

Intro:

Day before yesterday, we were focusing on the print media and little on web media for static desktop like devices. Today responsive web designing practices have changed the entire landscape of web typography. Therefore, today we have to think about the font type, style, font size, and spacing in respect to the ever-changing viewports according to the client mobile and desktop devices. We strive to optimize readability of the web typography across the devices, browsers, and OS. In due course, we need to focus on certain current common practices prevailing in web typography landscape. Let’s check one-by-one.

Type Face

The choice of typeface sets the tone of the entire website and sends right or wrong messages by creating an atmosphere. Our designers are struggling between the Serif and Sans Serif typefaces for an appropriate choice since 2009. If we look back in the web typography of 2009, it was increasing trends for sans-serif typeface in body copy as well as in the headlines. Today designers are creating contrasts in body copy and headings by interchanging of serif and sans serif typefaces in order to improve readability and visual appeal of the website.

If we fine grain the data, we may find that serif typeface has replaced the sans serif in body copy gradually over the last four years. We can see the emerging trends for Georgia and Arial as the most popular typefaces on the responsive websites like The Guardian, Financial Times, BBC, etc.

The Most Common Typefaces

Besides Georgia, there are other popular typefaces such as Chaparral Pro, Freight Sans Pro, Helvetica, Verdana, etc. which have taken place in either body copy or headlines/headings and differentiate from others by creating contrasting effects. However, interesting trends are also visible for the non-standard typeface usage on the recent web development, especially in responsive websites made for multiple devices and screens. This indicates the increasing diversity in web typography.

Diversity in Typeface

As we use CSS in responsive design and fallback typefaces including standard core Web fonts like Times, Times New Roman, Arial, Georgia, Helvetica, etc. are used predominantly as mobile platform fonts. Ironically, comeback of Times, and Times New Roman have widened the diversity of web typography still keeping the old players intact. The real genesis of diversity is leaning trends towards individuality and responsive web on designing landscape.

Many smart web designers are experimenting with typefaces mostly in headings because drastic changes in body copy may prove disastrous particularly in case of responsive designs. However, use of alternative fonts for body copy may create rich panorama and bring more diversity in web typographic landscape.

Fortunately, Lujayn has dedicated web developers who are accustomed with current trends and common practices in web typography landscape and capable to make your project a success legend in this fiercely competitive market.

Designing Simple-Predictable-Comfortable Navigation Part 2

Designing Navigation-Target Areas
Designing Navigation-Target Areas

Summary:

Target areas, links or clickable/tappable areas are dynamic and live part of the navigation in all sort of web designing, be it for static websites or responsive website designs. There are many factors determine the success of target area designing in course of navigation designing. Let’s check them in brief.

Intro:

In the first part of this series, we have seen that designing navigation is a part of creating information architecture and main menus are vital component of entire navigation system. Therefore, in this series I try to focus on the simple, predictable, and comfortable navigation designing using various components of navigation efficiently. In due course, we have seen navigation symbols in first part and now we will look at the target area designing in this current part 2.

Target Areas in Navigation

By definition, target areas are nothing, but navigation links designed to easily recognized, easy to click, and consistent throughout the website. Technically target areas have text or symbol label and hot/active area to click, which is linked with other web pages in the website. Sometime tint of graphics is added on the target areas to show it as button like things, but most of the times, it is highlighted through differences in fonts, font sizes, and font or background colors.

In drop-down menu, target areas should have contrast against the similar background and that should reflect in size of target area, texts of labels, and colors of the target areas. On desktops, we have opportunity to change font styles in dim lighting and other ways to respond hover effects. Unfortunately, for mobile users, we have to device other ways.

Size of the Target Areas

In field of human computer interactions, Paul Fitts had quantified the behaviors of the users and predicted some rules to follow. According to him, designers should design target areas a bit larger and closer so users will hit them faster and with comfort or ease. Therefore, experts are advising that designers should utilize every pixel available, and should extend the clickable/tappable areas up to its boundaries.

However, in static websites devised especially for desktop users, can’t follow this rule because they have more than necessary white space and it’s a part of flat and simple design. Of course, responsive web design can stick with maximum utilization of target areas and give the best user experiences in tough gestures. Covering the maximum areas don’t mean to convert or create images in mega-menus, but make them large enough that they can grab immediate attentions of onlookers and facilitate mobile users to tap or select the target areas easily. Thus, enlarging target areas from normal size to 10% can give good usability and UX at the end.

Consistency in Location in Target Areas

Today we have larger websites with multi-level navigation where chances of inconsistent target areas are high particularly in case of nested menu. Therefore, designers use the fly out or slide to the submenus and their location issues are bigger if we don’t keep consistent locations for them. In single-level navigation menus, closing the menu may become the problem if designers don’t provide obvious clues or close buttons at the same areas where it opens.

If you strive for such high level of user experiences and usability in your web development, Lujayn has team accustomed with aforementioned designing techniques and practices to take a chance.

Designing Simple-Predictable-Comfortable Navigation Part 1

Symbols in Navigation
Symbols in Navigation

Summary:

At present, many designers are experimenting new techniques in navigation design, but the best user experiences come with simple, predictable, and comfortable navigation only. Let us see how we can accomplish it.

Intro:

Designing navigation means designing information architecture. If you make navigation simple and comprehensive, your chances to win the battle of UX is getting high. In responsive web design era, it is tough to designing navigation that is comfortable and predictable. In general sense, designers are considering some important aspects while designing a navigation menu of any type and we can list those aspects in following ways.

  • Navigation Symbols
  • Target Areas
  • Interaction Events
  • Levels
  • Layout
  • Functional Context

Let’s check them one-by-one in this series.

Navigation Symbols

A day before a yesterday, we were designing navigation system with simple buttons and labeled with texts. Now, in this advanced age of web and mobile navigation designing, we have plenty of new navigation designs to experiment and ways to replace age-old methods. Therefore, today we have some additional elements in the navigation design besides or instead of texts in navigation menus.

In responsive web designing, designers are deprived of screen real estate so inducing much text may prove confronting for better UX. Therefore, most of responsive designers are relying on the small visual clues in form of either icons or symbols in standard conventional ways or in innovative ways with enough guiding or onboarding techniques.

If you are designing web navigation or mobile navigation system, crafting symbolic navigation should be unambiguous and consistent to sustain in the system without missing UX and usability aspects of the design. Let’s check some standard and conventional symbols used in contemporary navigation designing one-by-one.

Using Triangle Symbol

A triangle symbol next to the corresponding menu label/text indicates drop-down or category/sub-category menu depending upon its direction. For instance, downward or inverted triangle indicates drop-down menu while triangle pointing in right/left direction, it indicates fly out menu. Smart designers always consider the available margin in various size of screen and adjust the direction of unfolding action of menu accordingly and responsively.

Using (+) Plus Symbol

Generally, plus symbol indicates unfolding or opening of dynamic navigation and depicts “More” like functionality to expand the dynamic menu further. You can mix two symbols in intelligent ways. For instance, arrow in top navigation menu and + plus symbol for dynamic navigation menu in sides.

Using Three-Lines Symbol

The tree-line symbol is becoming the standard convention in responsive web design and mobile app design because it mostly used to indicate the navigation menu itself and by clicking or tapping on it you can unfold the navigation menu in responsive ways. Sometime designers add “Menu” text or label along with the three-line symbol in order to avoid confusion especially when the same three-line symbol used elsewhere.

Lujayn has smart responsive web designers who know creating conventions through consistency across the web pages or UI screens in the mobile app.

All about Usability and Accessibility of Model Window in Web Design

Summary:

Model window is the most essential element of the web page in modern days, as it provides extra real estate on the screen and serving contextual content ultimately. Despite its usefulness, we never think of its user experiences, usability, and accessibility for instance, through keyboard keys, instead of mouse.

Intro:

For web and mobile designers, popup, nag screen, interstitial, etc. are devil creations and enemies of better user experiences, against the user friendly and useful model windows, created with great care. In fact, model windows offer unprecedented advantages for developers like delivering contextual info, notifications, actions in contexts of current screen, and most importantly some extra space for content or short forms to fill up quickly.

Ignorance of Model Windows

Despite their essential and usefulness, developers often ignore them during designing and programming, particularly at the usability, accessibility, and user experiences point of views in modern responsive web designing. For instance, if any user is favoring navigation of your website through keyboard instead of pointing device like mouse, she will get frustrations when a model windows popup immediately in contexts of some actions or anyway.

Yes, there are frustrations because dealing with model windows always need mouse pointer to take some actions on button or activate the input fields on the model windows. If user wants to ignore it and close it, she again has to use mouse pointer to click the ‘X’ close button on the model windows anywhere.

Of course, there are alternatives to use keyboard shortcuts like tab-key or alter-tab keys, but they are not universal and applicable in all OS or versions of OS. If, user is reaching on the model windows there is no guarantee that Esc key shortcut will work to close the model windows.

Need Attentions

In short, we can say that we need some programming hacks to make model windows accessible and usable in all sorts of use cases of website, be it on desktop or on the handheld devices. Let’s see how we can improve the semantics of the markup of model windows in this post.

Improvements in Semantic

Generally, when we code for model windows, we give it an id in div tags and state a hovering action to close it. Thus, this simple div element of model window has nothing in sense of semantic meaning when any user wishes to use it or closes it through keyboard or screen reader actions.

In order to understand this, if we take one code example of a model window, we can see how improvement in coding is possible.

<div id="modal_overlay">
<div id="modal_close" onClick="modalClose()">
X
</div>

Now in this code, if we correct the semantic of the above code by writing markup for the button instead of simple div element as well as adding an AIRA label for screen reader.

<div id="modal_overlay">
<button type="button" class="btn-close" id="modal_close" aria-label="close">
X
</button>
</div>

This way we address our two targeted issues: keyboard action through tab key and focused state through AIRA label for screen readers. As button can be tabbed and this action falls in convention on the web, our both purposes, usability and accessibility through keyboard have solved.

If you want to take user experiences at the next level, some more efforts through CSS and JavaScript are essential. Let’s check them one-by-one in code examples.

Adding focus states

We grab attention of users through some effects like shadow towards the button so they can know that it is active element and will respond through keyboard actions too. We can do this way:

:focus {
box-shadow: 0 0 3px rgba(0,0,0,.75);

Generally, when model window appears, its background freezes and user begins focusing on the model window. However, this phenomenon never happens automatically and you have to first save the last active element on the screen through coding and in next step, you need to code to shift the focus of user on the model window. Thus, you have to add code for both action through following ways.

Save the Background

You can save background element by adding variable and executing it through function.

var lastFocus;
function modalShow () {
lastFocus = document.activeElement;
}
function modalClose () {
lastFocus.focus(); // place focus on the saved element
}

Shift the Focus

You can do this by giving that element an id and set attributes for keyboard action:

var modal = document.getElementById('your-modal-id-here');
function modalShow () {
modal.setAttribute('tabindex', '0');
modal.focus();
}

Closing Model Window

We can do this simply by using Escape key as it used as standard convention in digital world.

function modalClose ( e ) {
if ( !e.keyCode || e.keyCode === 27 ) {
// code to close modal goes here
}
}
document.addEventListener('keydown', modalClose);

There are more usability steps, but expert and dedicated web developers at Lujayn, always using those advance steps in certain contexts and in favor of its patrons.