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…

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…

#frontendconf: a summer 2014 adventure

ClemsonGC students attend FrontEndConf in Florida, Summer 2014

ClemsonGC students attend FrontEndConf in Florida, Summer 2014

This summer, I traveled with 4 @ClemsonGC students down to St. Petersburg, Florida for Front End Design Conference. #FrontEndConf is a unique and special event for front end web developers. Hosted by the amazing Denney family, this is one of my favorite conferences to attend with students each year.

One of the best parts of the event is that everyone is made to feel welcome from beginning coders and students up through the expert speakers, many of whom are the leaders pushing the web development industry forward day in and day out. There are plenty of opportunities to learn both in a large setting and one-on-one with a coder you just met who just happens to know javascript (or databases, or animations, or teaching) better than you do.

This was my second time attending #frontendconf with students. Last year I brought down two students for the event and we met up with a previous graduate of the program as well. This year, 4 students who have taken the intermediate web class (GC4510-Web) were chosen to attend- Alex Horne, Katherine Redmond, Mason Mccaskill, and Weatherly White. We were again joined by a previous Clemson GC student, Josh Boland, who after graduation began working on Clemson’s web properties with the Creative Services team. Continue…

Chrome DevTools for Mobile

This is a great article exploring the newer features of Chrome DevTools and how they interact with mobile development. The video is short and sweet and you can see how big of a jump these tools now are in debugging and testing mobile websites.

Developing for mobile should be just as easy as it is developing for desktop. We’ve been working hard in the Chrome DevTools to make things easier for you and it’s time to unveil some new features that should dramatically improve your mobile web development. First up, remote debugging and then we’ll unveil proper mobile emulation.
Continue…

Absolute vs relative positioning

The question always comes up at some point: which positioning should I use to get the site to look the way I want it to. Would absolute vs relative positioning create the layout and effect I am aiming for? I think this article and demo are really a clear and to the point. What do you think?

5 Different Position Values

Let’s get some complexity out of the way up front. In reality, there are a whopping five different possible values for the position property. We’ll largely skip over inherit because it’s pretty self explanatory (simply inherits the value of its parent) and isn’t really supported well in older versions of IE.

The default position value for any element on the page is static. Any element with a staticpositioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML. Continue…