Learn Responsive Web Design and Development

I just finished up my class on Skillshare about Responsive Web Design. I take a responsive web design project from start to finish.

banner
I go over all of the basic fundamental techniques used to create responsive websites. The perfect candidate for this course is someone with basic knowledge of HTML/CSS and looking to take their skills to the next level.

Check it out!

The Writing on the Wall

I learn and work very visually and it’s really helpful for me to draw out my ideas.

I was interested in getting a huge whiteboard but then I came across IdeaPaint. It is a substance that you paint on your wall and when it drys, you can use it as a whiteboard. It works great and it looks a lot better than a clunky whiteboard.

Working Video

Planning out the workflow of my next project.

Closeups

whiteboard

Employee of the Month, Your Website

Your website is most customer’s first impression of your business. It’s second nature now to Google a business when you first hear about it. Imagine for a second that wasn’t the case, imagine one of your Sales Representatives magically appeared when a potential client was interested in your business.
What types of characteristics would your like them to have and what type of message would you like them to communicate?

Clean and Well Dressed

When meeting with a potential client, your Sales Rep. should be well dressed and professional. Good or bad they will leave a lasting impression of your company. The same goes for your website, if your website looks like it hasn’t shaved or showered in a week, the prospective client might look elsewhere.

Clear Message

Nobody likes a boring rambler. Your Sales Rep. should be delivering the most important, relevant information to your potential clients. They shouldn’t be reciting boring plagiarized text in the hopes of sounding like an expert. Almost immediately, your website users should have a clear understanding of what you do and how they can benefit from your services.

Pleasurable Experience

You want clients to enjoy working and interacting with your Sales Rep.  Potential client won’t take the next step if they come off as deceptive, confusing or unpleasant. A website needs to be a pleasurable experience as well. It needs to be easy to use and quickly provide the information users are looking for. People don’t like wasting their time with scams online or in-person.

Budgets are always tight and your business always needs more leads. Before investing money in a new Sales Rep. think about hiring a new website. They never call in sick and you do need to pay for their health insurance.

Test and Debug Local Sites on iPhones and iPads

I needed to find a way to use browser developer tools to test and debug a local site on touch devices like an iPad or an iPhone. Thanks to Safari, there is a way!

Utilizing browser developer tools

I couldn’t imagine developing a site these days without browser developer tools. CSS can be a finicky beast but can be tamed with these tools by seeing exactly how each attribute effects each element. I’ve learned more about front-end web development from browser tools than any other resource. As valuable as they are for CSS, the built-in consoles may be even more valuable when debugging Javascript.

bp_2_devTools

Testing on multiple devices

Everyone knows that mobile internet surfing numbers are soaring out of control but you don’t realize the severity until you see it with your own eyes. Sometimes while walking down the streets of Boston or waiting for my train in North Station I would play the game How many smart phones?. The results were amazing, no less than 30%-40% of the people were on their phones, thats including the people walking down the busy streets.

So as a web developer or designer, it is your obligation to test your sites on mobile devices just due to the huge percentage of viewers. In the beginning stages of development you can adjust the width of your browser window to stimulate the different screen width sizes. But eventually you will reach a point where you should be testing your site on actual devices. This is where the point of this post comes into play…

What I used

Computer

Devices

  • iPhone 5 ios7, Safari
  • iPad 7.0.2 ios7, Safari

1. Configure Safari Webkit Nightly on your computer

If you haven’t already done so, download Safari Webkit Nightly. Make sure ‘Show Develop Menu in menu bar’ is checked. This is located in Safari > Preferences > Advanced

bp_2_safariSettings

2. Find your local computer IP

This can be found at System Preferences > Network. If you are connected to Wi-Fi, then your IP address will be shown under Status. Test this URL out in Safari Webkit Nightly and you should see exactly what you would normally with localhost.

3. View local computer IP in Safari

Now you should see your local development site on your device.

4. Turn Web Inspector on

On your iPhone or iPad open Settings > Safari > Advanced. Turn Web Inspector on.

5. Plug your device into your computer via USB

6. Activate Web Inspector

Go to the Develop menu in Safari Webkit Nightly and find your device and select your local IP.

You are now developing locally and testing on mobile touch devices!

Inspiration from Illustrators

One of my favorite web surfing activities is checking out the work of great illustrators. It is so humbling to see these true craftsman’s work. Here are a few of my favorites:

DKNG

Their use of texture, layout and style is second to none. I also really appreciate the fact that most of their prints are manually screen printed.

dkng

view their work

Halftone Def Studios

I love their use of solid color. Guys like this inspired me to create my own screen printing press.

halftone

view their work

Greg Newman

His realism combined with characterization is incredible.

greg-newman

view their work

Phineas X. Jones

I really appreciate the attention to detail and creative stories behind each piece.

phineas

view their work

Dave Mottram

Great cartoon style. The personality of each one characters really shows through.

dave-mottram

view their work

Glenn Jones

Amazing creative and funny work. Great collection of t-shirts.

jones

view their work

Craig Henry

A local illustrator with an great geometric style.

craig-henry

view their work