Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 10 2014

14:00

10 Things Web Designers Should Know to Become a Master

It is truly a nice feeling to be called a ‘Master’ at something. It gives value to your name, talent and  skills. In addition to that, people will begin respecting you because of what you know about the field that you are an expert in. Truly, being called a master adds weight to your name, but there is more to value than just the name. What things web designers should know is vital here.

As a master, you are afforded the respect you want because of WHAT YOU KNOW. No one is ever called a master without superior knowledge and experience in the field he is a master in. He should be knowledgeable, well-versed and well-bruised in battle.

It is in that sense that we have compiled this list of things a master should know. Now for those budding web designers out there, here’s your chance to guide yourself towards achieving the master status. At the very least, because of this list, you will know where to go and which path to take. Meanwhile, for experienced web designers, this is your chance to assess yourself and ask, “Am I really a master?” So without much ado, let’s start the list.

A Master Should Know What the Web is and How It Works

Url address

Photo from Motherboard.vice.com

The Web is the primary reason why you are a web designer. In fact, it is the main explanation why there is a web designing profession in the first place. Without the Web, you have nothing to stand, develop and do. The whole existence of your work lies in the existence of this vast collection of data. Without it, you’re nothing.

That is why, as a master web designer, you should understand how the Web works. He needs to know how it moves and changes, where it came from and where will it go. For it is only through this understanding that you will learn and predict how the trends will go in the future. Mastering what the changes to the Web are each year will at least give you a hint where will it go.

Master this and you will find the world of web design easier to navigate.

Amylove32 of WikiAnswers gives a very good point:

A designer needs to understand the Web from an accessibility standpoint. The designer needs to know what needs to be implemented and design accordingly to enable various accessibility features for things such as screen readers and text to speech software. A designer wouldn’t want to design an entire site in Flash for a website whose audience is the blind folks, because Flash is not that readily accessible by various software. Granted, there are ways to make Flash accessible with smaller Flash components embedded into an already existing website, but it’s not really possible to do so when the entire site is in a Flash file. A designer also needs to understand how the web works in regards to advertising, where appropriate, so that they will understand where it is appropriate and where it is best to put one. Also, it will help with determining how to design space for ads when you know how it will work on the Web through rotation, sizing, popups, or other various methods for ads. Also, when a designer understands much more past the face value of a website (the design), it can open up a whole new set of creative ideas to implement into the website. A designer would have base knowledge of what is possible in terms of design vs.programming.

Now if you’re wondering where to learn how the Web works? Don’t worry, I’ve got you covered. Just click and read the following links:

A Master Web Designer Should Learn HTML by Heart

master-web-designer-02

Photo from pubpages.unh.edu

Despite the continuing debate on whether web designers should learn how to code, I still believe that web designers need to learn basic HTML at the very least.

HTML is the framework of all web pages. It is the basic language a web designer should learn. Learning HTML will allow you to understand basic web page elements and make you design with more usability and purpose. Knowing that this particular HTML element can make the following design will help you reach places!

Imagine the comfort when you know the basic codes:

  • You will be empowered to do a lot of things you haven’t done before, thus, improving your productivity.
  • You can easily handcraft demo websites that you yourself designed.
  • You will understand the limitations and scope of your design, making you more knowledgeable of the things that you could put or remove from your designs
  • You have an edge over other designers who just know designing.

Here’s what you should read:

A Master Web Designer Should Know the Design Process

master-web-designer-03

Photo from hayneedle.com

Web designing also encompasses a little bit of graphic design. With these design schools being very close cousins, a master web designer should also learn the basics of the designing process.

There are basic things you need to know about the design process. As a designer you should understand the following core elements

  • Spacing – It is the distance of each element to another. A good website is well spaced. The spacing should be wide enough for the elements to ‘breath’ and narrow enough to facilitate easy reading and appreciation.

master-web-designer-03a

Photo from shutterfly.com

Regarding this, you could read:

Proportion and Balance –This refers to visual equilibrium, our physical homeostasis. A balanced design, though difficult to master, suggests visual stability. Often achieved in two ways, symmetrically and asymmetrically, proportion can be applied in a web design to highlight elements that are deemed to be important, thus, improving the flow of information. Knowing how to facilitate and control the proportions will help the reader in understanding your website content easily.

master-web-designer-03b

photo from www.gatlineducation.com

For further reading, try these:

Color – Colors are essential elements in web design. It determines the theme or the motif of the whole website. Applying the perfect color will allow your user to relate a certain need or usage to your website. It also helps in the psychological aspect of web design, where a designer uses the colors to influence the website visitor.

master-web-designer-03c

Photo from www.gamblincolors.com

For further reading, try these:

Flow – Refers to the visual movement that guides the viewer through the piece. Flow refers to the correct usage of lines, shapes, colors, depth and hierarchy to achieve a process while viewing the masterpiece. It may sound simple, but flow is very difficult to achieve and could be detrimental or beneficial to the design. As a designer, you can use a lot of tools to ensure correct flow: arrows, facial directions, spacing and perspective.

master-web-designer-03d

Photo from episcopalart

For further reading, look at:

Understanding these graphic design-related stuff will lead you to full awareness of the functions of each graphical element of your design. This will help you facilitate information, attract attention and sustain the number of viewers in your work of art.

In Times of Great Difficulty, a Master Web Designer Must Know Where to Look and What to Do

Let’s admit it, it’s pretty rare that any of our works smoothly run without any bugs during our first tests. Believe it or not, only a few web designers get it with just one try. To cut the story short, a master web designer knows troubleshooting. He knows where to look when something doesn’t work. He knows what to do with basic errors and mistakes other designers commit. Be it in the code, with the design itself or with the logistics of how it’s done, a master web designer knows the solution for almost every problem he encounters.

master-web-designer-03

Photo from Pace.edu

But all these never came in one day. Over time, a master designer developed great skills and patience with web designing. He becomes aware and used to the daily potholes of life and knows how to avoid them. So, when your code doesn’t work, try to troubleshoot it first so that you learn.

For further readings, visit:

A Master Web Designer Should Type Well

master-web-designer-4

Photo from Monsters23

Yes, you read this one right. If you can type really fast, you could save a lot of time and effort because you will be able to encode easily. This makes typing a master skill you should learn. You need not be fast like lightning; you just need to be as accurate as you can be. Imagine having to write codes faster, giving you more time to write other projects and troubleshoot them.

A Master Web Designer Should Know How to Write

master-web-designer-05

Photo from www.g2msolutions.com.au

Writing is one of the more undermined skills developed by web designers. It is completely understandable because it is hardly used by many. However, if used properly, it can attract more clients and ensure a lasting and good-ending client-to-designer relationship. Also, it could improve your branding. Copywriting becomes a must-have skill, especially for those starters who want to kick-start their freelancing careers. They can easily sell their services through a well-crafted statement or email.

For further reading, try

A Master Web Designer Should Have Knowledge about SEO

master-web-designer-06

Photo from JRSwab.com

Search Engine Optimization is a key element in web designing. Mastering SEO will be advantageous to your website because you will be able to attract more visitors if your website appears in search engines. More traffic equals more people communicating equals more people being affected by the content and could mean more earnings.

To learn SEO, try reading these:

A Master Web Designer Should Have Business Sensibilities

master-web-designer-07

Photo from www.pubcentral.com

If you take web design seriously, that would only mean that you need to be paid for it. Yes, you might be working under a company or all by your freelance-self. Either way, you should have business sense. Knowing how a business works will benefit you, for sure. You know when to make decisions, which decisions to make and which risks to take. This will give you independence with your project because you will be fully aware of the consequences present in your line of work. Having business sense will also teach you marketing, advertising and public relations, the tools you will surely need to increase your income!

A Master Web Designer Should Know How to Listen

master-web-designer-08

Photo from customersrock.wordpress.com

You work with clients. Some of those are very stubborn and can cause you a thousand facepalms. Some are so timid to the point where you can’t talk to them. Some are just okay. (And those ‘just okay’ ones don’t come often)

So you want to earn money from your clients? Well, I have a simple secret. It’s LISTENING. Yes, you just need to listen to them. They want something changed in the design? Listen to them first, and humbly suggest input. They want you to do something you think is stupid? Ask them for the rationale first and then you tell them how you really feel.

See? The simplest thing you would ever do is listen. Remember, people want to talk. We all want to be heard, but nobody loves listening. If you, as a web designer, listen carefully to your client, then you’ll teach him to value you more than just an employee. He might even give you bonuses, we can’t tell!

For further reading:

A Master Web Designer Should Always Learn

master-web-designer-09

Photo from www.home-school.com

Last year, flat design just came out of nowhere. We are all keeping up with the trend. But what if we stopped studying? Well, for one thing, we won’t have much flat design web designs today. You see, with web designing being inclined in technology, which is ever changing and changing fast so we need to adapt. Learning is forever in web design. If you stop now, you stop forever. So continue learning from tutorials, inspiration sites and of course, 1webdesigner!

For further reading, try on:

Conclusion

Being a master web designer is never easy. It never was and it will never be. But that doesn’t mean you’ll never dream of becoming one. You could be a master. Yes, you will be. That is after you acquire a lot of knowledge and experience. With patience and proper guidance from 1stwebdesigner.com, you’ll surely have no problem with that!

January 07 2014

05:19

Top Design Tips for Improving Ecommerce Conversions

For three years now I have successfully avoided the Black Friday madness by shopping online on Cyber Monday instead of in stores. It seems that I'm not the only one either. This year many stores, such as Toys R Us, offered Black Friday deals online as well as in store fronts. This allowed me to get the best possible deals since different discounts were available for different items for each of the two events. Because of shopping online, I could easily jump from one online store to the next to compare availability and prices. The result? I bought way too many gifts for my kids this year simply because of the amazing deals available from multiple stores, all from the convenience - and safety - of my own home.

September 28 2013

13:00

How Do You Teach Children Web Design?

For web designers, starting out young is very vital and advantageous. You get to learn without any prior knowledge or biases. We could easily compare teaching web design to a kid to writing on a blank sheet of paper. You can write without being distracted by previous doodles and scribbles. You can easily understand what you are writing because the paper is very clean; it has all the space in the world for your convenience. Hence, like writing in a blank sheet of paper, teaching a kid to design websites could be a very satisfying experience. At one point, for our web designers out there, this is a perfect bonding opportunity with your son, daughter, younger brother or your toddler neighbor. You’ll be able to hit two birds with one stone. You can work while teaching your kid a new cool hobby.

How do you exactly teach children web design?

Don’t forget to share your tips and stories!

teaching-web-design-to-kids-01

Photo by Mary Tsao

The idea of kids designing and coding seems to perplex a lot of people. Some might be puzzled if they can really design and code fabulous websites with all the complicated tools and languages out there. Well, the thing is, this hobby will not go beyond the reach of a toddler’s mind. It will just prepare them for the big thing. It’s like teaching how to ride a bike using support wheels. Nevertheless, this is a good start.

Like any other teaching endeavor, this activity will need necessary preparations. So, here they are:

Condition

The first thing you need to do in teaching your kid how to design webpages is to condition their minds to the work. Expose them to computers, webpages, and the workplace. You need to make them aware where they are and what is supposed to be done whenever they are at that place. Try to show some graphic designs that you created yourself. Let the child ask about anything, no matter how complicated it may seem. Remember, exposure leads to experience and experience leads to excellence. Just let them be there, and observe. Children are naturally curious and soon enough, they’ll find answers. Next thing you’ll know, your child will immerse himself/herself with the work.

teaching-web-design-to-kids-02

Photo by Joel

You could start conditioning their minds by letting them design what they want. Say, they are very interested with robots, then start by creating a robot related mock-up. Tell the child about how every element of the design looks and functions like a part of a robot.

Take them to the workplace. I’m sure when they frequently visit the place, they will soon become curious about what you do. Eventually, you will see them peeking at your monitor and then sitting beside your lap and starting asking questions.

You could also talk to them about web design a lot. Talking breeds admiration and soon breeds inspiration. If they could see that you are having fun with the job, they will give it a try.

Take it Slow

Taking it slow does not only apply in romantic relationships. It also is accepted in teaching kids. As a web design teacher, I am sure you will be pretty much hasty to see your student perform web miracles. But that’s not going to happen. Learning is a process. Start with the basics. Teach them the elements of web design, then the tools, then codes and so on. Just let them digest everything. Remember, you’re talking with a toddler, not a programming god.

teaching-web-design-to-kids-03

Photo by Tiffy

People who have messed with this stage suffered grave setbacks. They rushed into teaching advance stuff to kids and the kids ended up disinterested. Remember that the attention span of a child is very narrow, so might as well sustain it slowly than go fast and crash.

Remember the basics of web design. Wireframing, designing the layout, coding the HTML, CSS, PHP and Java scripts, and then content creation.

For more info, you could visit:

Stoop Down

Let’s admit it, HTML, CSS and other programming languages could be crazy at first glance. In fact, you might be able to see codes as blabbers if you will not look on it. And that’s what you need to consider when teaching a kid to design websites. You need to make things simple for him. Stoop down to his level and make him understand. You need not to sound smart with them, you just need to sound believable. Remember, what kids do not understand, they won’t do.

teaching-web-design-to-kids-04

Photo by Adam Davis

Use simple words. Try to analogize the terms into something that they will find interest in. Example, you may analogize an img src tag to an aim targeted by a bowman. Relate to their likes, interests, movies watched, TV shows and a lot more.  Remember, sounding smart to a kid is still sounding dumb to them. Be at their playful curious and mischievous age.

Equip

It seems implausible that someone will learn web design if he doesn’t have any computer. In fact, that would be comic that  a web designer learn more from books than with sitting in front of the computer for hours.

Like any other hobby, web designing requires tools. Your children will need the same. As starting web designers, you have to equip them with the necessary gadgets or platforms where they can start learning. Buy a computer. Install some basic programming games. Make it fun for so that when the time comes for the kid to roll, the job will be more fun.

teaching-web-design-to-kids-06

Photo by Mark Huber 

Here are some tools and games you could use:

  • Hackasaurus –  (it’s a Firebug tool for kids. This allows them to make changes to their websites instantly. This will help them realistically see the result of the deletion, alteration or addition of a single code)
  • Move the Turtle
  • Hopscotch
  • Scratch
  • Stencyl

Neelie Kroes, Vice President of the European Union and Commissioner for the Digital Agenda visits Kenya

Photo by Neelie Kroes

Here are some tips:

  • Show them the basic elements of a browser and which browsers is recommended.
  • Explain what links, texts, images and other elements are. Be sure to differentiate each to them.
  • Explain what does HTML and CSS do.
  • Orient them with the basic language of the two platforms (HTML and CSS).
  • Orient them with various editors like GIMP, Paint, Photoshop (this is very advanced) and others. Let them start out their thinking caps young!

Conclusion

Web designing is a pretty cool hobby. In fact, it’s a hobby where you could earn some money. Now with you, teaching your kid on how to design websites, you are thereby exposing them to the kind of work they might want to do someday. It gives them the edge above others since he is very familiar with the profession. Thus, you are not only securing a job as a designer, but you also establishing the bond with your child and preparing him for a possible career. And besides, you’ve got nothing to lose with your kids. Everything is a gain.

Don’t forget to share your stories!

September 06 2013

13:00

Teaching Old Dogs New Tricks: Does Age Matter in Learning Web Design?

A lot of people say you can’t teach an old dog new tricks,  that old people have nothing to learn and should suit themselves just watching sunsets and daisies blooming while sitting in an old wooden rocking chair at the porch of the house they bought at the countryside. Most young designers tend to think that older people have no place in web design since the field is technologically inclined in nature thus requiring a more youthful and fresh mind.

I, for one, believe that this notion is not always correct. Older people have their own places in the realm of web design. In fact, they could still learn, given the opportunity, access to information and of course, an unbreakable will. In fact, I strongly feel that they can even attract clients and make this craft their new source of income!

Learning Web Design at Age 30, 40, or 50 – Does it Matter?

old-people-web-designing-02

You see, the good thing about web design is that it chooses no age. Web designing, unlike other fields of employment, does not really constitute a lot of physical stress. It means that web designers need not to be physically strong to design a website. Truth is, you might not even need to move a lot to design the page. (Well, except perhaps, if your back aches at times so you have to stand up). Just an open mind and a creative brain will do.

No matter the age, learning the ropes of web design is still a good option. But how? Now that’s a different thing:

Brainstorming

The first trick to learn about web designing is thinking. Yes, to successfully design web pages, you need to picture it in your mind first. You need to know how it will look like, what colors will you use, what themes are better to go with your design concept, what icons to utilize and many others. Having a forethought on what your website looks like will help you actualize it. Remember that we can only create what we can imagine. So it might be seemingly impossible to design a website accidentally of out of nowhere. The source of all designs is, of course, the mind.

Now, you might be asking yourself, “ I’m 50 years old; how can I possibly think of new designs?! I’m old, my designs would just be retro.”

old-people-web-designing-03

Photo from isadoradesign.com

The answer is pretty simple. Look, observe, learn. Since designing is a facet of art, it is very difficult to teach, like the way technical and scientific fields do. As a student of design, you have to learn the theories and see their actual applications. You need to take out what is important and learn from what is not needed. This skill will surely boost how you work with your designs in the future. From now on, you should start looking at different websites. Browse the Internet correctly. Never fancy yourself in being swarmed by Facebook notifications or Twitter updates all day. Just let them be and think of how you could improve yourself. Visit websites; be inspired.

For further reading on website inspirations, you could look for :

Wireframing

The next thing you should learn is how to put those thoughts into your screen by making a wire-frame or a mock-up. A wireframe is the skeleton of the design. Wireframing enables you to properly place the elements you have thought of. This makes your designing process easier because you already know where to place them. As the design’s skeleton, the wireframe is very much needed for starting designers. There are a lot of wireframing resources on the Internet. You just need to select one and Kazam! You can now start designing.

Image by Michael Lancaster.

Here are a few wireframing links for you:

Designing

After having successfully finished your wireframe, you can now place the elements. In this step, you should remember the design you thought of and try to improve it along the way. You can start placing text boxes, images, texts and other design elements. Most web designers use this step to be able to slice the documents properly. Note that in this step, you should know the basics in color combinations, iconography, logography, typography and other design basics out there. Now this step becomes challenging because you need to use Photoshop, a very complicated software to some.

old-people-web-designing-05

But never fret, you can still learn by reading these:

Coding

Here is another complicated step: you need to transfer the design into code. Writing codes can be crazier than you think. But, provided the proper guidance and remembering the most important and basic codes, it won’t be as hard as it really seems. As a starting web designer, you should first acquaint yourself with HTML and CSS codes since these two are the foundations of a webpage. But as you traverse the world of web design, you will begin to learn other coding languages.

old-people-web-designing-07

Here are a few tutorials:

Releasing your website

So given that you already finished your first ever website, you know that this won’t be the end. Of course, after finishing it, your website should be known by the people. It should be marketed towards every place possible so that future clients might see your work. Now this becomes easy when you have your Facebook or Twitter accounts. Just post and post updates to your website. Tease them. Let them be hooked to your website and until you are successful with that, your website would just be another of those forgotten domains in the world.

old-people-web-designing-08

The Truth

After designing, coding and releasing your very first website, of course you will wait for clients. You might be under the impression that this comes easy, like a walk in the park. But I must warn you that this could be a pain in the arse. Worse comes worst, no one will hire you. You’ll just be frustrated that no one ever noticed your page. All those nights of thinking about design concepts, designing, coding, revamping, thinking again, designing again, coding again and on and on will seemingly be thrown away out of futility. Yeah, that is very frustrating but these are roadblocks you’re supposed to expect.

Some will not hire you because you’re old, and just started designing. That’s true. It happens all the time. Older people are stereotyped as people who have old ideas. People who can’t offer something new, who can’t learn new knowledge. It can happen, yes. But you should remain true to yourself. Never be shy when your clients ask for your age. If they turn you down, start again.

But the thing is, you never stop trying. You revamp and revamp, commit mistakes again and again, be dumped a lot of times and you learn. Never stop learning. Read tutorials, visit websites, observe! Take all the lessons of the past and be mature enough to know which to take and which to forget.

I remember a friend who just started photography. He actually studied Social Sciences. One day, his aunt gave him a DSLR camera. Not knowing what to do with this, and considering he was 34 years old, with two kids, this was not something he should learn. But then, I gave him a photography book for Christmas. He was inspired. He read, read and read, took a thousand photos, even broke one of his lenses. And after a few years, he became a good photographer. Now, he’s one of the best in our town.

The moral of the story is, anyone can learn new tricks if they let themselves learn. In technology, age is just a number. It’s how you think. Young people are open to new knowledge. That’s what makes their ideas fresh. You could do that, even if you’re sixty years old.

The thing I have learned about web design for the past years is, sometimes, you have those roadblocks, where a code seems to be malfunctioning or anything of that sort. Or a design seems to be very unachievable or when time becomes so limited. But if you’ll not look where the error in the code is, or how to work around that design and stretch time, you won’t go anywhere. So better try to fix it.

Conclusion

Web design is a very good field to venture in. Since the Internet is slowly becoming a very potent tool in propagating knowledge, it is very advantageous for a person, notwithstanding their age, color, gender or race, to learn how to build webpages. We all started from the basic. We all made ugly designs. We all committed grave errors. And as I allude from Harry Potter and the Order of the Phoenix: Every great web designer in the world started from what you are now – newbies. If they can do it, why can’t you.

April 11 2013

13:00

An Analysis of Responsive Websites – What’s Hot and What’s Not

Let’s face it folks, everyone in the web design world is chirping away about responsive websites these days. People definitely carry strong views about it and whether you like it or not, you cannot deny the fact that responsive web design has gone mainstream and will continue to progress and expand in the future.

Every client on the web these days are looking for a website that will function just as good on mobile devices as it does on desktop browsers. And come to think of it, the need of today’s modern technological era is to have one working design that is compatible across multiple platforms and devices that includes Netbooks, Blackberry’s, iPhones, iPads, Kindle readers and other smartphones and tablets. It’s inevitable that over the next few years, new gadgets and devices will be unleashed in the market, all having their own respective screen sizes and resolutions.

It seems almost impossible or at least impractical to have a different website version for each of these devices. Some people might opt for creating websites for one platform or device only but they stand to face the risk of losing viewers of other devices.
So what is the solution to this predicament?

The answer is simple – Responsive Web Design

For those who are totally new to the concept, Responsive Web Design is a design technique that thoroughly focuses on a user’s environment and behavior based on the orientation and size of his screen as well as the platform. This methodology integrates a blend of cleverly laid out grids and images combined with the smart usage of CSS Media Queries. What happens is that, when a user switches from his desktop or laptop screen to his iPad or iPhone, the website will automatically itself to fit the device’s screen.

In a nutshell, you could say you are empowering a website with a kind of artificial intelligence which lets it respond to the user’s environment. Responsive Web Design has gained tremendous popularity in the Web Design World as it eliminates the need of having different development and design phases for every different gadget in the Industry.

So if you are looking for inspiration for your next website, you should look at these fresh and stylish responsive design layouts (in no particular order) which cover a wide range of companies and design strategies. Here, we will focus on the mobile side of these responsive websites and try to take a look at what practices make these websites an inspiration to everyone who’s looking to transform their web design to function across multiple platforms and devices.

1. Sony

Sony

Sony manages to get everything right in their elegantly designed website. My favorite part of their responsive design approach was seeing the way their navigation bars change when switching from desktop to mobile devices. On a mobile device, the main navigation menu will change places with the social media buttons. The menus also compact themselves into a single drop down button where the different pages can be accessed easily.

2. Starbucks

Starbucks

Starbucks is unarguably one of the biggest retailers in the world and it was one of the first to make the jump to responsive web design. The minute you switch to mobile from desktop on this website, you get the feeling that they have a sizable team with a substantial budget working on the transformation. The first noticeable thing was that the initial breakpoint arrives at the 769px mark (I assume this has been done to accommodate the portrait orientation of tablets). The best thing about the design is that the navigation adapts itself automatically across different breakpoints. For example, at the largest breakpoint, the top level menu allows you to jump across two levels of navigation for viewing a page.

3. Aids.gov

aids.gov

Aids.gov‘s website is probably the first US government website that has made the switch to responsive web design. I noticed that they use the HTML5 doctype without the use of any additional HTML5 elements like articles, headers or sections. Specific attention has been paid to the website for how it is viewed by users on Windows IE Mobile 7. Aids.gov employs the standard responsive web design approach as the website was redesigned from scratch. The theory lies in working with the smallest screen size and resolution first and then building up the additional required CSS code as the breakpoints are increased. Responsive images have been incorporated to make the website more visually appealing with special emphasis on how the script dynamically recalculates the appropriate height and width of each image based on the screen size.

4. Dairy Queen

dairyqueen

If you want to feast your eyes on one of the most perfect examples of responsive web design, head over to the Dairy Queen’s official website. One of the best things about the design is the fluid slider motion for mobile devices. There is a strong emphasis on how visible the content is to users across multiple devices and screen sizes. The main navigation menu wraps up into a smart drop down box at the first breakpoint allowing users to easily navigate the different food categories. All in all, the website is a visual treat and a perfect execution of elegant and efficient responsive web design.

5. Alsacreations

alsacreations

This is one website that has taken a different responsive web design approach than most websites present on the Internet. Alsacreations doesn’t worry about maintaining all their elements and aspects of their desktop website when a reader switches to tablet or mobile. Instead, Alsacreations drops their image slider from widescreen display to square and even more, when the readers switch to mobile they will not be able to see any of the original elements except for the About button and the Email form in addition to the links for all other elements. This has been done keeping the views of the specific target audience in mind where the creators have kept in mind that most users opening websites from their mobile devices do it to get the brief company information only.

6. Gravitate

gravitate

It wouldn’t be fitting to have a design studio website without responsive website design on their own page, right? Even if you are a lone freelancer, you would want your website to reflect your design skills and portfolio and this is exactly the approach that Gravitate Design Studio has incorporated into their website. They have kept and simple yet elegant design without going over the top on borders or shadowing or other flashy elements. The menu buttons on the top compact and nicely re-arrange themselves when you switch to mobile giving users to access to every page on the website.

7. Spigot

spigot

This is another web design and development company that has flawlessly perfected the art of responsive web design for their website. Going through the pages, you cannot deny the fact that the entire layout has been designed to work without any errors on desktop and mobile devices. You would expect that the shifting and animated icons would lose their touch on mobile devices, but this is not the case with Spigot. Although it would have been difficult to make this design work across all devices yet they have pulled it off magnificently setting a truly inspiring example for others in the field.

8. Disney

disney

Entertainment giants Disney have a website which is a perfect example of coherent designing across all devices and platforms. Smaller resolution doesn’t necessarily mean that you have to compromise on content. The beauty of this responsive design is that the focus stays always on the content that matters. Photos and Videos are the main focus of attention whether you open it on a mobile device, tablet or your PC. However the only drawback from usability point of view on mobile devices is that the navigation doesn’t have direct access in mobile version and you have to make up for it with an extra click.

9. Food Sense

food-sense

Another excellent example of sharp responsive web design techniques is Food Sense. It uses wide screen resolutions to the maximum but when limited by width on mobile devices, it adjusts brilliantly by managing to still maintain its smooth flow and tidy outlook. However, one drawback I noticed with the Mobile version was the loss of the latest Tweets and Facebook plugin which can be seen on the full version under the navigation bar on the side column.

10. Skinny Ties

skinny-ties

There is no better definition of perfect responsive web design execution than Skinny Ties. The design is even more impressive considering that it was a complex website – an ecommerce one. You will find a unique navigation experience across all breakpoints and viewpoint resolutions but the best thing about is its exceptionally responsive handling on mobile devices. Despite the use of the hovering function on touch devices, all visual aspects remain intact.

11. Coca Cola

coca-cola

Soft Drinks giant Coca-Cola made their entry into the fast changing web design world with one of the most complicated responsive web designs I have come across so far. One of the noticeable features is how the content boxes on the right hand side automatically align themselves below the slider so the user has no viewing problems. One drawback I came across however was some minor bugs with the navigation on 240×480 portrait screens.

12. Clean Air Challenge

cleanairhanller

First thing you notice about Clean Air Challenge are the moving clouds in the background. Like many, I expected the website to lose this animation on mobile devices, but amazingly the animation stays smooth and balanced. In addition to that, the website intelligently transforms into a vertical format while still maintaining its other aesthetic elements for example you will lose the images of the main navigation icons when you move to your mobile device but when you scroll down, they will be visible to you in the footer.

13. Contents Magazine

contentsmagazine

Contents Magazine gives one of the best illustrations of how effective responsive web designing can keep the content of the website at the center and front at all times – regardless of the device or platform used. The designers have managed to create a near perfect design where the pre-issued illustrations dynamically wrap around depending on the different breakpoints. The best thing about the design is that a reader will find genuine pleasure in reading the various content on his mobile site as the responsive images adjust themselves and never act as a distraction.

14. Crayola

crayola

Crayola gives us a perfect example of how cleverly used responsive web design can lead to navigation and content being scaled down for users operating a mobile device. When you look at the desktop version, the website has loads of tabs for navigation but when you switch to a mobile device, you get to see only the important ones whereas a user-friendly accordion pops up to accommodate the main navigation bar.

15. Time

time

In this day and age, it has become essential for every news site to have a responsive web design since they have to cater to the needs of a large population of their readers who want access to all the latest news and stories on the go. Time gives us an example of a minimalistic responsive web design approach while at the same time it sets an example for other News websites and companies on how to design grids and menus for easy viewing on a mobile device.

16. Smashing Magazine

smashing

Smashing Magazine sets the example for absolutely perfect responsive web designing where they demonstrate how the original design and content of a website does not need to be sacrificed on mobile devices. The developers of this website have paid attention to accommodating virtually every single screen size and resolution. One of the best things about viewing this website in your mobile device is that the ads simply disappear. The left side bar and the main navigation bar all wrap up into a drop down menu giving a mobile user easy accessibility to all pages of the site. One drawback is the absence of the social media buttons and the RSS feeds subscription button which are only visible in the desktop version.

17. Polygon

polygone

Polygon stands out from the rest of the crowd in the Gaming websites industry combining stunning artwork and responsive web design architecture for a superb display across desktop and mobile devices. But one very obvious drawback is that the social media buttons disappear when you switch from desktop to mobile.

18. Ableton

ableton

Even if you have a relatively heavy sight, Abelton demonstrates that with intelligently written code, you can still deliver a vibrant color combination with a mix of bold imagery across all platforms and devices. With the need to incorporate both video and music, Abelton have managed to do keep the focus on the content while making sure the design is not sacrificed.

19. Burton

burton

Although Snowboard retail giant Burton have incorporated responsive web design nicely for most elements of their page, there is still a lot left to be desired. For instance, the main menu navigation bar on a mobile device is nothing but a simple drop down button. The Board Finder tool is also missing which would have been a great feature for customers who are on the go and who want to find the perfect snowboard for themselves.

20. Abduzeedo

abduzeedo

Although Abduzeedo has a lot going on for itself on the Desktop, it doesn’t quite live up to the same expectations on a Mobile device. For starters, the posts automatically align themselves on the grid which makes them look clustered and improper. Regarding the sticky navigation on the Desktop, it has become more of a trend these days although there are two different opinions regarding this.

The Pros

There are companies that have chosen to design dedicated websites for mobile devices, tablets and desktops while there are others who have incorporated a single responsive web design that can accommodate a wide array of devices accessing it. The most obvious advantage of a responsive web design is that since there is a single website, it is much less of a hassle maintaining it. A single website means a single code for all devices and whenever you need to make a change, you will have to do it only once.

Responsive web designing is also beneficial for owners who are trying to get better SEO rankings as the website offers a single unique URL across all platforms and devices. There are numerous success stories in the industry where companies have reported an increase in mobile clicks to their website by as much as by 50% ever since they revamped their websites with a responsive web design.

The Cons

Providing a truly unique experience across different devices can become a hefty challenge for websites that are increasingly complex compared to others. This means your design team will be spending a lot of hours at the desk customizing and integrating various JavaScript sequences with HTML5/CCS3 code to create a balance between a native-app touch and a desktop-website feeling.

Although Responsive Web design is meant to provide a great experience for every user (and every device) accessing a merchant’s website, the ground reality is not always as such. In some cases, users find themselves having a better experience on Tablets rather than their smartphones and in other cases, it’s the opposite. Sometimes on mobile devices, the text can get too small for a user to read, forcing him to use the pinch and zoom actions – the exact same thing that is meant to be avoided by a mobile website. Getting the navigation absolutely right is another challenge that most designers face for responsive web design especially when it comes to smartphones. There is also a need for a fresh approach for image optimization and content management workflow.

The Final Take

Although widely adopted by a number of reputed companies and merchants worldwide, Responsive Web Design is still in its infant stages. And in spite of the challenges faced, many experts are of the opinion that this is definitely something to look out for in the future. More and more websites are leaning toward Responsive Web Design and if it is planned out properly, we might well see every reputable website as a stunningly beautiful blend of responsive web designing with specific touch elements giving mobile phone and tablet users a truly great experience.

March 09 2013

13:00

Wet Your Pants To Impress Your Client – Get Your Gold Client VIDEO Series

I still cannot believe how many freelance web designers take so much for granted.
Even something as important as first impression.

No, I’m not referring to looking good and impressing people when you go out.

First impression is when you interact with a potential client for the first time.
So many of you do not stress enough about it.

But you should.
You really should even wet your pants if that is what it takes.

Today I will give you another easily actionable step to get your gold client.

I know – “Wet Your Pants” probably sounds too confusing for you.
But it is reality and it can make a massive difference.

”You never get a second chance to make a first impression.”

Wet Your Pants To Impress Your Client

Question: ”So, Are You a Slow Ass, Or Not?”

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl