Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: CSS Page 6 of 10

From Design Rules to Thinking Like An App Designer

By

On May 31, 2015

In CSS, Design

Learning about Design? Design has rules, tips, tricks and techniques that you need to learn. As you learn, you realize that there is a right and wrong way to apply these. Some design rules can be broken. You need to learn when and how to break these rules.

20 Design Rules You Should Never Break

Canva’s Design School talks about 20 Design Rules You Should Never Break. When you are designing, you can break certain design rules. You first need to learn these design rules, so you can break them in a way that makes sense for the design. This article provides you with tips, tricks and rules on how to fix common design errors.
Thinking Like An App Designer

Why designers should never use fake text

Are your designs filled with fake text or lorem ipsum? Do you use it as a placeholder until the real text is ready? Jerry Chao explains why you shouldn’t use fake or dummy text. He suggests that you should write your own text. No matter how rough the text, you’ll see design issues that may not be found right away with lorem ipsum.

Flat Design vs. Material Design: How Are They Different?

Design styles change. New ideas on design can become popular quickly. Some are just fads that disappear. Anna Lisnyakn describes the difference between Flat and Material design. She gives you the pros and cons of each design style and helps you to decide which one works for your project.

What do you need to think like an app designer?

You want to work on mobile apps. How do you approach the design of mobile apps? Thinking like an app designer helps you to change your design thinking. To build mobile apps, you have to learn and unlearn new ways of designing. What works on a website, won’t work when designing a mobile app.

Summary

The more you design problems you solve the better you get at design. These tips help to learn what design rules you can break, why you need to design with real text and how to think like an app designer. What other design tips do you use?

Do You Need a Website Refresh or Redesign?

By

On April 28, 2015

In CSS, Design, Programming, Web Development

What do you do if your website is old or needs to change? Do you start over? Should fix what is not working for you? With a website, you have two options: refresh or redesign. Fix what you think needs an update or start over with a brand new site.
Redesign or Refresh?

Refresh or Redesign

What is a refresh? Fo example if your website was a house, a refresh would be like making over a room. To update your room, you may repaint the walls, replace a rug, curtains or even pillows and add new furniture. When you refresh your website, you leave the way the website functions and change how it looks. This may include changing the colors, fonts or even images.

What is a redesign? A redesign is where you start over. Instead of a makeover, you would tear the house down and build a new. With a website, you start over by building a new site.

When should I refresh my website?

Refresh or redesign? It depends on your needs. Why are you updating your site? Do you need to fix some small issues? Has your business changed and your website no longer reflects your brand? If you need to make small fixes, than a refresh will work for you. If you need to have it reflect how your business has changed, you want to redesign.

How do I do refresh my website?

  1. Decide what your goals for the website are.
  2. Look at your content and determine if you need to add, delete or update pages.
  3. Prioritize what you want to work on.

What are you site goals?

When looking at a redesign or refresh, you should reevaluate your site goals. Is it performing the way you expect? Does it reflect your current brand? Are there any pages that just don’t work?

Do you know what content your site has?

Audit your website by figuring out how many pages you have and what they focus on. Is each page current, out of date or needs a slight tweak? Decide which pages you want to work on, remove and update.

Prioritize

What do you want to work on first? Does your content need updating? Do you need to change the look and feel first? Decide what you want to work on and schedule how you are going to accomplish fixing or updating your site.

Summary

Your website should change to reflect who you are as a business. This means you may need to either refresh or redesign your website. What you choose to do depends on your goals. Sometimes, your may need simple fixes and refreshes your website is the best choice. Other times, you may choose to start over because it is just easier and a better way to achieve your goals.

Your own or a pre-built CSS Grid

By

On March 31, 2014

In CSS, Design, Programming

Bootstrap is a popular design CSS grid framework. A CSS grid framework consists of a specific number of columns and rows. You can quickly define different layouts using a grid framework. It helps you to quickly build the layout of your web application.

What if you want something really simple? You just want a simple grid and create the rest of the design yourself. Do you choose a pre-made CSS Grid framework or build your own? It depends on your preferences and project needs. If you need to complete your project quickly, choose a pre-made framework. If not, you may choose to build your own to use in later projects.

Simple and Responsive Grid Frameworks

Try out one of the following simple and responsive pre-made grid frameworks:

Toast - Simple CSS Grid

Toast – Simple CSS Grid

If these don’t work for you, a quick Google search provides you with more options to try.

Build your own framework

Why build your own framework? Most developers like working with code that they understand and have control over. With a pre-made framework, you have to deal with the choices that the developer made to get their framework working. You may not have the time or patience to attempt to fit another’s framework to your project.
To build your own framework, you need to:

  • Determine how many columns 9, 12 or 16? The standard number of columns is 12. 12 makes it simple.
  • Sketch out a design.
  • Create the structure for the grid framework. You don’t have to make it complicated. The best grids are simple.
  • Test out the HTML and CSS for the grid framework.
  • Make it flexible and responsive. You want your grid to work with your future projects: mobile and beyond.

Building your own framework doesn’t have to be an overwhelming challenge. Check out how Joe Richardson built a responsive grid system.

Are you going to build your own?

Fixing CSS Issue with Social Media Buttons

By

On December 31, 2013

In CSS, Web Development

While building the Smells Like Bakin’ website, I followed an example. The example uses CSS to create the hover effect for two social media buttons. When you hover over either Twitter or Facebook, a box appears behind both icons.

Get Bakin Original

Code

The HTML Code looks like this:

<div class="grid_5 omega" id="butt">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

The CSS looks like:

#butt:hover img {
background-color: #4CC4A7;
}

To Fix

For this project, I wanted the hover to show only for the specific icon that you are hovering the mouse over. The first step was to change the #butt from an id selector to a class. Second, I applied the class to each link. Third, I removed the id from the div. The result is a box appear behind each icon when you hover over them.

Both icons are circles, not boxes. I didn’t like a box appearing behind the icons. I wanted to change the hover to show a circle instead of a box. I changed to code to create a rounded background by using CSS Circles.

The new code looks like this:

<div class="grid_5 omega">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin" class="butt">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin" class="butt">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

CSS

.butt:hover img {
background-color: #4CC4A7;
border-radius: 50%;
width: 46px;
height: 46px;}

Now, the result is a circle appears behind each icon when you hover over them.

Get Bakin Button Fix

Related Article

Bakin with a CMS

Bakin’ with a CMS

By

On October 25, 2013

In CSS, Miscellaneous, Programming, Web Development

How do you learn a new content management system? You build a website with it. A sample website works best because you can delete it if you don’t like the results or even the CMS. I used the Smells Like Bakin’ tutorial from Treehouse and a CMS called Umbraco. Treehouse uses Smells Like Bakin’ to teach how to build a simple website. Umbraco is an open source ASP.Net CMS.

Smells Like Bakin in Umbraco CMS

Building the website

  1. Download and install Umbraco.
    I followed the manual install instructions. Umbraco lets you use an installer. I choose to do it manually, so I could learn what the install process is. The manual process was quick and easy to follow.
  2. Download and install the files for Smells Like Bakin.
    Instead of following the tutorial, I found a copy of the site on github.
  3. Install a starter kit in Umbraco.
    Umbraco lets you install it without a starter kit. Without a starter kit, you need to create your own document types and templates. To save time, it is easier to install a starter kit. Umbraco has several to choose from. I chose the HTML5 Boilerplate. It creates a simple website based on HTML5 Boilerplate.
  4. Modify the templates.
    HTML5 Boilerplate starter kit comes with 3 templates: a master page, a home page and a generic page. Using the Smells Like Bakin’ github download, I started to modified the templates. Umbraco uses master pages. The master page template is used by the home page and generic page template. I added the header, navigation and footer to the master page.
  5. Modify the CSS.
    You can add and modify CSS inside Umbraco. It let you create additional styles that can be used in the CMS editor. These styles makes it easy for a content editor to use them without any knowledge of CSS. For this test, I added the existing styles from my example and then made a few adjustments to it.
  6. Create the Home Page.
    I used the home page template to create the Home page. Then, I added the content and images to the page.
  7. Create an additional page.
    My example of the Smells Like Bakin’ had only one web page. I created an additional page to test the generic page template in Umbraco.

Lessons Learned

  • When installing Umbraco, select and install a starter kit. A starter kit makes your life easier. The type of starter kit depends on what you want to do with the site. Before installing Umbraco, identify the starter kit that fits your needs.
  • Using a Grid 12 system, it made building the website quicker than developing your own. The HTML gitHub example used a Grid 12 system.
  • Umbraco lets you store images inside the database or externally in a file folder as part of the website. Before you build the site, you want to determine which images are added to the database.

With Umbraco, you have to have an idea of what you want to do with it before you start. Umbraco offers the flexibility of page templates, packages(plugins) and XSLT macros. It provides greater control over design and code/markup. As a CMS, it isn’t the type where you can install and be up and running in 5 minutes. If you want that, you are going to need a different CMS.

Related Article

If you need a different CMS, check out CMS Showdown at Web414 Meetup.

Page 6 of 10

Previous

Next

Powered by WordPress & Theme by Anders Norén