Responsive Web Design (as if there is another type)

I realize that when my students first start out building basic, single-page HTML and CSS websites, they are not fully responsive web pages, but looking at it from an industry stand point, I am surprised that we haven’t dropped the “responsive” from the front of this phrase yet. I mean, shouldn’t all modern sites be built with responsive web design in mind? I am not sure where it would come into play that anyone would desire a non-responsive site with the constantly changing sizes of smart phones, tablets, and laptop screens.

So, I decided to gather together some articles/videos on responsive web design into a single resource page.

First, Video: Responsive Web Design In Photoshop – A Mindset Not Just Technique
In this video they explore how to design in Photoshop with a responsive mindset and grid at your disposal. I realize that many think that designing with a grid structure hinders creative web design and for certain sites that push the boundary, I am sure that is true, but when you look at how diverse the layout grid can be with a system such as Unsemantic, there are few shapes within a layout that you can’t use.

responsive web design with a grid

 

Admittedly, it is not as freeform as a mindmap or freeflow design style, but with a little creativity, you can bend the grid layout to meet your design aspirations.

Secondly, according to Google, responsive web design factors into search results now. Therefore responsiveness is even more important if poor responsive design knocks you out of google search rankings. What is the use of a great site, if it can’t be found in a search? We can definitely knock Google for using search engine priority to force the hand of designers, but it is their tool and if we want to be found, there isn’t much of a way around optimizing. Read more about how responsive web design effects Google rankings here- What Is A Mobile-Friendly Website, And Why Does It Matter? There is a tool in Google developers that can test your site for mobile-friendliness (according to their algorithms) which can be found here- https://www.google.com/webmasters/tools/mobile-friendly/ Remember to check multiple pages on your site, not just the home page!

Finally, as we head into the last few weeks of 2015, did responsive web design change at the pace we expected back in January of this year-The State of Responsive Web Design 2015? Were the predictions accurate? Any new players on the field that we weren’t expecting? What will the 2016 bring that changes the way we look at responsive web design moving forward?

Web development is an exciting field to be a part of, but you better buckle up because it doesn’t slow down!

 

Web development community: Many thanks

A thank you to the web development community

A thank you to the web development community

Interesting article on community from +Chris Coyier and the perspective of web development community. At Front End Conference in 2014, Alex Horne and I gave a presentation on web community and web education. I think this article adds a lot to that conversation.

It is now over a year since that talk and I find that many of my original thoughts on the convergence of community and education in the web sphere are still the same. I know that I, as an educator, rely heavily on the web community to help me successfully teach my students about designing and developing websites. I especially look towards the online web community to stay informed about where the industry is moving and how best to prepare tomorrow’s developers.  Continue…

Why should you pay for a quality website?

quality website

Building a quality website for your company costs money, but it also serves as the face of your company to all of the world.

As a web developer, I have always been curious about how incredibly difficult it is to convince a business owner the value of a quality website. Why should a startup have to pay for a quality website? There are plenty of reasons, but for some reason it is difficult to convince many business owners of the value (and cost) of high quality websites.

I get it, I really do. Many of the companies I work with have been ripped off by developers in the past. The stories I hear vary, but the gist is the same: They finish a website for the business, and then disappear before handing over the domain and files making updates difficult to impossible to manage. Or they make promises that they will get you listed #1 on google search, but fail to deliver. Or they build a great CMS site, but they never show you or your employees how to make updates and you are way to busy to figure it out. Continue…

CSS reset: what and which?

Choosing not to use a CSS reset can really effect your code when you first start coding your site and look at it across browsers and in the long run create more coding hassle. Have you coded a really basic website for one of your assignments before and it looked fine in Chrome, but when you opened it in Safari or Firefox, it had a weird border of padding around it? Many of our beginning coding assignments don’t use a css reset, so some rules from the browser (which vary from browser to browser) are effecting the display of your code.

Every browser has it’s own set of built in CSS that it applies to the site if you haven’t specified otherwise. This is called the user agent stylesheet. You have probably noticed it when you are using Chrome Developer tools and see a greyed out rule in the css that can’t be changed, but it applying to your element.

user agent stylesheet can be overridden by attaching a reset.css

The greyed out rules circled in red are from the browser applied user agent stylesheet. The only way to change these is to add css rules to your style.css to override them.

Continue…

Styletiles tool to communicate with clients

One of the most difficult jobs of a web designer is to accurately communicate with clients. Some clients have a very good idea of what they want their website to look and feel like, but have difficulty communicating their vision. Then there are clients that hand all the creative decisions over to the designer, but then can’t figure out what they don’t like about the mock-ups of the proposed design. Either way, as web designers, we need to come up with quick, easy ways to get our ideas down in a way that visually communicates the website design to a client in a clear way.

Style tiles are a way to create style guides for a website prior to building it.

Style tiles are a way to create style guides for a website prior to building it.

 

There are many tools out there for this purpose, but lately, I’ve been interested in the process of using style guide, especially on team-based projects. One tool that serves this purpose is Styletil.es.”A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web.”  Continue…

Struggling with centering?

How often do you struggle with centering content on your website? Chris Coyier to the rescue again! I love the simplicity of this guide and find myself referring back to it quite often and I think you will want to bookmark it as well.

Centering in HTML and CSS isn’t as simple as centering something in Adobe InDesign with the output intent of print. When designing for web output, there is the added challenge of unpredictable screen sizes. Therefore on my Macbook 15″ the margin on either size of a container may be 200px. But what about if I maximize my browser window or view it on a desktop monitor or even my smartphone screen? The proper amount of margin won’t still be 200px on the left and right. Even when working in percentages instead of pixels, your design will likely display differently between screen sizes using media queries.  Continue…

The science behind UX: eyetracking

eyetracking visualizes how our eyes view information

Eyetracking can produce heat maps to visualize how we view content. Source: Nielson Norman Group; www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Design is not just an art, there is hard science behind it. Googling the term UX comes up with the following definition: “User Experience (UX) involves a person’s behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership.” The science behind design and UX can be studied using eyetracking devices to help scientists better understand how we view and consume content online.

Did you know that there is an eyetracking lab at Clemson? I didn’t until a few weeks ago when I met with Dr. Andrew Duchowski, Clemson Computer Science professor and eyetracking expert. Continue…

Why not Dreamweaver?

To Dreamweaver or not to Dreamweaver, that is the question

To Dreamweaver or not to Dreamweaver, that is the question

Having attended several conferences this past summer, I wanted to write a post to answer one of the questions I hear not only from students, but also from web development teachers as well. So often when I am giving a presentation on teaching web development, I get asked “Why shouldn’t we use Dreamweaver?”

It is a very legitimate question, especially as more and more schools are getting Creative Cloud licensing for their faculty and students. So, if all your students already have Dreamweaver installed and they are used to how Adobe lays out their workspace, why wouldn’t I recommend Dreamweaver as the best way to teach coding? Let’s start with the simplest and in my opinion most important answer:

I can’t name a single developer using Dreamweaver to code!

Continue…