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…

Interaction design and web animations

Animation timing and interaction design

Animation timing and interaction design

Have you ever thought about what makes a particular app great? You know, something about the design just feels right?

All of the design decisions- from fonts to colors to graphics to motion effects- on an app or website work together to create a consistent feeling in users. Sometimes the combined effect is positive and we love to shop, visit, play at a particular site and other times it just feels wrong and we are not likely to purchase or visit that site again.

According to this article, Guidelines for Animation Timing, a lot of our perception of great design comes from what happens in the in between states, which is called interaction design. Think of hovering, clicking, motion animations- those sorts of things. Some examples of interaction design is how the page turns when we are reading a Kindle book or how an app reacts when we click on an internal link. Continue…

Data is necessary for design decisions

Netflix redesign relies on dataAs graphic designers, we often feel like we know instinctually how to best design a website, logo, or brochure. It is true that the more practice you have in any art, the more you develop keen instincts on how to create better artwork, but it is probably a little dangerous to rely solely on instinct when designing successful client projects.

Have you noticed how often Google services change the layout of their products? Sometimes the constant changes are enough to drive you crazy, but sometimes you go to the page and think “wow, they must have heard my thoughts, this site is so much easier to use now!” 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…

#frontendconf 2014

As we get close to the next Front End Design Conference in St. Petersburg, I wanted to share some photographs taken of ClemsonGC students at last years conference, 2014. This year the conference will be run by UnmatchedStyle and I am very excited to see what changes and what stays the same. This is a great conference and a vibrant web development community and well worth the trip!

+Clemson Graphics enjoyed #frontendconf  in St. Petersburg Florida this week. Watch for a blog post about what we learned in the next week or two, but I wanted to go ahead and share some great photos with you all!

Google+: View post on Google+