Tag Archives: web developers

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.

Advertisements

Working with and Building Modal Windows in Web Design Part 1

Summary:

Modal windows are offering extra spaces on the screen without intimidating user experiences if designed smartly. No doubt, making its semantic is the need of moment. Therefore, let’s check the best practices and trends for working with modal windows in your web design project.

Intro:

In web design whether for static or responsive websites, you need to take care of readability, usability, accessibility, and functionality during entire designing and programming process. In due course, organization of information architecture along with design layout is crucial and demanding a bit experiences as well as expertise.

At present, most of the websites are business oriented and highly relying on online identity to accomplish their critical tasks or processes of the business. Therefore, intricacy in design and functionality is natural. Majority of clients and their web developers are screen real estate hungry. They constantly try to include maximum info in minimum space. Thus, their trade-off with layout blocks and responsive design become more complex and force them to find out innovative ideas to justify their content needs.

Technically, we have innumerable GUI elements and structures to organize our ever-increasing content needs. For instance, jQuery-based sliders, Ajax based tabs, and simple pop-ups or modal windows through programming. Among these, modal windows have certain advantages to do off-canvas designing for web and mobile platforms.

Advantages of Modal Windows

Let me list those advantages in brief just to mention:

  • Modal windows are quite smaller UI element in most of the cases so save space
  • It is floating over the existing page so you need not to create special space for them in your layout, just give links or CTA UI element to pop it up
  • It never requires loading of entire page and simulate the Ajax like functionality so end-users like them so you can consider the modal window as improved usability step in your web designing
  • You can move modal window simply by dragging it on the existing page so offer great convenience for users
  • As modal windows are part of off-canvas design, you can add them in multiple occasions and in as many as you need, of course, don’t exceed here too

Contextual Usage of Modal Windows

No doubt, modal windows are excellent structural UI elements, but they are not applicable on all sorts of content or media so be careful while incorporating in your UI designs. Here I am going to listing and depicting where and when modal windows elements should use and not.

For Lightbox

In these days, our images and videos are of large to extra-large size. Therefore, incorporating them on live web page or UI prove costly and strenuous for layout designers. If we use lightbox for images and videos we don’t have to load or reload web page frequently and can reduce the loading burden until lightbox is not opened. You can use thumbnails of images/videos at linking UI element instead of mere text link or simple button. Thus, you can give ideas of the content before clicking it.

Moreover, you have many options to highlight your content of lightbox in modal window design. For instance, you can blur the background of the rest of screen against the lightbox so your visitors/users can easily see the image details or watch video without distractions. Workings with background of modal windows are easy in styling so you can show your creativity freely.

Another usage of lightbox is converting modal windows into the image galleries. Here you can use auto-sliding or manual next-previous buttons to the lightbox to give best user experiences.

There is much other usage of modal windows in web or mobile UI designing, but we will check them in the next part of this series.

 

Author Bio:

Shoaib Marfatiya is an eminent writer in web development industry and its verticals. He has contributed a lot by throwing lights on very intricate issues of web and mobile development community.

 

Web Development Works A Bit Differently Today

Web Development Project Management
Web Development Project Management

Due to proliferation of mobile devices, internet is ubiquitous and web accessibility is very easy. People use smartphones to do everything including shopping. Therefore, businesses are sincere to have their web presence as well as mobile app in app store.

Unfortunately, latest surveys reveal altogether different things and say that only 50% small businesses in US have web presence. If you think they are busy, not true. They already know the magic of m-commerce and wish to jump into the bandwagon. What is real problem then?

They live in a myth where web development is tough to understand and some failure stories of others intimidate them to go for a website development process. In the past, web developers were discussing about the reference sites with the owners of the small businesses.

 

In the Past

They were focusing on the pleasing the top management or owners of the businesses, by incorporating color, design, content, etc. of the choice of the business owners. In return, businesses were not thinking about the success and contributing factors in the success. They just were taking proud of having a web presence.

 

Businesses Take Interests in Web Development Process

Now, scenario has changed. Businesses are discussing the strategies behind the website. They are eager to know their target audience, behavior of target audience, motivation, likeness, and dis-likeness of the targeted audience through initial research carried by the web development experts.

Now, they are ready to cooperate outsourcing companies to know their businesses and their strategies by providing supplementary information to the marketing and technical teams of the offshore web development company that, they have selected.

 

Businesses Take Active Role in Web Development

In the past, web development process was left on the lower hierarchy post professionals in the small businesses or big businesses. Now, top management is taking personal interests and allocate responsible and capable managers to take active part in the project management software used by the modern web development companies. They would like to interact directly with developers and designers.

Web designers producing wireframes and prototypes of high fidelity using latest designing software on the desktop and smartphones to show their live, dynamic, and interactive wireframes as well as prototypes to their tech-savvy clients instead of mere PSD or JPG or PNG files from the web designers. The live and timely feedback of the businesses making web development a bit differently than they were in the past.

 

Businesses Aware of Time Frame and Budget

Active interest and live interactions remain up to the completion of the website development or web application development project. Businesses are eager to know the testing results in their regular updates in PMS or through instant messengers. They are upfront asking the time line and budgets of their web development project and keep close eyes on the development process.

Many small businesses are smart enough and taking hire web developers packages as advantages and save a lot of money and time for their project. Therefore, I have put title of page as modern web development works a bit differently and create true collaborations as well as maintain partnership like relationships with web development companies in favor of both sides.

 

 

Intro with Lesser-Known but Brilliant Apps for Web Developers Part 2

In previous part 1, we have explored some cool lesser-known tools for CSS and HTML users in particular. Now, in this part, we may have some more robust helping hands for various purposes to ease the life of the web developer community.

CodeKit – Steroid for Web Developers

This application is exclusively build for Mac users and it eases the lives of SASS or LESS lovers along with many numerous scripts such as JavaScript, Stylus, CoffeScript, Typescript, Jade, etc.

It does nothing but compiles the files of SASS or LESS like scripts on the go, optimize them along with your projects images and reload the live page in browser window as readymade product.

 

XRAY – To See Through

During web development, we need to inspect elements frequently and opening browser’s  tool in a separate window hindrance our speed, if element is small and need quick info in code in particular. Therefore, this little bookmark-let XRAY allows us to interrogate a page to look at the box model info in DOM for a particular selected element. You will get all information regarding to the element’s position in DOM and its basic style such as IDs/Classes. This may quick your workflow and cut your mistakes in web programming.

 

Code Anywhere – Multiplatform Cloud Editor

It is true that majority of web programmers or mobile programmers use desktop as their primary code editing device. However, in recent mobile and cloud era, we have to perform many emergencies while we are on the go, whether in bus, train, car or waiting for commuting. In such cases, we have either laptop, tablet or a smartphone in hand and we need some flecks in the code of our patrons in urgency.

Code Anywhere is especially build for platform and device agnostic coding using available browser. It lets you edit your files from underlying services such as FTP, Dropbox, GiitHub, etc. using impeccable tools in your browser in a collaborative manner. It supports wide range of web formats such as HTML, PHP, CSS, JavaScript, XML, etc. so the lives of web developers become quite easy with Code Anywhere.

 

JSFiddle – To Create JS, HTML, CSS, etc.

Many time web programmers are in hurry and wish to see quick results of their code in real-time. Thus, JSFiddle gives them opportunities to get such playground. You have enough alternatives there like JSBin ofr JavaScript optimization, Dabblet for CSS building and SQL Fiddle for prototyping data schema.

There are many tools we miss here, which are known or lesser known like Basecamp for project management, Plagiarism checkers, etc. If you are interested in and need more help, you can contact the web development team of Lujayn any time and from anywhere.

 

Keep Track Of Stacking Contexts and Orders in CSS Using Z-Index

 

Usage of Z-index
Usage of Z-index

Since we have basic understandings of the concepts of Z-index in previous series, we know how to implement them in creative ways in modern responsive web designing. In CSS, we have different contexts in form of different sets of elements. Thus, we can arrange their stacking orders in relative to their own sets of contextual elements. In this post, I would like to mention something more than CSS alone like JavaScript and SASS or LESS.

Z-index for Dynamic Elements

JavaScript is use for dynamic purposes and Z-index can apply dynamically in JavaScript syntax, which is somewhat similar in format. In JavaScript Z-index properties, you have ot use “camel casing” instead of hyphenated CSS properties. Thus, your “z-index” will become “zIndex”. For instance, look at the code example below:

var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9";

Z-index for Sassy Elements

Today in cloud computing age, we are highly depending on SASS or LESS and the syntax of SASS is quite simple for stacking orders. They are call SASS list like:

$elements: project-covers, sorting-bar, modals, navigation;

Here the order of elements are deciding the stacking order in the appearance of the elements. In simple words, from lowest to highest z-index assign to each element in the order. For instance, in above example “project-cover” element will return “z-index: 1” and “navigation” would “z-index: 4”.

It is true that this simplification in order pave ways to add any element in between the other elements and z-index of all elements would automatically updated according to their new orders. For example, if we want to add user-tooltip just after the project-cover element, we simply have to add that class “.user-tooltip” in the SASS order in following ways.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

Thus, entire syntax would be:

.project-cover {
z-index: 1;
}
.user-tooltip {
z-index: 2;
}
.sorting-bar {
z-index: 3;
}
.modal {
z-index: 4;
}
.navigation {
z-index: 5;
}

Fortunately, we can go for many complex layouts using multiple contexts and stacking orders. This is possible due to possibilities to create a new stacking order for each stacking context by giving any children of the element a stacking order specific to its parents. For sake of better understanding, lets add children elements to the one of the main element of the list “modals” in following way.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

Therefore, resulting z-index would generate following ways in compiler:

.modal {
z-index: 4;
}
.modal .field {
z-index: 1;
}
.modal .form-controls {
z-index: 2;
}
.modal .error {
z-index: 3;
}
.modal .autocomplete-dropdown {
z-index: 4;
}

Thus, using hard-core values for z-index like 999 or 99999 may prove fatal in CSS so stacking order creation in SASS may prove beneficial for long-term integrity and collaboration if we save the above SASS file as “_zindex.scss” and call these global orders in your specific CSS files as per needs.

Show Creativity with Z-Index

There are many practical implementations of z-index properties of CSS such as:

  • In case of overlapping tabbed navigation
  • For CSS Tooltips
  • For light box
  • For drop-down menu
  • In photo gallery effects
  • In layered layout enhancements
  • For fancy social bookmarking boxes
  • To create perfect full page background image
  • And in many more innovative ways

Expert web programmers at Lujayn know how to go creatively using latest CSS technologies like z-index to create 3D effects dynamically.

 

 

Understanding Z – Index Property in CSS Part 1

 

Understanding the Z-index
Understanding the Z-index

When we design an image in 3D software, we use three axis values to define its position: X-axis for its horizontal position, Y-axis for its vertical position, and Z-axis for its stacking position or depth in the space. Therefore, Z-axis value define that whether the object will remain at the bottom of depth in space, or on the top of the all objects, or in between the other objects.

No doubt, it is easy to enter these three axis related values in the graphical interface of 3D software, but translating them into the code of any web page or UI designs of mobile app is a daunting task in itself. However, visually computer screen displays only 2D images in real world, but their simulations using various visual techniques like creating objects with borders, background, and its shadows make illusion of third dimension, though it is never – in reality.

Thus, creating stacking orders of such virtual objects become a tricky job for any programmer, and in this series, we will try to understand them with enough code examples too.

Understanding Natural Stacking Order

When we refer simple term “Index” we mean to a list of items in an order begins from number 1 or A to infinite numbers or up to Z. In Index, 2 comes after 1, and 3 comes after 2, like the way.

Now, assume that we put such values in Z-axis of the graphics so object 2 will overlap the object 1 and object 3 will overlap both 1 and 2 objects. Reasons are obvious because we have placed number 2 after the number 1 and number 3 after the number 2 so their over lapping is natural, thus hiding the other objects on the computer screen.

In HTML web page if we don’t put any value in Z-axis or Z-index, there are certain natural factors determine the natural stacking order of the objects on the screen. Those factors are as following:

  • Border and background of the element or object establishes the stacking context on the web page
  • Objects with negative stacking contexts in order of appearance
  • Block-level objects with non-positioned (and their children) and non-floated tags/values in order of appearance
  • Elements/object with non-positioned (and their children)yet floated in order of appearance
  • Elements or objects places as inline elements in order of appearance
  • Elements or objects positioned (and their children) in order of appearance

Therefore, it is obvious that if HTML elements are in natural order of hierarchy that begins with root elements and reaching to children of children creating natural stacking orders and their natural elements like negative margins, borders, and background color as well as opacity. Thus, you can see natural stacking order of the elements without applying any Z-index.

Before diving in to the application of Z-index, I would like to clarify that the natural order in hierarchy can’t change the stacking order of the elements even with Z-index. For instance, root elements can’t come ahead of other elements and children never comes ahead of their parents.

Of course, there are many other rules and conditions may change or prohibit the Z-index functions, but we will explore them in-depth in next part of the series. Web developers at Lujayn are ready to serve you for your coding concept clarifications in broad interests.

 

How to Create and Combine Images for CSS Sprite

We are hard-pressed to make performance optimization our priority whether we are web developer or mobile developer. We need to code HTML and CSS carefully measuring every step of coding by its ensue. Web performance optimization experts are always cling to reduce the interactions between client-server at any cost.

If you dig their data you will find that apart from initial HTML page requests, the most of HTTP requests are made for image/content loading and UI elements loading. Here we can’t eliminate individual and unique images from HTTP requests, but we can think about the small images as frequently and regularly occurring UI elements as well as those images, which are appearing on all pages as theme might be included as our targets to reduce the HTTP request hence improve the page loading performance.

This is in fact, not a big rocket science. If we can combine all small images/UI elements or theme elements in one single large image and optimize them using latest Photoshop techniques, we can do great job to eliminate all HTTP request against this single one. Another benefit is that we can reduce the overall KBs for all images downloading if we go for only one. This technique is calling CSS Sprite in web development community.

However, we can’t implement CSS sprite technique for all sort of images, but icons and button images which are need to change frequently in order to show interactions and dynamism on the web page i.e., on-off status. For instance you want to show one button that is in “On” position before the visitor click it and in “Off” position if visitor has accomplished the clicking action.

single_button
single_button.png

In such conditions, we have almost identical images of these two status so if we place these two images either in vertically or horizontally aligned and make one combine image, we have to shoot only one HTTP request instead two. Well now, question is that how we can make two different calls for two different images with a single image.

Good question, here CSS properties of X, Y positions help us to determine that which image will show when and we can accomplish this by creating two separate functions for both individual image display. In simple words if we want to show “On” status we have to create a div class “On” and another div class “Off”. See below.

<div class=”On”> </div>

<div class=”Off”> </div>

Now, let’s define the functions for these classes such a way that they display our single combine image in two different X, or Y positions in terms of pixels here. But before that you have to do some graphics work in Photoshop or alike tool and set two status of the same button measuring their pixels/spaces.

For instance, if we have both status of button in same size, say 100px we have to create a combine image of 200px and call it single_button.png. Either in horizontal direction (X)or in vertical direction (Y). here we have taken horizontal direction.

Our next step would be code/define two separate functions for two different status. Therefore, the first function would be On function for On class in following ways.

.On {width:100px; height:100px;

Background:url (images/single_button.png) 0 0px; }

This function simply returns the image positioned on the starting point at top and the starting point at the left.

.On {width:100px; height:100px;

Background:url (images/single_button.png) -100 0px; }

This function simply returns the image positioned on the starting point at top and the 100px away in right side direction.

Isn’t it easy?