i’m in class today, so a lot of these helpful hints have to be attributed to my professor, Andrew Smyk.

today we’re talking about how to get your website noticed and up to responsive web design standards.  my professor purposefully broke his website and made his code terrible as a teaching tool. a pretty effective tool, at that. it’s like a scavenger hunt for bad code!

anyway, here are some dos and don’ts for all of your beautiful webpages:

• DO: a favicon. let me repeat that. a favicon. apparently this will increase clickability in the browser by 50%. you know how when you have a bunch of tabs open you’re more likely to go back to the tabs with pretty pictures instead of a nondescript blank page icon? yeah. that.

• DO: include OG tags. as stated in class, these unfortunately do not stand for Original Gangster tags (we can only wish). open graph tags help your web site descriptions become rich objects. like on facebook when you share that cat video – there’s a thumbnail and a description on that thing. i’m way more likely to click on a video of a cat than a textual title saying there’s a cute cat that doesn’t actually show me the cat.

• DO: make your code spaced and indented properly so it’s easier to read. er, that is, if you want people to hire you. ever. (please?)

• DO: include meta viewport tags. it’s one line to drastically improve smartphone readability (although it’s not the only method of responsiveness you should use), so why wouldn’t you?

• DO: include your other meta tags (especially description, author). this follows best practices and is better for SEO.

• DO: design for the future. if you design for all screen sizes, you don’t have to worry about what the screen size will be on the next big thing, because you’ve retroactively designed for it. good for you! same deal with making your sites viewable on outdated browsers. the more things it works on, the more people are going to view it. and that’s kind of the point.

• DO NOT: use display:none in your media queries to hide your mobile content when viewed on the desktop. do you want to load two separate sets of media at the same time when you only want the user to view one? no. the answer is no. greater load times is always a no. if you really want to go that route for some reason, only do it on text. people are not happy when you use up their overpriced data and make them wait longer for your page to load for no apparent reason.

• DO NOT: use nondescript id’s, or god forbid, reuse id’s. id’s are supposed to be used once. you know, because it’s an id. those things are unique no matter what perspective you’re looking at them from. there’s a reason you only got one social insurance number. they’re specific for a reason, so make them specific!

• DO NOT: have a page that takes longer than 5 seconds to load on mobile. half of your audience is gone. you’d be even better off if at least some of it loads in 2 seconds, so that at least the viewer knows it’s working.

• DO NOT: include inline CSS. gross.

basically, responsive design is important. also make sure that you’re not removing content in your mobile versions of websites (i’m looking at you, D2L – no, I do not log into slate to only look at class news. you took the content tab out of your mobile version, for goodness sakes).

now excuse me while i go add some original gangster tags to my homepage.