Make your site printable with CSS

Do your web pages look as good on paper as in your browser? When you are developing your website, you create it to look good on different devices. Then, you print it out and see how terrible it looks on paper. It prints everything out.

Make your site printable with css
Image by tookapic from Pixabay

What can you do to make it look good on paper too? You have to design for print as well. By using CSS, you can change your design to work on paper, too. The easy way is to add an additional media query for print to your CSS. Or you may want to separate it out into its own file.

What you need to create printable CSS?

  • Decide what elements need to be printed
  • Change your print styles to work with the printer
  • Adjust your design to be printable

Decide what needs to be printed

Websites have navigation bars, footers and other design elements that are necessary to use your site. When you are printing, you want only the content not the extras. To make a page printable, you need to decide which elements don’t have to be printed.

Change your print styles to work with the printer

When you print your page, you want it to fit on a page and not cut off important content in strange spots. If your page includes videos or iframes, you want to prevent them from printing as well. Sitepoint shows you how to create the perfect print stylesheet.

Adjust your design to be printable

What do you change? First, look at the font size. Is it too big? You may want to consider changing the size to fit better on paper. Next, are you using background colors on certain elements? You could change them to a different color or hide them.

Are you using a CSS Framework? The framework my impact how it looks on paper. For example, Bootstrap 3’s col-sm-* turns into a single column on paper. You want to change their settings so that the columns work they way you want on paper. Donnie Ray Jones explains how to fix Bootstrap 3 for printing.

By adding printable CSS to your site, you control how your page prints on paper. Your users will be happy it doesn’t print so many extra pages. It is easy to add to your website after you have finished developing.

Tips for Managing Productivity as a Developer

Do you manage your time or does it manage you? If you are like a lot of people, time manages you. As a developer, you need to handle distractions, projects and people. It can be difficult to manage distractions, maintain focus and get your work done.

Tips For Managing Productivity as a Developer
Image by 3209107 from Pixabay

How can you maintain your productivity? You can try these tips below to improve your focus and get things done.

Manage Interruptions and Distractions

You have to deal with distractions like Email, Social Media, notifications and more. Here’s a few things that you can try:

  • Decide when you are going to look at Email. You may want to look at email once or twice a day.
  • Mute all notifications from Slack and Social Media.
  • Put your phone away.
  • If you work in an office, close your door. Or put up a sign letting them know that you are working on a project and need to focus.

You don’t have to stay stuck on a problem

When you are coding, you can run into a problem that you can’t solve. No matter what you try it doesn’t fix it. When that happens, you can take a short break. Five to ten minutes away from the problem can really help. If a break doesn’t work, try working on something else. Doing something simple and easy can be the break that you need.

Create a library of code snippets

You’ll find yourself using the same snippet of code over and over again. Instead of searching your repos for it, you can create a library of snippets. By having a library, you can search and use those snippets faster.

Here’s a few ways to store your snippets:

  • Use a folder on your hard drive
  • If you write code in Visual Studio, you can collect code snippets with Code Snippets Manager
  • Use online tools like CodePen and Github.
  • CSS-Tricks has a collection of code snippets

Schedule and Take Breaks

When you are in the coding zone, you can forget to take breaks. If you try to push through a project without a break, you could burnout. To avoid forgetting, you can schedule your breaks. When you take a break and how long depends on which productivity method you prefer.

When you take a break, don’t start a new task. Take the time to get away from your computer. Stretch, walk, get some water or coffee.

Plan out your tasks

Why plan out your tasks? Planning helps you to know what you want to do and prevents you from forgetting things. You can use a to-do list, a bullet journal or an app like Trello to plan and track your tasks. Whatever method you use, it can help you get more done.

Pomodoro Techinque

When you have a long list of programming tasks, it can be hard to finish them and meet deadlines. The Pomodoro Techinque helps you to focus on one programming task at a time. The key is to work on one task for a specific time. You can use 25 or 50 minutes. When the time up, take a short break and repeat.

More Tips to Help You Program Better

Programming can be fun and challenging. Every programmer has their own list of tips, tricks and tools that help them solve problems and build things. Reading code, writing code, working with a team and taking breaks from coding all help you to improve your code. The collection below includes these tips and more.

More Tips For Programming Better
Photo by Kevin Ku on Unsplash

All my best programming tips

Jason Swett shares his best programming and debugging tips. He reminds you to work on one thing at a time, use clear names for things, don’t allow yourself to stay stuck and close unneeded tabs.

Top 5 tips to be a better programmer without programming!

You can become better at programming by focusing on your health and well being. Luke Garrigan talks about why you need to sleep, get moving, take breaks away from the computer and more.

10 Ways to Become a Better Developer

Whether you work on a team or as a freelance programmer, you need to work with or for others. Elizabeth at Praxent share her tips for being a better developer by embracing “teams”, how to say “no” to others, code for the future and make sure you do some coding for fun. Use it to explore ideas and problems that interest you.

10 Tips for Better Coding

Writing code can be difficult. You want to stay organized and embrace practices and process that help you write better code. In 10 Tips For Better Coding, Abdullah Abouzekry gives you tips that you can incorporate into your coding practice.

8 Ways to Become a Better Coder

Esther Schindler shares her eight actionable ways to become a better programmer. Her tips include how to read code, write code for fun, work with other developers and learn techinques instead of tools.

Whether you are a beginner or more experience programmer, sometimes you need to be reminded on what you can do to write better code.

4 Ways to Make Your Web Design Simple

What is simplicity? According to Merriam-Webster Dictionary, simplicity is the state of being simple, uncomplicated or uncompounded. A simple web design is uncomplicated. Minimalist design style is related to simple. It has only the necessary elements for functionality. A minimalist design can be simple, but a simple design is not minimalist.

4 Ways to make your web design simple
Image by Ambady Sasi from Pixabay

Is your website complicated or complex?

What makes it complex?

  • Too much content
  • Unnecessary design elements
  • It’s slow to load and hard to use

Why do you want your design to be simple?

A simple website is easy to navigate and use. It has the right number of design elements. A simple website loads faster and helps guide your customer to do what they want. It has content that is readable and scannable.

What can you do to make it simple?

Look at your content and ask is it necessary?
If not, remove it. If its, consider rewriting it. Use bullet points, shorter paragraphs and headings to break the text up. You don’t want to overwhelm people with a sea of text.

Review your site for extra design elements
Do you have colors, illustrations and photos that serve as decorations? If so, consider removing anything that is unnecessary.

Check for ease of use

  • Is your navigation bar complicated? Too many options can make it hard to use.
  • Do they need to go to multiple pages before getting all of the information that they need? Too many pages can make a simple design hard to use.
  • Are your forms easy to use? Complicated forms can make your visitors leave your website.

Look for items that slow your site down
Your photos, CSS, CMS and additional code can slow your website down. People won’t use your site if it is really slow. Use tools to compress and optimize your photos and CSS. Make sure your CMS is updated to the latest version. If you use any third party or custom code to extend your website, check if they are causing speed issues. See if you can get rid of the slow ones.

Simplicity is not a design style. Keeping your web design simple is hard. Websites change and evolve over time. You have to continually work to keep the design simple.

5 Strategies for Mobile First Design

Do you develop your website with a mobile responsive or mobile first design strategy? How do I know which one that I am using? Mobile responsive uses CSS to adjust the design to look good when viewed on different devices. Your design may have started out for desktop and updated to work on mobile. Mobile first focuses on designing for mobile users and their devices first. With the numbers of people who use the Internet through a smartphone or table, you want to make sure that your site is usable and fast for them.

Photo by Matthew Henry from Burst

What mobile strategies can you use?

1. Keep your content short
Use writing tools like Grammarly and Hemingway to help you write better and keep it short.

2. Keep your site simple
Review your website. Look at the number of pages and links in your navigation bar. You may have too many. Consider getting rid of old and unnecessary pages and links. Are your pages cluttered? Do they have too much information crammed onto them? Use white space to add breathing room between different pieces of information. Can you reduce the number of columns you use to two or one? On mobile, you want to limit the number of columns used. Two or less is recommended.

3. Use Mobile First Design practices
Use white space, vivid colors, bold shapes and strong typographic elements in your design. Do you need to use photos? You can use a mix of stock and real photos to create a unique brand. Remember to optimize the photos for the web. Photos with large file sizes can slow your site down.

4. Make your site fast
Your site needs to load fast. People will leave a website with performance issues. On mobile, it is even more important. What can you do to speed it up?

5. Test and get feedback
How do you test your website without access to different devices and users? You have to test as best you can.

  • Test your website with an online testing tool to see how it works on different devices.
  • Test on many real devices as possible.
  • Ask your co-workers or staff if they like how the website works.

Whether your visitors use a phone, tablet or desktop, you want to make the experience a good one. By designing for mobile first, you can make design decisions that help create a good user experience.