Category: Uncategorized

What is Bootstrap and why should I care?

Early in the HTMl/CSS journey to enlightenment, you might have heard a thing or two about something called Bootstrap. What the heck is it? How do you use a bootstrap to build a webpage? Why should I care? Perhaps you already know a thing or two about HTML and you have a solid understanding of how CSS works, but there is this hazy point in everyone’s progression where certain concepts are just a little too murky. I’ll attempt to shed some light on the subject and perhaps make that transition into the light of knowledge a little easier.

CSS to the rescue

When one starts out creating a website, there are certain things that designers and developers do to make things easier on themselves as they go. Creating a common set of classes that can be used over and over on the page’s HTML is one of those time savers. For instance, suppose I create a class called “bold” for assigning bold to a font and another class called “cent-align” for centering text. I can apply those classes at the same time or independently of each other on the text that I want in the document. Those two classes are now part of the building blocks used as the styling foundation for the website that I’m creating. If I keep creating more and more classes like that, pretty soon I have a nice set of tools to make building my website a lot easier. Now suppose I had created all those classes before I started creating the HTML page and I had also included things like pre-fabed buttons, tables, grid layout locations and JavaScript actions. I’d have a sweet set of CSS classes that I could just assign to my HTML page to help speed the styling along in no time!

Framework, Frame-what?

All of this CSS goodness is what we call a framework- just like the frame of a house. Once you got the framing of the house complete, you can start hanging all sorts of things on it- siding, doors and windows, brick and drywall. It makes completing the rest of the house a breeze! But guess what? Just like there are lots and lots of different types of frames out there for build a house from, there are also lots and lots of different frameworks to choose from to build your web page upon.

How Does Bootstrap fit in?

Bootstrap is just one of the myriad number of frameworks out there in the wild, but it is super easy to get up and running. Plus, Bootstrap is open source software which means it is freely available to be used and modified however you like! However the benefits don’t stop there. It’s responsive which is a huge deal for today’s websites. Once you have Bootstrap set up your webpage, it is instantly ready to be accessible from any size of device such as smart phones, tablets or desktop computers with monstrous screens. Pretty slick, huh?

Need more info? There are tons of YouTube videos, quick-start tutorials, guides and help from the sizable community base to get you started. That’s not even counting the extensive documentation on the Bootstrap website. Are you ready to dive in yet? Perfect! Go check out http://getbootstrap.com/ to get started using a popular and friendly framework on your next project.

 

 

 

Cheers!
-Matthew Vazquez

How to keep that footer at the bottom.

One of the more frustrating things that I remember having to deal with in my earlier web design creations is trying to get the footer to stay at the bottom of the browser’s window even if there wasn’t enough content to push it to the bottom. However, if I had more content than the size of the display view, I wanted the footer to stay at the bottom of the content. To be clear, I didn’t want the footer to be floating and covering up content, I just wanted it to be at the end of content or at the bottom of the display if there wasn’t enough content to fill the display.

This type of footer is affectionately known at the “The Sticky Footer.” There are lots of options out there that I’ve used in the past that have worked very well, but there can be some limitations – mainly that you are working under the assumption that the footer has a fixed height. Not necessarily a deal breaker, but not that the greatest thing for today’s responsive designs. These solutions make it difficult to plan around changes in footer height due to the changing size of the contents within it.

From Footer Problems to Footer Solutions: Flexbox!

Flexbox is a new-ish formatting spec that came into existence around 2009 and has gone through several iterations before landing on the specification in 2012 that we use today. The flexbox implementation looks like this:

HTML:

<body>
   <div class="content">
      content
   </div>
   <footer class="footer"></footer>
</body>

CSS:

html { 
   height: 100%; 
} 

body {
   min-height: 100%;
   display: flex;
   flex-direction: column; 
}

.content { 
   flex: 1; 
}

This is the cleanest and version of the Sticky Footer that I’ve seen. Thanks Flexbox!

As awesome as this is, there can still be downside – remember that little mention about the iterations of the flexbox spec? It can make for a ton of additional browser prefixes added to your CSS if you have to support the older browsers.

Wanna know more? CSS tricks has a great post covering the 5 versions of the sticky footer here Sticky Footer, Five Ways and there are some other great articles to brush up on  the flexbox with Are We Ready to Use Flexbox? and this one on Using Flexbox: Mixing Old and New for the Best Browser Support.

Let me know what you use for your Sticker Footer solutions below!

 

 

 

Cheers!
-Matthew Vazquez

Why do we use personas?

For the web design industry, personas are of great importance and use for narrowing down your design goals and to have a clear and directed target audience. If you don’t know who you are designing something for, how do you know what to put into that product? How would you go about creating a walking for a hiker verses an elderly person or someone who is visually impaired? Sure you could create one that caters to all of the above people and that has everything but the kitchen sink thrown in, but that would be one expensive walking stick and how would you know that it would sell? How do you know that it meets the needs of the people who you are trying to get to buy it?

Personas are used in all types of areas. These are just a few just off the top of my head:

• Engineering
• Automotive
• Consumer products
• Marketing
• Blog Creation
• Website Creation
• User Interface /User Experience design
• Search Engine Optimization
• App Development

So, how does one go about creating a persona? It just so happens that there are a number of really great articles out there that are super helpful in creating personas. Here are a few:

• Creating Personas
• A Closer Look At Personas, a 2-part article from Smashing Magazine
  • What They Are And How They Work (Part 1)
  • A Guide To Developing The Right Ones (Part 2)
• Personas: The Art and Science of Understanding the Person Behind the Visit
• Create Precise Buyer Personas With SEO Data: A 10-Step Guide

Hopefully this will give you some great ammunition to get you thinking and working with personas within your particular field. It may take a bit of effort to get it put together, but this is effort well spent and having a persona will save you much more time in the long run.

 

 

 

Cheers!
-Matthew Vazquez

What the heck is this white-space thing and where the heck am I supposed to use it? Why do we need something like this in our CSS? If you’ve ever wondered where, what and hows of the white-space selector, here’s your chance to get some learning in. This article takes you step by step through the complete usage of this handy-dandy little selector to bring your skill level all the way up to 11. Here’s a little sample:

Value: pre

The value pre works exactly as you would expect: The same as content wrapped inside <pre> tags. All spaces and line breaks are honored, creating output in the browser that is virtually identical to what is in the markup. Also, just like the <pre> tag, if everything in the markup is on a single line, the line will push the boundaries of its parent to keep everything in the output on a single line.

Want more? The full article can be found here:

The CSS white-space Property Explained

What clever uses have you come up with for the white-space selector? Be sure to let us know below!

 

 

 

Cheers!
-Matthew Vazquez

The following is just a snip-it of a huge list on great ways to get your CSS in shape for your projects, especially when CSS can get pretty unwieldy. These are just a few of the ones (some are new to me) that I’ll be sure to implement from here on out:

• Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique⁴], [Ryan Parr]

/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("flash.css");
@import url("structure.css");

<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>

 

Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life¹⁹]

 

Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven⁸⁹²⁴¹³]

and here is THE one that I think I like most of all:

To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook^68341816]

Check out the rest of the article here- it’s got a plethora of great ideas to  use:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

 

What are your expert ideas that really make your life easier? Be sure to share your ideas below!

 

 

 

Cheers!
-Matthew Vazquez

I came across an article a while back on 30 web design tips to make your life easier that was just a wonderful source of ideas to help us web designers out in really simple and easy ways but could have a profound impact on your website. Some of these are truly inspirational- like the ones where you say to yourself, “I wise I thought of that” kind of good. I went ahead and picked my favorites and collected them down below for you all. Enjoy!

02. Apply global changes

Here’s a coding tip from musician, producer and web dev Elliott Fienberg that can help speed things up at the early stages of your design work. Use the wildcard CSS rule – using an asterisk as the selector – and you can globally apply changes to an entire page. For example, to change all the fonts on a page to sans-serif, you just need: *{font-family:arial, helvetica, sans-serif;}

This is a great designer’s trick to have in your pocket while you’re going through the design process. Of course, it’s not such a great idea to leave it in your live code, so use this trick carefully and sparingly!

03. Set garish outlines

File this in the “simple acts of genius” folder – a tip from Christopher Murphy ofWeb Standardistas that makes cross-platform design so much easier. “When working with media queries, set an outline in a garish colour,” says Murphy. “For example: {outline:10px solid green/red/yellow/blue;}. This enables you to instantly see which exact rules are being applied to what you’re currently looking at.”

04. Check your character count

“45-75 characters per line is generally accepted as safe for comfortable reading,” says Trent Walton, founder and designer with Paravel. “There’s a quick trick to ensure your responsive or fluid design supports this. Place a line of dummy text on your page with an asterisk at character 45 and an asterisk at character 75. Now test the site to make sure it resizes within these parameters.”

 08. PNGQuant for image conversion

If you want to maintain transparency and minimise file size, there’s a service that can help. PNGQuant can convert 24/32bit PNGs to 8bit PNGS and still maintain transparency. There’s fancy for you.

64KB PNG!!! Smallest file size and high-fidelity transparency (Holy crap!)

17. Put your site on a Post-it

Does your design idea fit on a Post-it note, asks Elliott Fienberg? “One exercise I like to do is to write down your core content on a small piece of paper like a Post-it note,” he says. “This will help you figure out what is really important and what can be omitted. The small piece of paper simulates the attention span of most users these days.”

18. Plan your user flow

Want to know what to do with the rest of those Post-its? “You can expand this exercise by planning out your user flow on a series of Post-it notes,” adds Elliott Fienberg. “I guarantee your project will be far more focused.” Other sticky notes are available, of course, including virtual Sticky Notes on Windows and Stickies on OS X.

24. Use Pinterest for moodboards

Pinterest is a great way to get started collaborating on moodboards with your client

While we’re talking about keeping clients on your side, we all know that clients love moodboards. They’re a great way to collect elements together quickly and clue your client in – or even get them involved in the initial design process. The easiest way to get started? Create a shared board on Pinterest and invite your client to pin away.

29. Say yes to new challenges

Ben Howdle has another strategy for keeping the work flowing: say yes to work even if it’s outside your comfort zone. “Taking on jobs that challenge you helps you to develop and expand your skills much more than any tutorial. And deadlines are a powerful motivator to learn on the job.”
What about you? Do you have any little tweaks that really make your life easier? List them below!

 

 

 

Cheers!
-Matthew Vazquez

Here is a nifty little article covering the best frameworks for developing your website. If you haven’t tried a framework yet, I HIGHLY recommend jumping on it now! There can be a bit of a learning curve for these sometimes, but the time savings and easy of use makes it oh so worth while! My favs are Bootstrap and Material. Check out the article here:

Top 7 Best CSS Frameworks 2017 with Best UI/UX Designs

 

 

 

Cheers!
-Matthew Vazquez

Who doesn’t like free? This is one of the best things that I love about the open source community. Here are a few of the tools that I use to get things done and make my life easier, and they are free. Booyah! The following is a great article put together by the folks over at Creative Blog that highlights some of the awesome, free tools available to web designers to make their lives easier. Here are my favorites…

Font Awesome

Font Awesome is indeed awesome: 634 (at the time of writing) icons contained within a single font, constituting “a pictographic language of web-related actions”. Icons are scalable, so they look the same at any size, and you can style them with CSS. It works well with all frameworks and screenreaders and doesn’t require JavaScript.

 

Bootstrap

Since it was launched by Twitter in 2011, web building framework Bootstrap has become one of the most popular project on GitHub. As Bootstrap grew, its creators Mark Otto and Jacob Thornton decided to move it to its own open source organisation, and the project separated from Twitter.

Bootstrap has a small footprint, LESS integration and compelling visual design. There is a web-based customiser that you can use to tailor it to your open source project: components and jQuery plug-ins can be added or removed by ticking check boxes, and variables can be customized using a web form. There’s a 12-column responsive grid, typography, form controls and it uses responsive CSS to work with mobile browsers.

Expo is a showcase of the most “beautiful and inspiring” projects built with the toolkit.

 

The Accessibility Project

The Accessibility Project is a community-driven effort to make web accessibility easier for frontend designers and developers to understand and adopt into a daily workflow.

The project started in mid-January 2013 amid developer sentiment that core accessibility concepts, features and code examples are overly difficult to extract.

Today 75 people have contributed to The Accessibility Project and it has become an invaluable resource for any developer looking to improve their knowledge.

 

Grunt

Grunt allows you to automate common tasks using JavaScript. You can perform mundane, repetitive tasks like minification, compilation, unit testing and linting with almost zero effort. And because Grunt is extensible, if someone hasn’t already built what you need, you can easily author and publish your own Grunt plug-in.

Grunt has dramatically lowered the barrier to entry for web developers by providing a common interface for the tasks in their build process. The extensive plug-in ecosystem and easy configuration format makes it possible for anyone on the team to create a modern build process – designers included.

Check out the full article to get your fill on other great free options for Web Designers: The 12 most exciting open source projects on the web

 

 

 

Cheers!
-Matthew Vazquez

It’s a new year and with that can bring that familiar feeling that it’s time for mixing things up a bit. But what to try first? What is trending? Where do we go to get some inspiration?

Well, it just so happens that I have come across this little article about just those things.

https://designmodo.com/web-design-trends-2017/

Some of my favorites to experiment more with will be:

• Gradients – I have to admit, I already love this one and think that designers went too far over to the minimalistic side of things.
• More Parallax – If done properly, this can be a very effective tool for crafting interest and drawing the viewer in.
• New Navigation patterns – This is something that I’m always striving for in my work to make the sites that I create a little more surprising yet still intuitive. It’s a difficult line to balance the two on but very well worth the effort.

What are your design resolutions going to include for this year? How do you foresee these trends changing the landscape for web design? Leave a comment below.

 

 

 

Cheers!
-Matthew Vazquez