Thursday 13 November 2014

9 Basic Principles Of Responsive Web Design

Responsive web design is a great solution for our multi-screen problem, but go into it from the perspective of print is difficult. No fixed page size, no inches or millimeters, there are no physical limitations to fight. Pixel Design for Desktop and Mobile is also only the past, as more and more gadgets can open a web page. Therefore, we will clarify some of the basic principles of responsive web design web here to embrace the fluid, rather than fight it. To keep it simple we will focus on the design (yes, sensitive goes far deeper than that and if you want to learn more this is a good start).
Adaptive vs. Responsive Web Design

It may look the same, but it is not. Both approaches complement each other, so there is no right or wrong way to do it. Allow the contents to decide.



Flow:

as screen sizes get smaller, the content begins to play a more vertical space and anything less will be pushed down, it is called the flow. That can be hard to understand if you are used to designing with pixels and points, but it makes perfect sense once you get used to it.



Relative Units:

the canvas can be a desktop, mobile screen or anything else. Pixel density can also vary, so we need units that are flexible and work everywhere. That's where relative units as percentages are useful. So do something 50% width means you always have half of the screen (or window, which is the size of the browser window open).



Breakpoints:

The break points allow the arrangement to change at predefined points, that is, which has 3 columns on a desk, but only one column on a mobile device. Most CSS properties can change from one breakpoint to another. Usually, when you place one depends on the content. If a judgment of bankruptcy, you may have to add a breakpoint. But use with caution - it can cause problems quickly when it is difficult to understand what is influencing what.







Max And Min Values:

Sometimes it's great that the content fills the entire width of the screen, like on a mobile device, but have the same content that extends the entire width of the TV screen often makes less sense. This is why Min / Max values help. For example having a width of 100% and the maximum width of 1000px mean that the content will fill the screen, but do not go over 1000px.






Nested Objects:
remember the relative position? Having a lot of elements based on whether it would be difficult to control, therefore, packaging elements in a container that holds more understandable, clean and tidy manner. This is where the static units as pixels can help. They are useful for content that you do not want to scale, such as logos and buttons.








Mobile Or Desktop First:

technically there is not much of a difference if a project starts from a smaller to a larger (mobile first) or vice versa (first desktop) screen. However, adding additional constraints and helps to decide if you start with mobile first. Often, people start from both ends at once, so really, go and see what works best for you.




Web Fonts’ vs System Fonts:

you want to look attractive or Didot Futura for your site? Use Webfonts! Although it will be awesome, remember that everyone is unloaded, and the more you will have, the longer it takes to load the page. System fonts, on the other hand are lightning fast, except when the user is not local, it will use a default font.




Raster Images vs. Vectors:

Do you have a lot of details and some fancy effects applied its icon? If so, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or gif to vector the best option would be a SVG or source icon. Each has some advantages and some disadvantages. However, keep in mind the size - no pictures should go online without optimization. Vectors on the other hand are often small, but some older browsers do not support it. Also, if you have a lot of curves, which could be heavier than a bitmap, so choose wisely.






Monday 10 November 2014

What Makes A Good Website?

With now over 600 million websites in the world, I think it would be fair to say that it is now essential to most businesses today have a website. Having an online presence is not just letting people know you are out there, but are also reaching new and potential customers.

Today it is very important that you make a lasting impression with your clients and if you like technology or no escaping the fact that your company will be judged on their website.

As your page is the page that your viewers will land on its important that you have a clear and simple message of what you do and the services offered. This will also help the search engines to rank your website for keywords and phrases appropriate.

Many websites fail to get the message, make sure that your visitors have a complete understanding of what your website is about and remember one thing. Your website is often the first impression that potential customers have of your business to ensure that the first impression is good.
Navigation and User Experience



good navigation Even though you may be familiar with the place where your pages on your website that you should keep in mind that other users viewing your site is not known, so it is important to keep your simple and structured navigation, many users who view your website may not be internet savvy so make sure you have an easy to use navigation bar. The most used navigation bars are on the top (header) of the website and the many cases the addition of sub-pages to your top navigation is the best way to organize information into categories, the menu system is also known as a drop down menu.

By keeping its structured and using clear, easy to use navigation is providing a better experience for the user pages and therefore increase the chances that the user is interested enough to read the contents of your site.


content Your good content is one of the most important elements of your website and increase your customer base. Use the content to sell to your potential customers well and content clearly describe their services and how their services can benefit the client. Use good grammar and make sure that your content is error-free, spell checkers are free, so I really do not think anyone should have the excuse to put a website live misspelled. It is always a good idea to have someone proof read your content, in the business of the difference between good and bad grammar errors / spelling could cost this important contract, so make sure you take the time and people you will realize this.

It is very important that you include relevant keywords in your content that are relevant to your business industry, as this will help the search engines to rank your website. In addition to the content of these keywords should also be present in their headers, page titles and meta tags. This tactic is called Search Engine Optimization (SEO), but I will cover this topic in more detail in another article.