Profile

Cover photo
4,417 followers|254,268 views
AboutPostsPhotosVideos

Stream

1stwebdesigner

Shared publicly  - 
 
Retina-fy: Creating High Density Retina Displays for Your Website High density retina displays or screens, like Apple s Retina Display, have lots of pixels in a small space that it is almost impossible see the pixelation, thus, displaying smoother images and texts. Although Apple offered it first on the market, manufacturers have been releasing similar devices recently to compete with Apple. When using Retina Display devices, you can see that other sites online appear blurry. This is because of the low-resolution images being stretched to fill the screen that makes the site look disgusting. A Retina Display scales 1px to 2px, making the size double. The key to making a Retina Display-driven site is the quality of images that s being used. The image has to be at least two times larger so to make it clearer when viewed on Retina devices. For instance, if you want to display an image with a width of 400px, then the original width of the image must be 800px. Otherwise, if you try to stretch this out in Photoshop, the image will look blurry. To give you
1
Add a comment...
 
11 Minimalist Office Setups Less is more This quote is becoming more sensible, especially for designers who have adapted the minimalist design approach. Over the years, minimalism, or the act of putting away irrelevant things to make space for the relevant ones, has become a regular part of every modern design principle. As web designers, we too, practice the same maxim. In fact, we even want to make this philosophy for living our lives. We strive to achieve such state that we even want our office setups or work space to reflect what we believe in. For one, having a minimalist design in your office setup has its advantages: It makes us focus more on work than goofing around It lessens the distraction and makes you think that you have fewer tasks to accomplish It is beautiful to the eyes You can actually make a small room bigger That is why, we collected some minimalist office setups for you to get inspiration from. Here are they: Black Egg Chair and Modern Computer Desk This simple set up is a space saver! With 
1
Add a comment...

1stwebdesigner

Shared publicly  - 
 
Creating a Responsive Email Template As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet. Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not. So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go. For your reference, read Campaignmonitor and Emailology. To give you an idea how to create a responsive email template, let’s go ahead and 
2
1
Elsie Whitelock's profile photo
Add a comment...
 
10 Scientifically Proven and Human-Tested Ways to Become Happier In this growing age of technology and consumption, many people have forgotten the simple, ancient secrets of being happy. People have forgotten the simple ways to become happier. Depression is one of the most common mental illnesses. In order to solve this massive problem, more often we are reminded of the long-known principles of a happy life, like spending enough time outdoors and having a good night sleep. Perhaps they aren t enough to make a modern human happy since scientists keep on searching more extraordinary ways to boost happiness. Today, let s look at the weirdest scientifically proven things that can make us happier. 10. Watch sad movies Haven t you ever thought what is it that makes people watch tragic movies in moments when they already feel down? Aren t these movies supposed to make us even more miserable? Thanks to researchers from Ohio State University, our weird affection to movies that make us sad finally has a scientific explanation! Actually, they can boost our ha
3
2
Димитър Николов's profile photoOrhan Veli Firik's profile photo
Add a comment...
 
3 Secret Steps To Dramatically Improve Your Freelance Lifestyle – Even If You’re Just Starting Out Where is the boundary between doing your work and the tasks you love? Are you doing what you always wanted to do? Do you want to do more, become more? When should you learn to become more productive and implement routines in your life? And when should you simply quit your existing job and do something else that makes you happier? This simple article will help you to be more aware about where you currently are as well as aid you to understand where you want to go. Three simple steps are all you need, three steps I am using in my own life to be more, do more and become even more fulfilled! I invite you to participate and share your experiences, in fact, I will give away two books Play It Away and Power of Habit to the most genuine sharing in the comments. Are you ready to hack and experiment with your life, do the things you never thought possible, and question things you never questioned?! Let’s challenge the status quo! Why These Three Steps Are So Crucial To Create Dream Freelance
6
2
Mar Quiroga's profile photoJuan Carlos Alonso Gamboa's profile photo
Add a comment...
In their circles
11 people
Have them in circles
4,417 people

1stwebdesigner

Shared publicly  - 
 
Create a Sliding Navigation Menu in CSS3 and jQuery 4 Easy Steps There are many ways to create a navigation menu for the Web. One of the most popular navigation menus is the accordion look drop-down navigation that slides up and down, showing its sub-menus when toggled. In this tutorial, we re going to build a sliding navigation menu using CSS3, along with some jQuery codes to manage the sliding animation. Let s get started. The Final Output Download Source Files View Demo Using Font Awesome (Web Icons) For this tutorial, instead of using ordinary .png icons for our sliding navigation, we will be using Font Awesome. There are a lot of advantages in using web fonts or web icons: There are variety of icons to choose from You can save money; you don t need to pay for the icons You can save time; you quickly use CSS to incorporate them in your design Faster load time Web fonts/icons automatically keep up with the new versions of web browsers Web fonts/icons are SEO-friendly There are two ways on how to use Font Awesome in our design project. The first 
8
2
Luca Rossi's profile photoGene Rice's profile photo
Add a comment...

1stwebdesigner

Shared publicly  - 
 
30 Stunning WebGL Examples and Demos in Action WebGL(Web Graphics Library) was released  on the Web early last year. Its ability to use HTML5 Canvas elements to generate graphics dynamically made it easy for web designers and developers to create smooth 2D and 3D effects. Here are some WebGL examples and demos you should look at. WebGL is a branch of OpenGL based on OpenGL Embedded Systems (ES). It is a JavaScript API for drawing 2D and 3D graphics in a compatible web browser of an HTML5 canvas without the use of plugins. This Javascript API is managed by the consortium of non-profit technology Khronos Group and work together with Mozilla Foundation. Since early 2009 they develop prototypes and deploy such technology. WebGl is still growing, although most of the modern browser support it, it may need to work on old browsers. In this article, I ve come across quite a lot of examples and demos of WebGL that can enhance your understanding about this new technology. So sit back and relax, pull up your latest browser and check out th
2
2
Todd Smith's profile photoJens Fendler's profile photo
Add a comment...

1stwebdesigner

Shared publicly  - 
 
Creating Shapes with SVG : An SVG Tutorial Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage. In the past, the only image format that was supported by all browsers was the GIF, an image file developed by CompuServe. Then came the JPEG image file, which offered lousy compression without the loss of details, but the size is really small compared to the GIF file image. After some time, the aim for advance 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999. What is SVG? SVG, which stands for Scalable Vector Graphics, is an XML-based vector image format for the Web. Unlike GIF, PNG and JPEG image file formats, SVG is scalable, which means that no matter how you scale or enlarge the image file, the quality will still look good. As an XML file, SVG can be created, customized and integrated with other W3C standards such as DOM and X
3
Add a comment...
 
What is the Future of Online Education? Think of the job you have now and imagine losing interest in it. I love writing, but for the sake of this example, let’s say, I’m already on the brink of giving up. I’m 24 years old, turning 25 in a couple of months, and I want to start fresh. Do something different. But at this age, enrolling in a college to earn a new degree is impractical, both money-wise and time-wise. That leads me to consider online education as part of my learning. It s not always sunshine and rainbows. Very few people talk about this issue for the sake of keeping appearances, but everyone will encounter it at one point. Including you, no matter how much you love your job right now. Why do people want to start fresh? There will come a time when people will start hating the job they are doing, no matter how much they loved it. The skill they provide is no longer needed by the world, obsolete skills like mastery of Windows XP, mobile Flash development, and many more. Financial stability Starting from Scrat
2
fawzieh k's profile photo
 
I am hooked, but am still waiting the conclusion of this subject care to elaborate? Thx!
Add a comment...
 
Be Inspired with These Bold Colored Websites Big and Bold – one of the growing means nowadays to catch the viewers’ attention. Bold colored websites are fast becoming a trend because of its ability to catch the attention of the readers due to their size and boldness. That is why websites that adapt bold texts using catchy taglines have become more and more prevalent.  How do designers achieve this? In the present trends, if you want to make a blindingly unforgettable statement, you need a few things: A saturated color scheme which is bright enough to catch one’s interest without blinding him or her An awesome and probably mind-blowing image (a photograph or a graphic illustration) A uniquely remarkable tagline. Those, however, are not easily achieved. To attain a beautiful, bold color design, you need to think it through. You also need some design skills and a great deal of guts. Because there is no single general rule in choosing colors for your design, I will just lend you some inspiration! This is to help you exercise
5
2
Gajanan Pandit's profile photoAlessandro Scaltritti's profile photo
Add a comment...
People
In their circles
11 people
Have them in circles
4,417 people
Contact Information
Contact info
Email
Story
Tagline
1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers.
Introduction
1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design,graphic design, tutorials and inspirational articles.