Tutorials, Tips & Tools

How to choose and hire a good web designer

read post

This article is a first one we write for the clients. Until now our blog was only publishing educational materials for web designers & developers. But why discriminate? 🙂 So, you have a digital project in mind. You go to Google, dial “web designer” and get….roughly 226,000,000 results. That was helpful and not discouraging at all, wasn’t it! :). How… Read more »

CSS shapes. Images in rounded corner square rotated to 45 degrees (rhombus).

read post

Lately there is a certain trend in web design for using images in geometrical shapes. Shape in-trend changes about once a year. We all remember rounded corner squares, then circles, then hexagons and octagons that used to contain Team members’ happy faces:), right? A Dribbble player rightfully popped up a question: what will be trend of 2014?

I think, it will be a diamond rotated to 45 degrees, with rounded corners. Let’s go ahead and make one with CSS.
demo

Introduction to OOCSS and Responsive Behavior. Designing a one page site with Simple Responsive Template.

read post

breezi_placeit

Working on web projects I used to run into 2 problems time and again. First problem applies to any web design project: as the project grows bigger, CSS gets messier. There was obviously a need for some kind of better system of writing CSS. Second problem applies to responsive websites. The problem is that solely CSS media queries are not enough to make a website truly responsive. Truly responsive website will not only look, but also behave in a responsive way. That means – if we will simplify things a lot – it will serve different assets to different devices. In this tutorial I would like to show you the solutions to those problems, which I think are awesome: OOCSS (stands for Object Oriented CSS) and Responsive Behavior continue reading….

Simple Responsive Template. New freebie from Prowebdesign.

read post


Simple Responsive Template is a continuation of YAMB (Yet Another Responsive Boilerplate) project. This tutorial on YAMB v.1 will give you a short overview of responsive design concept and idea about why YAMB was created. In this article we will mainly speak about how  to use Simple Responsive Template and how it is different from the YAMB v.1.

Fanurio – great activity management, time tracking, and invoicing tool for small web design companies and freelancers

read post

Small Web Design companies and freelancers have three major concerns regarding the management and control of their activity:

  • Project Management
  • Time Tracking
  • Invoicing

There are hundreds of software applications which include these three components. And for this reason it is very difficult to choose which is right for you. You have to test the applications – at least briefly, which can become extremely time consuming. And the most frustrating thing is to spend half a day setting up some new tool only to find out that it lacks some small, but important feature, and ultimately doesn’t  fit your needs.

We were in the same situation, so sharing our experience and recommending the software we’ve finally selected will save you quite a bit of time.

SASS gradient bars with reflections

read post
SASS is great! Not only because it makes writing CSS easier, but also because it forces you to be more organized in your design work. If you make glossy progress bars in CSS like ones in the picture, you tend to use at least 3 color shades: two for gradients, one more for border. But with wonderful SASS color functions you immediately begin to think: can I optimize it somehow? Yes, you can! You can use just one color to create both gradient bar with border and its reflection.
In this tutorial I will show you how to create colorful bar charts with just one color variable for each. Well, one and a half :).

How to deal with :hover on touch screen devices

read post

Are you planning a web project? Not sure what mobile strategy is right for you? Read our short educational article that can help you make the right choice. This article is a small case study about dealing with hover effects on touch screens. As you know, :hover behavior doesn’t exist on touch screen devices. So when you… Read more »

Roundup of useful tools for custom styled Google Maps

read post

Small collection of tools and tutorials to get you started with custom Google Maps API v3. Fast and easy tutorial about adding custom Google Maps to website – gMaps API v3 Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it… Read more »

CSS3 rounded responsive drop shadows & glows

read post

And by rounded drop shadow we mean this effect:

All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects.

Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead… Read more

Good article on CSS Flexible Box Layout Module from SmashingMag

read post

CSS3 Flexible Box Layout Explained …This is invaluable for flexible layouts, Because it means that your padding, margin and border values will always be honored; the browser will simply change the width of the elements until they fit the parent. If the parent changes in size, so will the flexible boxes within it… W3C working… Read more »

Yet another boilerplate for responsive (mobile) web design. YAMB.

read post
A new version of this template – YAMB v.2 – is available. Please use the new version. This version of YAMB is not maintained anymore.
YAMB v.2 tutorial and download page


YAMB   is a small set of tools and best practices that allow web designers to build responsive websites faster.
YAMB includes features that are requested by the clients all the time:

  • Fluid grid.
  • Drop-down menu with possibility of unlimited sub-levels or/and mega subs.
  • For small screens drop-down menu is automatically converted into select box.
  • Responsive image slideshow with captions.

Screen ruler with 5px step for quick mobile / desktop prototyping and resolution testing

read post

I have made a super-simplistic “tool” which helps you resize your browser to any width x height in pixels (range 2580px x 1650px). What’s the use of it? Gives you total control: resize to ANY resolution you want, not just presets. You can test the document you’re coding locally on your computer, without even having… Read more »

Quick web design tip. Mind your @media queries while coding WP child themes

read post

New WordPress default theme, Twenty Eleven, is responsive. Which makes it really awesome:). Don’t forget about this while writing child themes. Quick tips to save you some time and head scratching (“doh, why is it happening on mobile now?” kind): Copy at least @media (max-width: 800px){} into child theme’s CSS file As soon as you… Read more »

How to create glossy gradient menu bar in PhotoShop and then recreate it only with CSS3 and HTML5 (no images)

read post

This tutorial consists of two parts. First one explains how to make glossy red menu bar (smartphone style) in PhotoShop. Second part explains how to recreate this bar in CSS3 without using any background or border images. The tutorial is for people who are regular users of PhotoShop and are on friendly terms with CSS3…. Read more »

Sortable design portfolio with WordPress 3.0, tags and jQuery

read post

If you have many design projects, it is good to let your clients sort them by some criteria like type, industry etc. This tutorial tells you how to build sortable portfolio like PROWEBDESIGN’s. We will also cover how to optionally add jQuery animation effects to the sorting script. PROWEBDESIGN portfolio is made with WordPress 3.0.3… Read more »

Designing websites with scope in mind (or Why PROWEBDESIGN got its version #6)

read post

What to consider, when you design a portfolio site for yourself? In one word – the SCOPE. The scope outlines the general aims and goals of any project. So, what is the scope of designer’s portfolio? WHAT TO KEEP IN MIND WHEN DESIGNING YOUR PORTFOLIO WEBSITE THE “HUMAN FACTOR” How new are you to the design? How large is your portfolio?