Responsive Web Design Video Tutorial: A simple responsive web design video tutorial from Frank Waive a Nigerian Web Designer/ Developer
Treat People nicely, you need them
We leave in a social world, no Man is an island as they say, as humans we need one another to survive. One reoccurring phenomenon with most of the developers/designers I’ve met is the ego problem, most developers treat their client and colleagues ( web workers: web developers and designer) as ignorant, this does not produce any kind of positive result.
As a web worker, you learn from both your clients and other developers. On the client side, I learnt a lot about online marketing from a client, a medical doctor for that matter! At first it was intimidating when I didn’t have a clue of what she was saying, she introduced me to services like aweber and mailchimp. Through her I found out of their free packages and free HTML email templates that come with them, I walked out of her office that day with more knowledge of email marketing and free HTML email templates.
You also need to treat other web workers well too, make friends where possible, like the saying goes, iron sharpens iron. Relating and Sharing ideas with other web workers makes you a better web worker, it keeps you more informed and more connected.
You may be interested this article: Blogs I read everyday.
I remember meeting and becoming friends with Ebiwuari Williams in 2007, I learnt web design in Photoshop and slicing for design through him, without meeting him, it may have taken me more time to discover such a technique. One year later, we were both learning CSS together. He went on to become a java programmer working for Tenecee, while I majored on php and asp.net. I can recall meeting romeo who introduced me to joomla, reading smashingmagazine which introduced me to WordPress, I also got to know about smashing magazine from another developer I met onetime, too bad I can’t recall her name.
Apart from the many benefits ive had from physical relationships with other web workers, I’ve also benefited immersely from online forums and blogs of ther web workers like css-tricks.com, noupe.com, designm.ag, sixrevisions.com, hongkiat.com etc, I’ve Discovered lots of stuff from these blogs and their authors, in my opinion, making and keeping friends in web workers is important!
See yourself as ignorant
Yes, ignorant, and I mean it, ignorant. As soon as you start getting comfortable with what you think you know, you’d probably reduce your desire for more knowledge and possible stop learning altogether forgetting the fact that the web is never and would never be stagnant. There are new discoveries and new trends everyday and by that it’s an understatement. If you work on Or in the web, you could very easily get outdated in just one year, and as soon as you get outdated, you stop getting new clients and possible start loosing old ones.
I still remember learning web designing in early 2002, I remember the guys I was with, we learnt to use tables for our site layout, a couple of years later, we heard of divs and CSS, we all didn’t like it at first because it was different and so it seemed hard, but some of us worked towards knowing the concept and quickly adapted it, others never did, today, 95% of all those who never wanted to learn the new stuff are out of business while most of the remaining 5% just buy themes online which they use for their clients.
Work on your public persona
Have you ever googled your name or your email address? Do it, you’d be surprised how much of yourself you’ll find! These days when I meet people for the first time, I google them immediately, if someone emails me for a project or anything else, I also Google their email address, I visit their Facebook, twitter, Pintrest etc profiles, to see what they’ve been up to! Don’t ask me what I find! The result of such a research helps me decide if I want to work with you or be your friend, it determines our relationship. With this knowledge, I advise you do research on your online persona, modify or delete past post, comments where necessary and possible, where it’s not possible, contact the admin of such a forum or website to do it for you.
You also need to work on your physical persona, pick your calls, reply mails, SMS, tweets, pings etc where necessary. When you meet people, clients or not, leave theme with a positive impression about you, this will at least give you one big thing you will forever keep needing, REFFERALs!
You need to become a business person/Entrepreneur
Three things about entrepreneurship, the product you have to sell has to be fantastic, it has to have fantastic marketing and you have to have fantastic financial management skill and guess what, there is no one person in all the world who can do these three things excellently well. The best of people have two of those three characteristics, there is no one person who can make it, sell it and manage the money, and this is another reason why you need people, why you must treat people well, why you should have some kind of outsourcing or partnership.
“You’ve got to be a good seller to be able to convince a company/individual to build a website. It’s not an easy job at all. The easiest way to go is to sell them the benefits they’ll derive and not the Jquery or animations you can do for them. This was part of the initial challenge for us as we quickly noticed that we needed to transition from web developers to business men. No one wants to know how good you are until you can prove how your offering can benefit their business” -CEO Unotech Media.
Metro seems to be the newest thing as regards design principles, and for most people, that makes it the in thing. This UI culture is important to both designer and developer. Its bold, beautiful and minimalistic in nature.
As new as Metro design may sound, it’s not so new at all in its entirety! It’s been there all along, you’ll definitely may have seen it at least on one old billboard, flyer , railway station (yea railway station). Both Print and Digital media have applied the Metro design principles long before the phrase metro design and the concept of Windows 8 was ever coined! In its simplest form, Metro design is an upgraded principle from the age old minimalistic design principle.
Simply put, Microsoft has improved on minimalistic design and called it Metro!
Metro Design Language Guidelines
Light, Clean, Open, Fast (Fierce Reduction)
Metro Design believes that the UI be clean and simple but above that, the user should have a fast, smooth and simple experience. The User should not have to go through multiple steps to perform a simple task, Users could simply touch, hold down, swipe, double tap to achieve simple task. Users should also not be made to go through many pages or phases to get this done, developers and designers must clean up the flow, process or the phases the user has to follow to accomplish task in apps, in summary don’t just simplify the look of the site, simplify the application flow.
Content, not Chrome
The concept of Metro design centers around flatness, such that borders, drop shadows , complex backgrounds and anything else of such is forbidden in metro, regardless of how minimalistic your design may be, the use of any of these would unmetrofy (you know what I mean right?) your design. Metro design principle also requires the use of whitespaces, lots of whitespaces. Icons used in metro design are also minimalistic like everything else. Microsoft makes good example of this by just using single colored icons per application such that in all of windows 8, the icons are either white or black depending on your color scheme such that if you’re using a dark color scheme, your icons would be white and vice versa.
The content (consumption and generation) takes first priority to design elements, the content is promoted through typography, very clean typography. While popular web-safe fonts like Helvetica Arial Sans-Serif can be used, Segoe is encouraged of course. Typography just like anything else in design can be overdone, Metro is not 100% about typography. Typography is key in Metro because it offers a unique and minimalistic way to convey structured information to the user. For example, font size and font color help to easily differentiate between navigation elements, page tiles, headers and contextual text.
Motion helps to add a feel of liveliness to metro which could otherwise easily become boring due to its flatness, use of large whitespaces and simplicity. Page transition and
Motion is there to serve and contribute to making information the star of the show. Use motion to emphasize (or de-emphasize) your application work flow.
Unlike many other design principles, metro does not try to digitize none digital items even in their digital versions. An Ios app for reading, buying or selling books would/may have the picture of a real bookshelf with books on it as its app icon, browsing through such an app, the experience would be made by the developer to resemble looking through a real world bookshelf. Ios calendar and address book apps also tend to do this as well contrary to the Metro design principles. Ios design choice may be better to some folks as regards this principle, this may vary from user to user, but the use of truly digital design concept to represent real world items is a Metro design principle and not according to a public opinion poll. Metro design Principle believes that users care more about being able to consume or create information (depending on the app) rather than having representation of physical world objects inside their gadgets.
Keyboard shortcuts are quite important, they help increase speed and therefore efficiency. As Web developers, we can’t afford not to be fast and efficient. Here’s a list of important Adobe Dreamweaver CS6 Keyboard Shortcuts to help you increase your speed and usability of Adobe Dreamweaver, enjoy
|To Do This: (Action)||Press: (PC Shortcut)||Press: (Mac Shortcut)|
|Create a new document||Control + N||Command + N|
|Open an existing document||Control + O||Command + O|
|Save an open document||Control + S||Command + S|
|Close an open document||Control + W||Command + W|
|Close all open documents||Control + Shift + W||Command + Shift + W|
|Quit Dreamweaver||Control + Q or Alt + F4||Command + Q or Opt + F4|
|Undo||Control + Z or Alt + Backspace||Option + Delete|
|Redo||Control + Y or Control + Shift + Z||Command + Y or Command + Shift + Z|
|Cut||Control + X or Shift + Delete||Command + X or Shift + Delete|
|Copy||Control + C or Shift + Insert||Command + C or Shift + Insert|
|Paste||Control + V||Command + V|
|Paste Special||Control + Shift + V||Command + Shift + V|
|Select All||Control + A||Command + A|
|Find and Replace||Control + F||Command + F|
|Open the Preferences Panel||Control + U||Command + U|
|Refresh Design View||F5||F5|
|Make Selected Text Bold||Control + B||Command + B|
|Make Selected Text Italic||Control + I||Command + I|
|Apply Paragraph Formatting to Selected Text||Control + Shift + P||Command + Shift + P|
|Apply Heading Formatting (H1-H6) to Selected Text||Control + 1 through 6||Command + 1 through 6|
|Add New Paragraph||Return||Return|
|Add a Line Break <BR>||Shift + Return||Shift + Return|
|Insert a Non-Breaking Space||Command + Shift + Spacebar||Command + Shift + Spacebar|
|Move object or text||Drag selection to new location||Drag selection to new location|
|Copy object or text||Control-drag selection to new location||Option-drag selection to new location|
|Select a word||Double-click||Double-click|
|Select a row||Triple-click||Triple-click|
|Run a Spell Check||Shift + F7||Shift + F7|
|Open the Help Window||F1||F1|
|Zoom In||Control + =||Command + =|
|Zoom Out||Control + –||Command + –|
|Preview in Primary Browser||F12||Option + F12|
|Preview in Secondary Browser||Shift + F12 or Control + F12||Command + F12|
|LiveView||Alt + F11||Option + F11|
windows 8 design inspiration, metro deign ideas, metro design example, windows 8 design example, metro design inspiration