what font size should I use for my Website

The Responsive Website Font Size Guidelines
Everything else I have to say about mobile web font sizes is basically a guideline:

Use a body font size around 16px. You want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance)

For secondary text, unimportant labels, and captions, use a size a couple notches smaller – such as 13px or 14px. I don’t recommend going down just one font size, since then it’s too easy to confuse with normal text. When text is less important, you want to style it so that you’re clearly communicating the lesser importance.

The gold standard will be viewing your designs on an actual device. I can’t recommend this practice highly enough, since the feel of an mobile app design on your laptop screen is way different than when you’re holding it in your hand. As a beginning designer, I was shocked almost every time I opened on mobile a page I designed on desktop. Font sizes, spacing… everything was off. So use Sketch Mirror or Figma Mirror or whatever app makes sense for you, but view your designs on-device.

Finally, for any other questions you have about mobile web font sizes, refer to the Material Design guidelines which are clear, consistent, and ingenious (though not concise). The older I get as a designer, the more convinced I am that even though Apple has all the design cred, Google is currently walking all over them. But don’t tell the design snobs I said so.

Desktop Web Typography Guidelines

When picking a base size for a desktop website or web app, you can break down most designs into one of two types:

Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction – perhaps just clicking a few links.

Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc. There may be plenty of text on the page, but it’s not stuff you read straight through like a book.

Text-Heavy Pages
Long story short, for text-heavy pages, you want larger font sizes. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

16px – absolute minimum for text-heavy pages
18px – a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decade-old monitors.
20px+ – may feel awkwardly large at first, but is always worth trying out in your design app. The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.

The original article was published on learnui.design

6 Tips How to Apply Information Architecture in UX Design

The final issue in the set devoted to information architecture offers the collection of tips for designers to effectively apply IA in web and mobile interfaces.

Being a good designer means constant learning various sciences and methodologies helping to improve professional skills. One of the essential studies recommended to designers is information architecture. In our previous articles, we’ve defined the essence of IA and described the efficient techniques assisting designers in the workflow. We discovered that information architecture is believed to be a foundation of efficient UX and UI design. Moreover, the appropriate IA may become a compelling tool for designers when all its principles are considered. Today’s post continues this theme unveiling useful tips for designers on IA implementation.

What is information architecture in UX?
Information architecture in design can be defined as a science of structuring content of the websites, web and mobile applications, and social media software. The science aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. This way you can form a skeleton of a layout ensuring the sufficient user experience. Information architecture is a guarantee of the high-quality product since it reduces the possibility of the usability and navigation problems. IA skills are essential for professional designers since UX and information architecture go hand in hand on the way to create a user-friendly product with clear navigation system.

Keep product goals in mind

Definition of product goals is a core stage which influences every team working on the project, be it developers or designers. So, before you start building the website information structure, you need to learn what your client expects from the website or mobile application. To achieve the product vision and see the whole picture, the product goals should be established. They should respond to the product strategy, be understandable to all the members of the creative team and achievable. Awareness of the goals gives a clear idea of what the tasks are and where to start. When the goals are set, designers can agree on the content elements and the purposes with the clients so that they could avoid possible misunderstandings resulting in additional work hours in the future.

Conduct user research
IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. To learn more about potential users, designers are recommended to conduct user research. It’s a process of collecting information about the consumers of the product via various techniques. When the data is gathered, the design team analyze it and work on the optimal solutions which will make the product user-friendly and attractive.

User research helps to dive deep into the details of core target audience to understand their needs and psychological peculiarities. Considering preferences of the users, designers are capable of creating a user-friendly product that will stand out of the crowd and draw potential customer’s attention.

Consider cognitive psychology principles

To comprehend the nature of the visual perception and the factors affecting users’ attention, designers learn the сognitive psychology principles. It is the science studying information processing that goes inside people’s minds. Cognitive psychology experts state that there are various ways of data perception and different factors influencing people’s attention.

ased on the cognitive psychology studies and principles, designers developed many techniques helping to create powerful content. In article Psychology in Design, we described some effective psychological principles often applied in design including Gestalt principles and recognition patterns. The former theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups according to their similarity, continuation, or closure. Speaking of recognition patterns, people visiting a website or using an application are expecting to see certain features associated with the definite kind of product. That’s why designers apply various

Plan the navigation system
Information structure and navigation are two essential components of any digital product. In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content.

Navigation of a digital product is based on the information architecture, so it’s vital to make sure it reflects and supports IA, otherwise the product may be unsolid. Therefore, designers are recommended to plan the navigation system while creating information architecture of the product.

Don’t forget about visual hierarchy
To organize and prioritize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. Its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. This allows users to see where the needed information is so that they could navigate easily.

Things to consider

The science of information architecture may seem too complicated and demand much efforts but when you learn its basics and start applying them to design projects, you see how useful it is. Summing up the set of Tubik articles devoted to this theme, we’d like to single out a few main points.

The original article was published on tubikstudio

The 10 Skills You Need to Land Your First Front End Developer Job

If you’re looking to change careers or learn new skills to upgrade and enhance your current career, tech skills are as close as it gets to a “no brainer.”

Starting with the Big Three of higher pay, creative work, and a flexible schedule, there’s a pretty massive list of reasons why tech is an attractive field to work in.

But what does it mean to “work in tech?” When you’re new to the idea it feels like there’s a lot of jargon to cut through.

This recent article did a great job clarifying the different types of web development, but for now, I want to focus on front end developers . To sum it up, front end developers code websites using the building blocks of HTML, CSS, and JavaScript (more on this shortly). They’re the ones who take a design and develop it into a website that works.

If you’re looking to break into tech, front end development is both a straight ahead and versatile way of getting there. You’ll have a specific base of skills that’ll make you attractive to employers, but one that’s broad enough to let you find an employment opportunity that works for you. Trust me, there’s no shortage of demand for front end development in a variety of jobs and environments.

For some of you, this thumbnail might be enough to get started on your own coding odyssey. But if you’re like me and have an easier time moving forward with specifics you can visualize, an overview of the skills you’ll need for front end development might be helpful.

A quick scan of current job listings for front end developers shows that there’s a clear and common pool of skills employers are looking for. As I’m writing this, the first three front end developer job listings I pulled up on Glassdoor.com have a lot in common.

All three (One North Interactive, En Masse Entertainment, and Aha! Labs) share the previously mentioned HTML, CSS, and Javascript in their list of qualifications. You might have already figured that part out. But there are some less familiar terms floating around in the listings as well. Version control? Preprocessing platforms? Frameworks?

These are all terms that will become super familiar to you as you start learning tech skills, but to ease you in, here’s a digestible list (and description!) of 10 essential skills every front end developer needs.

1. HTML/CSS

I know, these two terms keep coming up. There’s a good reason, though. You won’t find a single front end developer job listing that doesn’t call for (or assume) proficiency in these two languages.

But let’s take a step back and look at what HTML and CSS are.

HyperText Markup Language (HTML) is the standard markup language used to create web pages. A markup language is your way of making notes in a digital document that can be distinguished from regular text. It’s the most basic building block you’ll need for developing websites.

CSS (Cascading Style Sheets) is the language used to present the document you create with HTML. Where HTML comes first and creates the foundation for your page, CSS comes along next and is used to create the page’s layout, color, fonts, and…well, the style!

Both of these languages are absolutely essential to being a front end developer. Simply put, no HTML/CSS, no web development.

2. JavaScript/jQuery

Another MAJOR tool in your front end developer toolbox is going to be JavaScript (JS). Where HTML is a markup language and CSS is a style sheet language, JS is the first language I’ve mentioned that’s a bonafide programming language. What’s the difference? Where HTML and CSS determine the presentation of a page, JS determines the function.

In some instances a very simple website or web page is fine, but for situations where you need interactive features—audio and video, games, scrolling abilities, page animations—JS is the tool you’ll use to implement them (though as CSS evolves, it’s starting to handle a lot of these duties as well).

One cool thing to keep in mind about JS is the existence of libraries like jQuery, a collection of plugins and extensions that make it faster and easier to use JS on your website. jQuery takes common tasks that require multiple lines of JS code and compresses them into a format that can be executed with a single line. This will be a big help when you’re coding with JS. Unless, of course, you don’t like saving time. 😉

3. CSS and JavaScript Frameworks

Wait, we already covered CSS and Javascript, right?

We did, but they’re both such a big part of front end development that a lot of other skills you’ll need are going to build off of them.

CSS and JavaScript frameworks are collections of CSS or JS files that do a bunch of the work for you by providing common functionality (think logging into a website or searching a blog). Instead of starting with an EMPTY text document you start with a code file that has lots of awesome JS already in it.

Frameworks have their strengths and weaknesses—don’t we all!—and it’s important to choose the best framework for the type of website you’re building. For example, some JS frameworks are great for building complex user interfaces, while others excel at displaying all of your site’s content.

To make things even MORE fun you can use frameworks together. It’s common to pair Bootstrap with another JavaScript framework like AngularJS. The content is handled by Angular, and the look & feel is handled by Bootstrap (with some CSS sprinkled in, too).

Since you’ll be using CSS and JS all the time in your web development, and since many projects start with similar style elements and code, knowledge of these frameworks is critical to being an efficient developer.

4. CSS Preprocessing

Yes, another skill related to CSS!

CSS on its own, while essential, can sometimes be limiting. One of these limitations is that fact that you can’t define variables, functions, or perform arithmetic operations. This is a problem when a project grows in scale and code base, as you’ll soon find yourself wasting a lot of time writing repetitive code to make changes. Like CSS (and JS) frameworks, CSS preprocessing is another means of making your life as a developer easier and more flexible.

Using a CSS preprocessor like Sass, LESS, or Stylus, you’re able to write code in the preprocessor’s language (allowing you to do things that might be a huge pain with plain old CSS). The preprocessor then converts that code to CSS so it will work on your website.

Let’s say you decide to tweak the shade of blue you’re using across a site. With a CSS preprocessor, you’d only have to change the hex value in one place instead of going through ALLLL your CSS and changing the hex values everywhere.

5. Version Control/Git

Almost halfway through the list, and we’re finally to a skill without HTML, CSS, or JS in the name.

Still totally related, though!

After all your hard work marking up with HTML, styling with CSS, and programming with JS, you’ll have gone through a number of revisions in your development.

If something goes wrong along the way the last thing you’ll want to do is start over from the beginning. Version control is the process of tracking and controlling changes to your source code so this won’t happen.

Version control software—like open source stalwart Git—is a tool you’ll use to track those changes so you can go back to a previous version of your work and find out what went wrong without tearing the whole thing down.

As you might imagine, this a skill that you (and your prospective clients and employers) will be very happy to have.

6. Responsive Design

Remember the other day when you only used one device to look at a website? Yeah, me neither. The days of desktop (or even laptop) PCs being the only way of viewing websites are so far gone that I won’t date myself by talking about them.

These days we use any number of computers, phones, and tablets to look at web pages. Ever notice how these pages adjust themselves to the device you’re using without you doing anything on your end? This is due to responsive design. Understanding responsive design principles and how to implement them on the coding side is key to front end development.

One cool thing to keep in mind regarding responsive design is that it’s an intrinsic part of CSS frameworks like the aforementioned Bootstrap. These skills are all interconnected and so as you learn one you’ll often be making progress in the others at the same time.

7. Testing/Debugging

From a website for your mom’s dog walking business to an international site for online banking, bugs are a reality of the development process. In order to keep things moving you’ll need to test your code for bugs along the way, so the ability to test and debug makes the list of essential skills for front end developers.

There are a couple of different testing methods for web development. Functional testing looks at a particular piece of functionality on your site (like a form or database) and makes sure it does everything you’ve coded it to do.

Unit testing is another method. It tests the smallest bit of code that’s responsible for one thing on your site and examines it individually for correct operation.

Testing is a big part of the front end development process, but fortunately, it’s another area where there are frameworks to help you. Programs like Mocha and Jasmine are designed to speed up and simplify your testing process.

8. Browser Developer Tools

Users will ultimately be interfacing with your websites through a web browser. The way your site is rendered by these browsers is going to be a big part of whether your work is successful or not.

Similarly to the testing and debugging mentioned above, all modern web browsers come equipped with developer tools. These tools allow you to test and fine tune your pages in the browser itself, in ways specific to how the browser is interpreting your code.

Specifics will vary from browser to browser, but browser developer tools generally consist of an inspector and a JavaScript console. The inspector allows you to see what the runtime HTML on your page looks like, what CSS is associated with each element on the page, and also allows you to edit your HTML and CSS and see the changes live as they happen. The JS console allows you to view any errors that occur as the browser tries to execute your JS code.

9. Building and Automation Tools/Web Performance

You might be seeing a pattern that HTML, CSS, and JavaScript are the three primary tools for front end development. Meanwhile, most of the other skills either help make those tools more efficient or help test your site and fix mistakes. The trend continues here with building and automation tools and web performance.

You can code the coolest website ever but if it performs sluggishly on the user’s end it won’t matter. Web performance speaks to the amount of time it takes for your site to load. If you’re having problems with performance times there are steps you can take to improve them such as optimizing images (scaling and compressing images for peak web performance) and minifying CSS and JavaScript (removing all unnecessary characters from your code without changing functionality).

Carrying out these tasks that lead to better web performance can be another front end time-sink, but that’s where building and automation tools come in. Programs like Grunt and gulp can be used to automate image optimization, CSS and JS minifying, and other web performance chores. In the ongoing quest for efficiency, it’ll be in your interest to get familiar with them.

10. Command Line

In a lot of ways, the proliferation of Graphic User Interfaces (GUIs) into computing was one of the best things to ever happen. Who wants to type lines of esoteric commands onto a dead screen in order to get around a machine? It’s a lot easier to point and click on a lively, interactive menu.

GUIs can be alluring when it comes to web development and coding as well. And they’re often fine and handy. But an all-purpose GUI is going to have its limitations for some specific applications. There are going to be times when you’ll need to open a terminal on your computer where you can enter typed commands (command line) to get what you need.

It’s the difference between your computer only yielding what’s available on the surface and being able to get what you need by digging in with your bare hands.

Even if the majority of your work is still done through a GUI, you’ll add serious cred to your front end skills if you have a mastery of the command line.

SOFT SKILLS!

As easy as it is to get fixated on the new, fancy sounding skills you’ll need in a tech career, there are some more familiar skills that you shouldn’t overlook.

Back to the front end developer listings on Glassdoor.com, the One North listing asks for—before any tech skills:

“A respect for and admiration of the culture, process, and craft of web development, as well as an understanding of the client experience, appreciating what it takes to form long-term client relationships.”

As well as:

“A knack for teamwork and working with people across agency capabilities.”

And:

“The written and verbal communication skills required to articulate effectively to your Technology Team.”

At the end of the day, these kinds of soft skills are just as essential for tech as they are for any other industry. Don’t forget to keep honing your overall professionalism as you head down your road to a new career in the coolest, most innovative field going! And check out the infographic below for an overview of the skills you need.

source:https://skillcrush.com/2017/03/20/front-end-developer-skills/

List of Top 8 Trending Software Technologies in 2018

Trending Software technologies vary every year in IT field according to its need. As a Software engineering professional or a fresher, it is important to know about the Top Trending Software Technologies in 2018. Hence after surveying the latest trend happening on top websites like Quora, Forbes, Techgig and Techlearning here are the complete list of Top Trending Software Technologies in 2018.

List of Top 8 Trending Software Technologies in 2018

Amazon Web Services

Amazon Web Services (AWS) a cloud computing platform which provides the mix of services such as IaaS, PaaS and SaaS which helps in cloud infrastructure, Platform, and Software. This secure cloud services platform helps your business grow by providing the power, database storage and content delivery. AWS Cloud Service Platform is launched in the year 2002 by Amazon.com. Amazon built this platform to handle its own retail application.

BigData Hadoop

Apache Hadoop which is commonly called as Hadoop or Big Data Hadoop is an open source framework developed by Apache Software Foundation. Big Data Hadoop is a trending field in Information Technology, even NDTV news states that Big Hadoop Jobs are in High demand. Companies like HCL, Amazon, IBM are among the top recruiters of Big Data Hadoop Developers.

Data Science

Data Science is the hottest field in the Information Technology today. To become a data scientist you need to be highly qualified and must have in-depth knowledge of Mathematics & statistics, Programming skills and Business knowledge. As programming skills, a Data Scientist must have knowledge of Python, Java, C/C++, Big Data Hadoop, SQL.

Python Programming Language

Python is simple and easy to learn high-level programming language which is also object-oriented like Java. The easy to use syntax makes Python the trending software programming language. Once you have learned it, then definitely you’ll fall in love with Python because of the features, productivity it provides and also Python had high-level build in data structure which also combines with dynamic binding & typing makes it enchanting.

Android App Development

Android App Development is an every green trending field in IT. To be statistical according to the survey result from appbrain the total amount of Android app published in Playstore is exceeding 50,000 per month. You can create your own Android app using different programming languages like Java, Python and many.

Automation Testing

Software Testing is the process of verifying and validating an application and ensuring the quality, performance of the software or application. Hence there is always a need for Manual, Automation testers in the IT Industry because of the huge growth of Software Development field.

Angular 4 & NodeJs

Angular 4 is the latest version which overcomes few issues of Angular 2. It is easy to build a web-based application with the help of this Angular 4 platform. This whole series of Javascript frameworks from AngularJS, Angular 2 and Angular 4 delegates the developers to create the web-based application which suits for Mobile, Web and for the desktop.

source:https://www.credosystemz.com/trending-software-technologies-2018/

css-types

There are four ways to interact styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS – The <style> Element

You can put your CSS styles into an HTML document using the <style> element. This tag is placed inside the <head>…</head> tag.

<!DOCTYPE html> 
<html>
<head>
<style type = "text/css" media = "all">
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline CSS – The style Attribute

You can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only.

 <h1 style="color:blue;margin-left:30px;">This is a heading</h1>

External CSS – The <link> Element
The element can be used to include an external stylesheet file in your HTML document.

<head>   
<link type = "text/css" href = "style.css" rel="stylesheet" />
</head>

Imported CSS – @import Rule
@import is used to import an external stylesheet in a manner similar to the element. Here is the generic syntax of @import rule.

<head>  
<@import url("style.css");
</head>

CSS – Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

CSS Selectors
CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector
The element selector selects elements based on the element name.

You can select all

elements on a page like this (in this case, all

elements will be center-aligned, with a red text color):

p {
    text-align: center;
    color: red;
}

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External style sheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019