1stwebdesigner

---

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know Posted: 27 Jan 2014 06:00 AM PST Many have been searching for cross-browser styling tips that can help them solve their browser compatibility problems. After all, creating a website can be easy but developing one that looks the same on all browsers can be tough. For many years, browser compatibility is one of the hardest parts of web development. As a web designer/developer, it's always our goal to give our website visitors better experience on viewing our site. Having a consistent look on every browser leaves a visitor good impression of the site. If you’ve been developing websites for a long time you might agree with me that IE8 and the Jurassic lower versions of IE are the one of the web designer’s and developer’s nightmare. Given this fact that, there are still people using these versions of IE to view websites. This is just one of the issues that we might encounter in developing a cross-browser website. The good thing is that we can redesign a site or initiate some good practices to make them compatible and look the same on every browser. In this article, I will show you some cross-browser styling tips and tricks to make your website development easier. Use CSS Reset Let’s face the fact that web browsers interpret different default styling for HTML elements. Some browsers have different interpretations towards values for styles like margin and padding. To fix this issue, adding a CSS reset at the start of your style sheet is a good practice. This will reset all CSS elements. This would also mean that it will start from a zero base, thus, giving you complete control to your style sheet without worrying about the browser’s CSS issues such as margin, padding and alignment. Eric Meyer has a good set of CSS rules to do this. You might also want to consider Nicolas Gallagher’s Normalize.css, a modern HTML5 ready alternative to CSS resets. After you’ve linked the CSS rules to your markup, you can now make sure that you have a starting zero base CSS on every browser. Validate Your HTML and CSS Before running or publishing your website, it's a good practice if you validate both your HTML and CSS using validators as it will correct some minor errors that might give you some problems in the future. You can use W3C HTML Validator and CSS Validator. These are trusted validators by W3C but feel free to use your own tools if you have another resource of HTML and CSS Validator that works for you. IE Conditional Comments The Jurassic versions of IE had been giving web designers and developers a headache when it comes to compatibility issues. As an answer to this issue, Microsoft developed conditional comments in their browser that allows linking a style sheet that will be interpreted by IE alone. Check out the code below. The code below will target all versions of IE. ! <--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /!> <[endif]--> The code below will target a specific version of IE. ! <--[if IE6]> <link href="ie.css" rel="stylesheet" type="text/css" /!> <[endif]--> Use Vendor Prefixes W3C standards are continually evolving. It’s good practice that you know certain drawbacks if a browser supports a particular CSS property. Styles like rounded corners, drop shadows and gradients can now be implemented using CSS alone without the use of images. Using vendor prefixes will save you a lot of time without worrying if the browser supports your CSS. Check out the following list of vendor prefixes. 1. Safari and Chrome (-webkit-) 2. Firefox (-moz-) 3. Opera (-o-) 4. Internet Explorer (-ms-) As an example, let us use the transition property along with vendor prefixes to target specific browsers. -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; Clear Your Floats We all know how to float elements either to the left or right by using the style property float. By default, if you only just use onefloat along with a non-floated element, it will just flow along the side of the element you floated. But that is not the issue here; most often we float divs to the left and right and wraps them with a container or wrapper. Consider the images below. This image shows what we are trying to achieve. But instead our divs end up like this image. This issue can be solved by simply clearing the float using the CSS property clear and adding a value of both. That means both floats will be clear. Font Size Measurement Although there are no fixed thumb rules what font size measurement to use, I would recommend using ems (em) and percentages (%) since ems and percentages are based on the default preference set in the user’s browser. Most people use pixels or points, which are measurements based on the resolution of the screen. This is always fixed. Regardless your preference, this How to Size Text in CSS article would help you learn more about text in CSS. Always Test Your Website Using Different Browsers You might feel lazy testing your website in different browsers, thinking that it looks good in the modern browsers, believe me, I’ve been there but not doing it might give your website visitors a bad experience. Using an emulator like spoon plugin might save you some time but it is highly recommended if you test your creation directly on the actual browser itself. Code Simply Coding simply makes the whole workflow easier and faster. What do I mean? Just by using simple elements in building up your website makes the browser’s task a lot easier to read your site. As an example, instead of using tables or paragraphs in creating navigation you might just use an unordered list to form the navigation. In creating a responsive site, instead of using tables, divs works perfectly. Keep it simple, organize your codes and name them properly. Believe me, this will save you a lot of time and headache when you run into some problems. Polishing Off There are more good tips and tricks out there about cross browser compatibility but this should guide you on the basic foundation in creating a firm cross-browser experience. It’s a good idea taking some time to read your codes and check them across different browsers. If you know some more tricks and tips that we’ve not listed here or you have some comments or suggestions, I would love to hear from you. Please free to drop them in the comment section below.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

1stwebdesigner

---

10 Portfolio Websites that Will Make You Say Wow Posted: 24 Jan 2014 06:00 AM PST Why is it necessary to have a portfolio website? Is it a requisite for all designers? Here are 10 portfolio websites that can lead you to the answers. “Why haven't I thought of that?” Well, those were the first words I uttered when I saw this collection of websites that will make you say wow. I thought it would be great if I will be able to share these to you. The answers to the questions above are very simple. It is necessary for a designer to have a portfolio website because it showcases your talent and provides your future clients with an idea of how good you are. If a prospect client wants to hire you, he will of course want to know what your previous projects are and how efficient you were on doing it. They will conduct research (Everybody does. Who wants to throw off their precious bucks for people who can't deliver, right?) to have an idea about your professionalism, efficiency, speed and talent. If you don't have a portfolio, where will your clients look? So, why don't we begin looking at these and in the end, just be awed and say Wow! The Toke Viewing the projects in this one is as simple as viewing them in a photo browser. With minimal audio and keyboard shortcuts, this portfolio website is professional looking and sleek. Alex Abramov The designer used the big background photo to serve as map-like design where points in the city were made to represent the page you will be viewing. Zuppaduppa This doodle-looking portfolio looks both cute and magnificent. Using Parallax to enable horizontal scrolling, this portfolio simply amazes me. Insidepiet Talk about being creative and interactive! This website rocks. With the cool background music and the transitions, it proves to be one amazing portfolio. M-1 Design Mouse-responsive motion, this website eats it like a piece of cake. Using clever and surreal designs with great transitions, you’d want something like this. IE Studio Simplicity is the main reason behind this website’s beauty. Nothing beats the minimalist. Check out the artistic use of images both of which are photographic and computer generated. Harlo Some things are more beautiful when naked. This website is a great manifestation of it. It is the simplest form of  being simple. No flashy effects, just the off-white colors blended with the occasional red will surely equal to an amazing portfolio website. Vitor This mixed the simplistic and minimalistic designs with great effects. Eyegasmic, this site is easy to understand and navigate. Guided Creative This one amped up retro designs with the flat design trends creating a bright blue beauty. R Leonardi Love interaction? This one interacts with you like a video game. With its clever use of animation and transitions, you’ll find yourself browsing to the last page just to see how it finishes. Conclusion Portfolio websites like these serve as inspirations for web designers to continue to hone their talents. Having a great portfolio website is almost tantamount to a great work. Of course, if you are able to design projects which are eye-popping, it is both necessary and obvious that you should have a great portfolio to hold them off. WOW! Right? What do you think? Further reading: 6 Tips for Budding Designers to Earn While Building a Portfolio 7 Mistakes that Force Potential Clients to Dislike Your Portfolio Creating an Effective Online Portfolio: 40+ Tips, Tools & Inspirations 10 Easy Steps On How To Create A Good Photography Portfolio 10 Outstanding Tools to Build Portfolio Easily and Professionally

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

1stwebdesigner

---

Get ‘Layed’: What You Need to Know about Photoshop Layers Posted: 22 Jan 2014 07:00 AM PST Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe's carrier software has been the one-man-wrecking-machine software that solved most of our digital problems. photo from Wallpaper Stock.net Having said that Photoshop is a must-have software, it is also equally a must to master it. And that entails a great deal of effort. With all the tools, options and features of Photoshop, which – until today – is continually developing, it is very difficult to start training with the software. But never fret, you have us. What is 1stwebdesigners for, right? Photo from Deviantart One of the probably gazillion things you need to know about Photoshop is its layers. The importance of mastering this feature is, of course, pertinent for a web designer as a web design, before being coded, is most probably created through Photoshop. Layers are free and independent elements in a Photoshop work space. They can be manipulated in scaling, color, effects, position, opacity and more. Layers often represent separate elements that a designer wants to tweak or customize. In the realm of web design, layers play an important role. They are used to represent the design elements of a webpage. They are made to imply a text box, an image, a background, the content and a lot more. Photo from Designcontest.com Most Photoshop users will agree to the notion that one of the key features of a software like Photoshop is its good layering options. Here are some of them that you need to know. Fill and Opacity Fill and opacity are two different things. Although they are commonly confused as the same terms and often connected as a single terminology (i.e. Fill-Opacity), they are completely different from one another. Fill is an option of a layer to customize how many percent of the background color is seen. This option is commonly used for shapes . On the other hand, opacity is the option that dictates how transparent the whole layer relative to the other layers in the design. The difference between the two is that the Fill option does not affect layer styles. For example, you put a stroke in the image. Notice that when you ticker down the fill percentage, the stroke is still seen unlike if you lower the opacity percentage, you see the whole image together with the layer styles is made transparent. Grouping This is one of the most rudimentary learnings a Photoshop user should have when it comes to layers. Grouping really does not do a lot of things in the design per se. Despite that predicament, the importance of grouping is never left behind. You see, grouping helps in the organization of layers. Aside from naming them properly, which is also very useful, grouping layers improves the workflow because you don't need to search the whole design looking for a single pixel. Just find where it belongs and voila! You have it! photo from elated.com Masking Masking is the act of hiding particular portions of the layer to show the layers below it. This technique is a very important skill in a designer's arsenal as it is a good way of combining multiple photos in one seamless image. Photoshop masks can be used at a very large amount on a single layer. According to TutsPlus.com, you can use up to 11 Pixel Masks and 11 Vector Masks! If you want a good tutorial, better visit this. Photo from Photoshopsupport Photo from Amazon news Selecting Supposed you're slicing up particular photos in a design. You have a lot of options to choose from. Either you click the layer you want to copy or cut, press CTRL+A and paste it wherever you want to, or use the lasso or quick selection tool. But you have a third option. That is quick selecting it by pressing CTRL + click the image desired. Layer Styles Layer styles give you the liberty to select specific options to enhance the design. There are some options to tinker on: General Blending – here you can choose the Blending Mode. The Blending mode option allows you to customize background and image relationships and how to complement, contrast or both. Aside from that, you could also choose from advanced options where you are allowed to reduce the opacity of the layer as a whole or per channel. Bevel and Emboss – this option gives your layers a 3D feel as they tend to pop out of the design. The Bevel and Emboss option add depth to the design, making it more ‘realistic.’ In this option, you could select from contouring options like inner bevels, emboss and more. Stroke – this is one of the most used options in the menu. Stroke adds an outline to the main image. You can choose the opacity of the stroke, the color and its blending options. Inner Shadow- gives you a subtle darkening of the layer. Inner shadow also provides depth. (Outer Shadow is the opposite of this) Inner Glow – adds a shiny and feathered yellow design in the outline of the image within. (Outer Glow is the opposite of this) Color Overlay – fills the whole image with a chosen color. It will totally forget what's inside the fill. It will surely fill every spot of what you wanted it to fill with. Conclusion Layers are one nasty piece of business to study. It requires a lot of time and patience to do this. With the importance of layers highlighted, it is equally important to study them well. The key to this lesson is that you should try using them and commit mistakes. It's where we really learn- from our mistakes. So next time, you'll be dealing with layers, stand up and be proud that once in your life, you got 'layed' here at 1stwebesigner. Again, pun intended.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

1stwebdesigner

---

From Fabric to Flat Screen: How Color Combination Theories in Fashion Can Help a Web Designer Posted: 20 Jan 2014 06:00 AM PST One cannot deny how color combination theories in fashion can help a web designer. You see, clothing and web designing have a lot in common. Both require a great deal of effort in trying to balance purpose and beauty. The two fields also require a great amount of effort in making quality designs become tangible products. In clothing, the design should be transformed – using scissors, thread, fabric and needles – into a tangible, comfortable, wearable and fashionable outfit. Meanwhile, in web design, the designer should be able to create – using images, text boxes, codes and typefaces – a browsable, comfortable and usable website. These two, being common in some ways, also possess the similar techniques in creating elements. Fashion designers should have a very good sense of color combination. They make the most out of every hue to make their clients feel good about themselves. In fact, designers take loads of time to decide which colors they are going to use for such creations. They employ careful selection and consideration of visual and analytic aspects to make their work more appealing to the eye. For, in the end, fashion, clothes and dresses are still visual. Photo by: Michiel Schuurman Photo by Madame Herve Photo by Amelie Hegardt It is in the same principle that a web designer must select his color scheme. Like fashion, web design is mainly visual. The eye is the main processing unit of the body which perceives what is flashed on the screen of the computer or mobile device. A good web designer knows which colors combine and which do not. The designer must remember that these combinations suit different occasions and circumstances. Experiment with color schemes at colorschemedesigner.com. What if you haven't studied web design or multimedia arts? What if you are just an ordinary blogger who has an extraordinary dream of getting a lot of readers? What will you do? Fear not. The secret is simple: stand up, go to your dressing room and  look at your closet. Try to look at your clothes. Which fabric fits the color of another? Which combination fits an occasion? Which of these gazillion fabrics compliment each another? Choose and answer these questions. Then, transform those fabric colors into flat screen ones . Photo by Andrea of www.udandi.com But, in case you are too preoccupied, (or in semantic terms, too lazy) to open your dresser, here are some few friendly reminders: 1. Occasionalize Here is an example: unless it's Christmas, or your company color dictates so, do not mix green and red. Don't make your website look like a Christmas present. Red and green mix well only when it's Christmas time (or when the company or client dictates so). People might think of your blog as a Santa's Elves Labor Union website. Your readers might appeal that they got the wrong present last year. To avoid this, apply color theories. Learn the techniques on using colors to fit the theme of your website. Having a theme gives you identity. It's something that all products, either on the Web or in the real world would want to attain. If a person recognizes you because of the color of your site, then you have nothing to worry because your website can be popular before you know it. The thing is, you should learn how to occasionalize. Fit a color for the occasion or the nature of the website or blog. Example, if you manage a bank website, use blue colors as they suggest trustworthiness. If you are running a spa, use brown or/and green. If you are into a restaurant business, better use orange, yellow, and red. If you are a car dealer, use black. Fit every color, hue and shade for every occasion. But if you are designing for a Christmas-themed website, better retain the red and green colors because there’s no other more appropriate colors for Christmas than those. Web designing is like dressing up. If it ain’t fit the occasion, might as well go naked. 2. Be a Fame-whore! Be a fame-seeking-madman, in a good sense. Get attention. Crave for it. Be crazy about it. Use your colors to attractively get subscribers. Like in clothing, neon colors of red, orange, yellow, purple and green attract attention. It suggests urgency. It is very useful to convey important messages. In the context of web designs, you could use such colors in your buttons which require attention. Hook your prospect readers by attracting their eyes first. Provide a good bait. Getting their attention is one way of making them read your blog. The formula is simple: get them to read a part of your blog. If they like that part, they might as well read every entry. So that's why you should able to get their attention! Use bright colors for your subscribe buttons, read-me pages, or any page or button that will require the attention of your would-be readers. Remember: Bright is right! Just be careful with this and don't make your page look like a book with Stabilo highlighters all over. Too many neon colors are blinding, irritating and uninteresting to read. 3. Background-foreground agreement If in clothing, you need to consider your skin color in selecting hues for your shirt, we have the seemingly same rule here. When designing web pages, consider the text-background relationship. Now, most beginners have a hard time on this. That is the reason why we see a lot of photos superimposed with texts and the text becomes unreadable. The background-foreground agreement rule generally says that you should make the foreground text readable. The background is just a designing tool. It just decorates the main thing. Photo from Pamela Geller’s Book Stop the Islamization of America  You should always remember the general principle: light colored background to dark colored text and vice versa. But if you are using pictures as background and the color is varying, it is most advisable to use solid-colored shapes as background superimposed to images. Photo by Rudolph Musngi Conclusion Web designing and fashion have the same roots. They both come from the early concepts of visual design. It is very obvious that they should possess the same philosophies- and color combination is one of them. The ability to produce a design which has complementing colors is something a designer should possess. He should be aware that the colors that he will use will affect, either visually or psychologically, the quality of his work. Knowing, understanding and applying the rules of fashion in web design is very beneficial. Yes, learning the theories and concepts that make colors coordinate with each other is a very tall order; and yes, it’s a big struggle but it’s a battle that you should win. All of these hard-fought troubles in learning new things will make you a better designer. You’ll produce better designs, and in turn, more money. So, start learning today! Though the learning process may be,you should out-battle this struggle. You should be able to pick up the important lessons of design and put them in your arsenal. And these will matter to you in the end.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610