{"id":3434,"date":"2016-04-09T10:46:39","date_gmt":"2016-04-09T17:46:39","guid":{"rendered":"http:\/\/eloine.com\/blog\/?p=3434"},"modified":"2017-01-27T11:07:18","modified_gmt":"2017-01-27T19:07:18","slug":"useful-web-resources","status":"publish","type":"post","link":"https:\/\/eloine.com\/blog\/archives\/3434","title":{"rendered":"Useful web resources for web designers"},"content":{"rendered":"<p><a href=\"http:\/\/www.losmedanos.edu\/schedule\/dblinks.asp\" rel=\"attachment wp-att-3468\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3468 size-large\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-09-at-10.49.15-AM-1024x364.png\" alt=\"Screen Shot 2016-04-09 at 10.49.15 AM\" width=\"768\" height=\"273\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-09-at-10.49.15-AM.png 1024w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-09-at-10.49.15-AM-300x107.png 300w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-09-at-10.49.15-AM-768x273.png 768w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/Screen-Shot-2016-04-09-at-10.49.15-AM-200x71.png 200w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/p>\n<p>In this posts are some web resources that I will be adding to for my Art 058 course on Designing for the Web Using Adobe Dreamweaver CC at Los Medanos College in the Fall of 2016. (Search for the <a href=\"http:\/\/www.losmedanos.edu\/schedule\/dblinks.asp\"><strong>course here in the Fall 2016 schedule<\/strong><\/a>)<\/p>\n<p>When designing for the web there are many tools that can help speed up that process. I&#8217;ve made a collection of some of them below. If you know of any more please feel free to share!<!--more--><\/p>\n<h3><strong>Web coding tips<\/strong><\/h3>\n<ul>\n<li><strong><a href=\"http:\/\/www.w3schools.com\/html\/default.asp\">W3 Schools<\/a>\u00a0<em>(online references)<\/em><\/strong><\/li>\n<li><strong><a href=\"https:\/\/www.w3newbie.com\/tutorials\/introduction-to-html5-programming\/\">w3 Newbie<\/a>\u00a0<em>(HTML\u00a0instructional\u00a0videos)<\/em><\/strong><\/li>\n<li><strong><a href=\"http:\/\/learn.shayhowe.com\/html-css\/creating-lists\/\">All about lists<\/a>\u00a0<em>(ordered, unordered, definition lists etc.)<\/em><\/strong><\/li>\n<li><strong>Learn about <a href=\"http:\/\/apps.vsart.me\/csswar\/\">CSS specificity<\/a> in this fun little game<\/strong><\/li>\n<li><a href=\"http:\/\/echapman.altervista.org\/cssreference.html\"><strong>CSS reference sheet<\/strong><\/a><\/li>\n<li><strong>Use\u00a0<a href=\"http:\/\/blogs.adobe.com\/dreamweaver\/2015\/09\/faster-coding-with-emmet-in-dreamweaver-cc.html\">Emmet in Dreamweaver CC<\/a> for faster coding. For example you can quickly get a block of lorem ipsum text by typing p&gt;lorem in code view.<\/strong><\/li>\n<li><a href=\"http:\/\/bradfrost.github.io\/this-is-responsive\/resources.html#ress\"><strong>Responsive design resources<\/strong><\/a><\/li>\n<\/ul>\n<h3><strong>All about fonts<\/strong><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/www.fontshop.com\/glossary\">Font\u00a0<\/a><span style=\"color: #0000ee;\"><u>Glossary<\/u><\/span><\/strong><\/li>\n<li><strong>A list of <a href=\"http:\/\/www.w3schools.com\/cssref\/css_units.asp\">unit types and their uses<\/a><\/strong><\/li>\n<li><strong>Font<a href=\"http:\/\/websemantics.uk\/articles\/font-size-conversion\/\"> size conversion chart<\/a><\/strong>\n<ul>\n<li><strong>Choosing fonts<\/strong>\n<ul>\n<li>Type inspiration with <strong><a href=\"https:\/\/www.typewolf.com\/\">TypeWolf<\/a><\/strong><\/li>\n<li><strong><a href=\"http:\/\/www.myfonts.com\/topwebfonts\/?utm_swu=1663\">50 most popular fonts<\/a> according to MyFonts.com<\/strong><\/li>\n<li style=\"font-weight: 400;\"><a href=\"http:\/\/fontpair.co\"><strong>fontpair.co<\/strong><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"http:\/\/Justmytype.co\"><strong>Justmytype.co<\/strong><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"http:\/\/fonts.google.com\"><strong>fonts.google.com<\/strong><\/a><\/li>\n<li><strong>A card sort to aid in <a href=\"http:\/\/fontflame.com\">font pairing<\/a>.<\/strong><\/li>\n<li><strong>Think music when <a href=\"http:\/\/www.modularscale.com\">choosing size<\/a><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><strong>Symbols and icons<\/strong><\/h3>\n<ul>\n<li><strong><a href=\"http:\/\/getbootstrap.com\/components\/#glyphicons\">Available bootstrap glyphicons<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/glyphicons.bootstrapcheatsheets.com\"><strong>Glyphicons cheat sheet<\/strong><\/a><\/li>\n<li><strong><a href=\"http:\/\/www.w3schools.com\/charsets\/ref_utf_misc_symbols.asp\">Miscellaneous symbol character codes<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/dev.w3.org\/html5\/html-author\/charref\">HTML character reference chart<\/a><\/strong><\/li>\n<li><strong><a href=\"http:\/\/www.fileformat.info\/info\/unicode\/char\/search.htm\">Unicode search\u00a0<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/icomoon.io\">Icon packs and the ability make your own icon web pack<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/fontawesome.io\/cheatsheet\/\"><strong>Cheatsheet for FontAwesome<\/strong><\/a><\/li>\n<li><a href=\"http:\/\/fontawesome.io\/examples\/\"><strong>FontAwesome examples<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/design.google.com\/icons\/\"><strong>Material Icons by Google<\/strong><\/a><\/li>\n<li><a href=\"http:\/\/fontastic.me\"><strong>Make your own icons with Fontastic<\/strong><\/a><\/li>\n<\/ul>\n<h3><strong>All about color<\/strong><br \/>\n<a href=\"http:\/\/www.hexinvaders.com\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3506\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2016\/04\/hexinvaders.jpg\" alt=\"hexinvaders\" width=\"548\" height=\"216\" \/><\/a><\/h3>\n<ul>\n<li><a href=\"http:\/\/www.hexinvaders.com\"><strong>Hex Invaders<\/strong><\/a> is a fun arcade game to learn about Hex colors<\/li>\n<li><span style=\"font-weight: 400;\"><strong>Color tool:<\/strong> Adobe Color <\/span><strong><a href=\"https:\/\/color.adobe.com\/explore\/newest\/\">https:\/\/color.adobe.com\/explore\/newest\/<\/a><\/strong><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Color\u00a0tool:\u00a0<\/strong>Pictaculous by mailchimp <\/span><strong><a href=\"http:\/\/www.pictaculous.com\/\">http:\/\/www.pictaculous.com\/<\/a><\/strong><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Color\u00a0tool:\u00a0<\/strong>Imagepallette by CSSdrive <\/span><strong><a href=\"http:\/\/www.cssdrive.com\/imagepalette\/index.php\">http:\/\/www.cssdrive.com\/imagepalette\/index.php<\/a><\/strong><\/li>\n<\/ul>\n<h3><\/h3>\n<h3><strong>Video<\/strong><\/h3>\n<ul>\n<li>CSS Tricks for including <strong><a href=\"https:\/\/css-tricks.com\/NetMag\/FluidWidthVideo\/Article-FluidWidthVideo.php\">responsive video<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/embedresponsively.com\"><strong>Embed <\/strong><\/a>responsivly for a quick responsive embed<\/li>\n<\/ul>\n<h3><strong>Comments on your site<\/strong><\/h3>\n<p>Not using wordpress but you still wanting commenting on your articles? Then sign up for a <strong><a href=\"https:\/\/disqus.com\/\">disqus account <\/a><\/strong>and embed the code right on your website.<\/p>\n<h3><strong>Track your back door URLs<\/strong><\/h3>\n<p>The <a href=\"https:\/\/support.google.com\/analytics\/answer\/1033867?hl=en#using_the_url_builder\"><strong>URL builder<\/strong><\/a> helps you add parameters to URLs you use in custom\u00a0web-based or email ad campaigns. A custom campaign is any ad campaign not using the AdWords auto-tagging feature.\u00a0When users click one of the custom links, the unique parameters are sent to your Analytics account, so you can identify the URLs that are most effective in attracting users to your content.<\/p>\n<h3><strong>Sharing the web address<\/strong><\/h3>\n<p>When sharing a web address it&#8217;s hard on when they are too long. The web address will wrap weird or you reached your character limit on twitter or not to mention it&#8217;s just hard to type manually. If we want to track a web address though it&#8217;s going to be long. Just make it <strong><a href=\"https:\/\/bitly.com\/\">shorter with bitly<\/a><\/strong>!<\/p>\n<h3><strong>QR code creator<\/strong><\/h3>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2015\/07\/onchtag.png\" rel=\"attachment wp-att-2983\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2983 size-full\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2015\/07\/onchtag.png\" alt=\"onchtag\" width=\"250\" height=\"200\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2015\/07\/onchtag.png 250w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2015\/07\/onchtag-200x160.png 200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a>Another reason to make a web address shorter is if you want to use that address in a QR code. You not only have the advantage of tracking using bitly above but a shorter web address means a QR code with less squares and thus much easier and quicker to scan. Less room for error! Once you have a web address to track just head on over to shopify &#8211; they have a free <strong><a href=\"https:\/\/www.shopify.com\/pos\/qr-code-generator\">QR code generator<\/a><\/strong>. Of course they will want you to sign up for their service but you don&#8217;t have to.<\/p>\n<p>Want a prettier QR code? Then you can use <strong><a href=\"http:\/\/eloine.com\/blog\/archives\/2982\">onchtag. I blogged about it here.<\/a><\/strong><\/p>\n<h3><\/h3>\n<h3><strong>Images: formatting and displaying<\/strong><\/h3>\n<ul>\n<li>Think you know your pixel sizes? <a href=\"http:\/\/pixact.ly\"><strong>Think again with this game&#8230;<\/strong><\/a><\/li>\n<li>Image slider <strong><a href=\"http:\/\/bxslider.com\/\">bxslider<\/a><\/strong><\/li>\n<li><strong><a href=\"http:\/\/www.w3schools.com\/css\/css_image_gallery.asp\">CSS image gallery<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/howto\/howto_js_slideshow.asp\"><strong>slideshow from w3schools<\/strong><\/a><\/li>\n<li>JPEG compression with <a href=\"http:\/\/www.jpegmini.com\/\"><strong>jpegmini<\/strong><\/a><\/li>\n<li>Tips and Tutorials at\u00a0<a href=\"http:\/\/vectips.com\"><strong>vectips.com<\/strong><\/a> a great way to walk through and learn<\/li>\n<li><strong><a href=\"http:\/\/cooltext.com\/Logo-Design-Symbol\">Quick logo maker<\/a><\/strong> &#8211; good for getting ideas<\/li>\n<li>Alternatives to <strong><a href=\"http:\/\/foundation.zurb.com\/forum\/posts\/14504-moving-on-from-developing-orbit\">Foundation&#8217;s orbit slider\u00a0<\/a><\/strong><\/li>\n<li><strong>Free Image libraries (remember not to steel)<\/strong>\n<ul>\n<li><strong><a href=\"http:\/\/search.creativecommons.org\">Creative commons<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/pixabay.com\">Pixabay.com<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/morguefile.com\"><strong>morguefile.com<\/strong><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><strong>eCommerce Solutions<\/strong><\/h3>\n<ul>\n<li><strong><a href=\"https:\/\/gumroad.com\/features\/pricing\">Gumroad<\/a> &#8211; good for downloadable files<\/strong><\/li>\n<li><strong><a href=\"http:\/\/www.nopcommerce.com\/whychoose.aspx\">nopCommerce<\/a> &#8211; open source ecommerce<\/strong><\/li>\n<\/ul>\n<h3><strong>Web Templates<\/strong><\/h3>\n<ul>\n<li><a href=\"http:\/\/bootswatch.com\"><strong>Bootstrap skins free from bootswatch<\/strong><\/a><\/li>\n<li><a href=\"http:\/\/startbootstrap.com\/template-categories\/all\/\"><strong>Bootstrap templates available\u00a0under the MIT license<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/html5up.net\/\"><strong>HTML5UP free bootstrap templates up the Creative Commons license<\/strong><\/a><\/li>\n<li><a href=\"http:\/\/maxdesign.com.au\/css-layouts\/\"><strong>General bootstrap templates free to use from Github<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/dcrazed.com\/free-dreamweaver-templates\/\"><strong>30 free Dreamweaver templates<\/strong><\/a><\/li>\n<li><strong><a href=\"https:\/\/dcrazed.com\/free-responsive-html5-css3-templates\/\">66 responsive HTML\/CSS templates for 2016<\/a><\/strong><\/li>\n<li><a href=\"http:\/\/www.alvarotrigo.com\/fullPage\/#firstPage\"><strong>Full page scrolling web template<\/strong><\/a><\/li>\n<\/ul>\n<h3><strong>Email templates<\/strong><\/h3>\n<p>Adobe Dreamweaver CC updated their custom templates to provide a couple of email templates that you can use to build custom emails. The trick to do this is inline CSS styles. This is exactly the bulk the web world has been trying to get away from is all that markup in the content. Never the less this is the way it works with email. If you don&#8217;t like the templates provided and would prefer to work with external style sheets to design you still can! Just create your page as you would normally and then use <a href=\"http:\/\/templates.mailchimp.com\/resources\/inline-css\/\"><strong>mailchimp to convert all your code<\/strong> <\/a>to inline styles to finish your email template!<\/p>\n<p>If you would like an alternative to mailchimp the <strong><a href=\"https:\/\/inliner.cm\/\">inliner.cm<\/a><\/strong> tool works pretty well too!<\/p>\n<h3><strong>Bells &amp; Whistles<\/strong> <em>(figuratively speaking of course)<\/em><\/h3>\n<ul>\n<li><strong><a href=\"http:\/\/tutorialzine.com\/2016\/05\/15-interesting-javascript-and-css-libraries-for-may-2016\/\">Javascript &amp; CSS resources<\/a><\/strong><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this posts are some web resources that I will be adding to for my Art 058 course on Designing for the Web Using Adobe Dreamweaver CC at Los Medanos College in the Fall of 2016. (Search for the course here in the Fall 2016 schedule) When designing for the web there are many tools [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2983,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,144,143,8],"tags":[],"class_list":["post-3434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-art58","category-design","category-web-design"],"_links":{"self":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/3434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/comments?post=3434"}],"version-history":[{"count":49,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/3434\/revisions"}],"predecessor-version":[{"id":3700,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/3434\/revisions\/3700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/media\/2983"}],"wp:attachment":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/media?parent=3434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/categories?post=3434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/tags?post=3434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}