Category Archives: CSS Tips

Web design trends for 2016

Just like any other field there are trends in Web Design. Some will change with the passage of time and some will go with out any change.

2015 has been an interesting year for Web Designers. Now let see how 2016 will be for Web Designers.

  • Designers takes inspiration from mobile devices  and started simplifying navigation and hiding it under a hamburger menu. It’s a trend that’s also crept into the desktop version of websites. Placing navigation under a hamburger menu makes a site cleaner and most people are now used to with this. But this isn’t something that works for every site and can reduce discoverability. This is not good for e-commerce sites and news sites, where discoverability of topics and items is critical to the experience.
  • 2016 will also the year of Responsive Web Design. More companies will switch their website to responsive design. So, this year we will see more responsive designs with innovation.
  • Some Web designers design only in the browser. There are benefits to this: cuts development time down, allows you to see the limitations and reactions of the actual browser with regards to the design.  It’s common for Web designers to know how to code at least the front end of websites (HTML/CSS/JS), so designing in the browser makes sense to them.
  • We should all be thanking Google for its  free font collection. Because of the company’s library, utilizing a great looking typeface on a limited budget can be achieved. With varying styles, weights, families, and the like, there is sure to be quite a few typefaces that are suitable for any website.
  • More sites and apps are going with the full-screen forms and input screens instead of it existing in only one small part of the site. Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page. This trend will be follow in 2016.
  • Carousels seem to be everywhere. They can add visual interest and reduce clutter. But few things to consider like carousels are bad for SEO, because there is no HTML content in carousels. The lack of content means that it’s difficult to get meta information into a page. Most sliders though contain headers that are wrapped in H1, and these change when the slider does and as such, devalue keywords within them.
  • There has been a bit of a revolution over the past twelve months in the form of the adoption of Google’s Material design as a basis for UI presentation and development. This trend reflects the move toward smartphones as the principle and first device used to access the web, over and above the desktop or laptop computer. Expect to see the Material appearing in user interface design across the web, much as happened with Bootstrap in the past.
  • With responsive design pretty much taken over the Web, expect flat design to continue to be a dominate design aesthetic throughout 2016. Not only will there be websites that launch with flat designs, those sites who’ve already embraced the flat design trend will look to make things even flatter.
  • In 2016 I can expect more use of Java Scripts.  JavaScript can be highly functional in that it can be used for many things that other languages can’t. It can help you create great load screens, for example, and other styling elements such as sliders, adding functionality. but, JavaScript can slow down a good site and, users won’t stick around if a site is too slow. There’s nothing wrong with JavaScript. It has a lot of great uses and allows us to do some nifty things on the web. But, you should reduce the amount of JavaScript you use so that it doesn’t make your site painful to view on a mobile device.

 

© copyright https://www.linkedin.com/pulse/web-design-trends-2016-farhan-khan

Advertisements

5 tips for writing better CSS

True, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

In this article I want to talk about 10 different tips you can write proper and clean css code as well as to start improving yours, as quickly and efficiently as possible.

1. Start with a CSS Reset

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, or my reset css 😉 just use something. It can be as simple as removing the margin and padding from all elements:

* { margin: 0; padding: 0; } 
html, body, div, span, p, form, label, fieldset, legend, table, caption, tbody, tfoot, thead, tr, th, td h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, a, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, strong, em, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
text-align: left;
vertical-align: baseline;
font:Tahoma, Times, serif;
}
body {line-height:1.5;}
ol, ul {list-style: none;}

2. Comments your CSS block

You should keeping organize your stylesheet clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code. For example, this is how I structure my stylesheets:


/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently   
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one  

3. Use Useful Naming Conventions

Name your elements based on what they are, not what they look like. For example, .xyzPart is much less versatile than .commentPart, and .postContent is more limiting than .header.

4.Stay consistant

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet. Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines:

div.header { float: left; width: 100%; }  
div.header div.column { border-right: 1px solid #ccc; float: rightright; margin-right: 50px; padding: 10px; width: 300px; }  
div.header h1 { float: left; position: relative; width: 250px; } 

It works for me because 3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent.

5. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.
This:

h1, h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

much moreefficient than this

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.
You can accomplish all of this:

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

with only this

h1{
margin: 10px 30px 15px 15px; 
font: bold 12px Arial;
} 

It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.