Majid is a Project Manager and web enthusiast! He has been part of making some world changing applications like this and had performed in few roles as Web Designer, Web Developer, Tech manager and System Architect.
I always enjoy teaching business owners about SEO. It’s amazing when they get so impressed with their own data, just knowing for what search queries they are being visited and where their visitors are coming from.
Doing SEO requires a mix of knowledge of Web and Marketing. In the simplest way, we look at the physiology behind how to attract our target audience, and how to utilize the Search Engines to be visited for those searches.
How to be seen on Search Engines
Our web pages each offer a set of rankings for KWs we provide in writing and meta copies. Search Engines use the content we offer, to match the relevancy. But that’s not it, it used to be in early days as there were fewer websites, but as Search Marketing proved its profitability, soon enough many pioneers started taking over the world by stuffing KWs on pages and be found for everything.
Still today, if your website offers a full dictionary of vocabulary, it probably could create a large domain of KWs to be seen, but Search Engines today are smart enough to allow that happen only when the pages are legit.
What Legit means? In Search Engines mind (algorithms), legitimacy comes from authority too that’s given by people (hopefully). Search Engines look for the reputation of each page, through various metrics such as page backlinks, that’s how many times a page has been linked and from which sources. The higher the authority of a linking domain is, that provides a high ranking to the page it links to. The authorities are given by reputation and reputation is by what actually should people trust. Government websites, universities gain those reputations at highest and then any website that gains the online reputation through its digital publications.
Ranking Current given by Higher Ranked
You might have heard the old SEO saying, “Content is King”. True it is.
Good content is everything, it’s what people will read and will share and at the end Search Engines are doing their best to make that connection happen and make it easier. Thanks Search Engines! If you wonder what Search Engine’s gain from all this good work, we’ll look at the SEM or Search Engine Marketing in next post.
So what are the take aways from this short post?
Here’s a list of how to approach a Good SEO practice for 2020
Write Good Content
SEO First, start your article by writing your title and description first. That way the most important piece is never left out. Set your focus KW to align the goal of your article.
Add Images and add Alt text. Make sure the coding is set to read the alt text from your CMS inputs.
Once published, share it with Social Media, more people are looking there to find the news, use hashtags related to your focus KWs.
Give it a day or two and start checking your Webmaster Tools (Google GWT, Bing)
Look at the Queries that your page is making an impression. These queries occurred when your page was listed in the search result. Usually higher impression pages lead to higher ranks (first pages of Search results) and are seen more frequently. Therefore higher impression queries are likely to get clicks and result in our pages being visited.
What are the chances that my content gets ranked?
Review and tweak content based on keeping what has worked and what can improve. Make small changes that can be verified and watch the growth, revert if decline.
Good analysis is important and it comes from experience. Often we gain our experience from doing things and a hands on approach can help many business owners to not only succeed, but also to gain a different perspective about their business from the visibility search engines provide to the publishers.
Many businesses need expert support to be available to them and many talents are entering the market and wondering where the jobs are?
So really where are the jobs and where are the talents?
To answer this, I studied our cases from the team and our collective experience of the Web Development jobs matchmaking world.
Clients are looking for reliable Talents.
Yes, the answer is that easy and that complicated. Everyone thinks they are reliable and many people are willing to go a few steps beyond to prove that. But how one stands out from the competition depends on their professional and ethical grade as seen in the industry and their attention to details for delivering on this promise.
A Reliable Web Developer Means:
They know what they know and what they don’t. Being good at something in this time and especially with technology knowledge requires focus and specializing. Learning all the names of technologies is a good start, but a long way to learning the depth of each and becoming an expert on that matter. They are different learning curves during the learning stages, which by real-life project practice, can be shortened as we apply our learnings along the way.
They can estimate reasonably for the work they are planning to deliver. Estimation comes from experience and also organizational skills. People who track their time and efforts proactively are more likely to gain the skill and be able to estimate more accurately. Each project workflow and events can be studied and used to establish a better project plan next time a similar project is approached.
Personal Organizational Skills. They are key for high achievers in this field. There are a number of ways for approaching each project and repeatedly we’ve seen most efficient projects are developed when a detailed plan is staged and executed up front. Today’s agile development allows us to build in stacks, modules, and layers of code are written once and used many times. An organized developer knows many recipes of recursive projects and has a good idea on how to approach new challenges.
Delivering results: Although estimation isn’t easy and there can always be changes in the scope of projects during the course of development. A good developer should be reasonably accountable for standing by the product they develop considering for best coding practices, the security of the data operations, and code documentation for future developments, along the lines toward finishing the project and delivering the result on time and with the agreed features.
Not Forfeiting projects without a replacing solution: This is a lesson to really listen to. There may be times when a person is not able to continue on a project and with proper planning, a replacement can be configured. Especially in the freelancing world, at times the cost of finishing a challenging project may become more than taking on a new job! It’s really important that one takes their jobs seriously and commit to the responsibility they accepted and critical for developing their long term professional image and also to learn how to deal with difficult situations. Good developers always document their work to make sure the next developers can undertake their work, in case they dropped dead the next day, the project will not die or need to start from the beginning!
Sense of Humor: It’s true, without it, it might be hard to work with one in a highly mentally engaging work. It’s great when people know how to turn a tough problem-solving the situation to a fun challenge and help others through making a great team vibe.
Plays ping-pong or a Music Instrument, or both We know most of our developer friends that are musicians or love their table tennis to zone out. It’s not scientific, but we think it does help! If you’ve tried developing and yet not paying the pong or a musical instrument, please take this one advice! Picking up a musical instrument requires dedication, but giving it a year or two and you will be grateful to your decision for the rest of your life. Ping pong is fun too and helps with problem-solving, especially when two developers take it out to the table and solve it there together (most recommended).
Love learning every day. This one is too general. We all love learning as human and our brain is a sucker for new information. It’s important to recognize our talents and find where our curiosity is most driven toward by nature. If that is to get geeky and learn how things work, coding may be a good place for one with infinite problems to solve and have many new things to learn each day.
Where to find good web development jobs?
As a person who has done many years of freelancing, as well as responsible for hiring freelancers and employees, here are my top recommended places to approach web development jobs.
Google Job Search: Very quickly, the Google job search is becoming one of the only places we need to search for jobs. With Google using structured data formats, its crawlers go through all web portals and collect the latest jobs. That makes Google amazing for the massive data points it collects and the filters it provides to narrow down your search.
Google Job Search – Web Developer Jobs in Vancouver
LinkedIn: LinkedIn is the ultimate job searching guide for finding many corporate and agency opening positions. Following people and companies can make the job search much easier.
Craigslist and Kijii: It’s true, these listing websites are still very popular for many small gigs and sometimes for companies exploring these portals for the same purpose. Although checking Craigslist and Kijiji on daily basis can be a daunting task. Many gurus in this field set up programs to be notified anytime a new job is posted in their area. The automation can be smart and find one many job with reduced efforts of searching and getting more matches.
Freelancing Websites: There are a dozen of websites that are common amongst employers and freelancing staff around the world. With the crowd-sourcing becoming a major method of reduced employment cost, this can be a way of getting jobs but requires specializing and building a strong portfolio and reputation in each job market. Also with different wage ranges in different cities, this competition can become quite hard for people living in expensive cities and expecting higher earnings.
Last but not least, I’ll share my perspective on how to search and find the right talent for your project and team.
An open, happy and collaborative environment, the pong-game, the social days and the freedom of working away from the office has become part of the culture.
How and Where to find reliable Web Developers?
Local or Global: That’s a key question to ask before posting a job and perhaps when writing the job description. Whether if the job can be done remotely or is done through in-house team collaborations. Online jobs have a
Networks: Spreading out the words through networks help enriching the networking bonds. Especially when we are part of a network that we believe in their mission, there’s a high chance to meet people with similar motives and aspirations. That’s only a place to start and get results, but certainly not to disregard the high chances that are many people outside our network capable and well deserving of the jobs.
LinkedIn, as mentioned above, most candidates ready for serious jobs have made their LinkedIn profiles and displayed their projects and portfolio. As an industry standard, LinkedIn is a great place to navigate the search and review the Candidates experience that’s public and relied on by many professionals.
Post a Job in your industry job portal. A well-written job post can help to get the attention of the right candidate, that is waiting to hear from its long term employer. The job post is the first act toward building this relationship with a reliable cornerstone. The job post is also often used to remind the team about the job responsibilities that they have accepted to apply and undertake.
Schools and Universities Portals. Recent graduates are among the best places to search for recent graduates ready to take on the biggest challenges and help you change the world! The newer generations perspectives for an ideal job is different and need to be considered for attracting highly motivated Candidates. For a work that’s highly depending on brain productivity, an open, happy and collaborative environment, the pong-game, the social days and the freedom of working away from the office has become part of the culture of making happier and productive teams in the digital market.
In the next Web Development Career post, we will review to the development skillsets required for acing today’s development jobs in the market and how to meet these requirements and stand above the competition.
My experience working in the internet marketing industry tells most projects with perseverance and tweaks to adapt has grown and gained value over the years. Many businesses with short term strategy or less desire to fight the challenges give up and don’t make it to future years.
Incremental Progress is our key terms for following a model in making optimization a priority across various aspects of our businesses and projects. With a day to day advancement, as a result of research, analysis, and improvement, we can learn and customize the future releases of our products, services, and practically anything we do.
With the ability of integrations on internet, we are just left with imagination and learning on easiest way to get good data in front of us. Getting meaningful metrics in our reports is the first step in making informed decision toward ROI.
The limitations on developing success in internet marketing are two parts, knowledge and time. Knowledge comes from learnings in past and with the experience of successes and failure, experts can cut through much of the step by step optimizations.
Expert vs Less Expert Growth (Theoretical)
This graph is theoretical to demonstrate the growth of a DIY approach vs. an expert approach to demonstrate the idea visually. Both hiring experts DYI and approaches would most likely result in growing, in comparison to no progress due to lack of information, resources and basically not doing what needs to be done during the course of time.
We all knew what we have learned and some wish we knew things earlier. Of course with a collaborative consulting from access to multiple experts, we will have more inputs to make decisions that will save time.
The goal for incremental progress model in digital marketing is to keep making small changes to learn, apply and gain make their marketing goals.
How to make incremental progress from our digital marketing efforts?
Working on a mission with a deadline. Each month, have a set of things to accomplish, the goal is to get things done while managing various aspects of a project or more projects at times. Making incremental progress means we touch on our regular priorities without offsetting them to future or procrastination.
Setting up Key Performance Indicators or KPIs. We want to know what is valued to us and be able to measure our progress if it’s progress upward or downward, that’s important! All metrics may not be known when starting a project, with experience and continued analysis more key metrics become evident.
Getting reports easy and often. With the impact of marketing and the cost of time and resources, it’s important to get good data in front of us and the ability to make tweaks to optimize results. Running an Ad campaign may sound profitable, but always misses opportunities or real information on how the campaign has performed.
Get Hands-on. Hiring a full-service marketing service may be very costly and cause SMBs and startups to fall behind from marketing proactively. Most successful business owners we’ve seen have gained the knowledge and understand their online markets by applying and working closely with their teams.
Teamwork. Most of our successful projects are done with a team. Working with a team is not only a luxury of more brains or labour onboard that’s key but the teamwork of two or more people will result in getting one thing done as we move the tasks hands in hand, there’s great power in doing our part of a job with our best ability and focus in comparison to when we have to do it all.
With these 5 hints, gathering a budget and time to work on incremental marketing optimizations will result in a compound growth of businesses.
This list was originally gathered by Anthony Roffidal, our information architect and SEO specialist for instructing our internal team for launching new websites.
Step 1: General
Robots.txt
Adding Analytics tracking code
Implementing all tracking events on CTA and in nav (optional)
Url rewriting to strip off www
sitemap.xml
Crawl website to make sure no link is broken
minify css and js (optional)
Favicon
Htaccess speed tips
404 (UX tips: search/ fix URL/ sitemap/ Homepage)
Accessibility check
SSL / https
Step 2: On page SEO
Meta title
Meta description and keywords
Canonical
Make sure there are no coding errors
Add microformat/ microdata
add alt text to images and links
respect the hierarchy of <h1> → <h6> and <strong>
Make sure no link is broken
Step 3: After launch
Ownership of both websites (www and non-www) on webmaster tools
select preferred domain on WT
Adding sitemap.xml to google, then select fetch as Google, submit to indexation.
Responsive web design was merged to answer the various sizes of mobile, tablet and desktop screens that quickly became normal in last decade. Prior to that, websites were designed mostly with standard width and most of the layouts were designed for desktop.
Responsive added some adjustments on the browsers rendering capabilities and additions to CSS markups, allowing developers to fold the pieces of a page and make the rules the need with media queries for each screen size.
Media queries are defined through a grid system usually, but also following the web standards and devices that are most common. These would identify if the screen width is less than certain pixels, apply different layout and styling rules on the page.
Responsive web design initially added a ton of work for developers; soon enough some companies like Twitter invested in developing Bootstrap to help rapid development and responsive system through their predefined CSS and Grid setup. Foundation by Zurb was and still is among the front-end frameworks.
In most recent years and HTML5 and CSS are adapting with the needs and becoming more capable to handle responsive layouts with the grid CSS properties.
This is a topic to start writing in series and we will do a brief introduction to name the most important steps toward designing a website.
Doing the process over and over for many years, my best products come to life when the stages of design where followed and there was time in between each iteration to sync in and reflect; with fine designed timelines and adding review stages in the design process, we have been able to cater the better outcome. In earlier years of my experience, I would jump across an idea to development – which may still happen for prototyping an idea; today I find it most practical to go through each step.
Project Definition – Gathering the goal and what the project is going to deliver is key for any project. For website design, the requirements will touch various areas and different ways of shaping the solution which makes it critical to make a list of required deliverables. Defining a Minimum Viable Product (MVP) is a good practice to finalize this step. MVP means what does my project need to deliver to function at the minimum, what are the additions we can add to it?
Project Timeline – With a deadline and start date as part of the project definition, it’s often best to design our timeline to allow iterations, reviews, and design with stakeholders. Rushing the design process is never a good idea and planning ahead can make your design project much more lasting!
Creating a Design Board – Digital or on a real wall, it’s great to put up all the ideas and the design pieces as we gather them and create the first prototypes all the way through the final design. It makes sure we follow and keep improving, not going back or sideways! Starting prototypes may suggest various directions, but once the design direction is defined, it becomes harder and very costly to go back.
Prototyping early – Again, it’s easier to prototype stuff and go through many ideas with rough lines and sketches. Once remaining pieces are assembled it becomes much harder to make abrupt moves or the changes become less viable on the count of our design decision-making process.
Organizing Content – From copy, fonts, images, and graphics, it’s best to keep them all organized. Documents can be shared via sharing apps to keep the editing team and the designers and developers on the same page. Images and media files also are best to be kept with the source files within shared folders across the team. Keeping the files organized will save time and will also help to deliver the same organization through the project. For example, when all source images are available, a developer can run an automation script with photoshop to export all images at the resolution needed and rename them quickly. The marketing team can review the file names and make sure they have the right meta and so on.
Low-Fidelity and High-Fed Design – Getting the final designs done with content, images and all key pages of a website in UI and UX design stage will help the development to go smooth and with little challenge. With responsive layouts also provided to developers, there are fewer assumptions and more predicted scenarios for each User Experience that needs to be achieved in our final web design.
Website Structure – CMS or Just HTML is the question we often ask. If the content is going to be changed more than once every 3-6 months, then developing a CMS website can be advantageous. With the idea of keeping a fresh site and blogging, often CMS wins this, but there are still plenty of landing pages and one-off campaigns that don’t need a CMS.
Website Coding – To deliver a website with custom design, handling html, css and javascript are needed to achieve the full results. Using page builders and template websites is also a way to get small projects up and running and there will be more automation and less need for coding all the pieces of front-end websites as we move forward with the evolution of web development technologies.
Website Testing – After completion of Frontend coding and backend integrations, the website is required to pass some web standard tests and compliance. There are stricter standards such as Web Accessibility becoming mandatory for the modern web that promotes equality of access to information.
Website Launch – Website launch can go as expected with planning and organizing the process. See our website launch checklist for what we recommend to be done before each launch.
We have been working with nonprofits since the early days at Noble Pixels and we have come a long way. We are pleased to have the support of some of the most amazing nonprofits and our ability to continually serve them with our best skills and experiences.
Many nonprofits follow their amazing journies without a digital marketing team onboard that is understandable for nature and resources a nonprofit has to sustain its commitment. However, the lack of experienced digital marketing and development staff will often result in affecting a gap in technology and underutilizing this needed area of marketing.
We are offering consulting services and within the first hour of the call, we are examining the technology surface of a nonprofit organization and followup with our study, research and the gaps we discovered.
Our team is available to support various types of design, development and internet marketing projects. Within the nonprofit projects, we have worked on
Donation Forms Design and Development
Donation Backend System Design and Development
Email Marketing Campaign Development and Execution
We’re excited to see the new promised updates from WordPress 5.0 and continue developing with this amazing Content Management System and Plugin. Thank you WordPress team for keeping up with your amazing work and allowing the community to grow faster with the ability of rapid development for amazing websites.
What’s new
The Gutenberg was the big promise that was released earlier and was published as the new default editor in 5.o with the message of Freedom to build and write. That pretty much describes it. WordPress had aimed to be a pioneer in blogging and publishing content and had supported writers and journalists with their free platform for years. The Open Source nature enabled the community of developers to shape many amazing extensions and front-end themes to take WordPress beyond a publishing tool. It’s now finally that WordPress is claiming the freedom of building as well as publishing with the new modular editor and ability to build blocks and layouts.
Note upon upgrading to WordPress 5.0, you’ll be faced with the New Editor and it may looks scary. If for any reason, you wanted the classic editor back, search for Classic Editor in the plugin library and bring it back.
You’ve heard the news about PHP 5.6 Depreciation and you’re wondering if you need to update your website or app PHP version to latest version PHP 7.2. The biggest question is do we need to go forward with this update and how much time we have before anything collapses?
The short answers are Yes for the need to update and it’s hard to know for how long. The timeline on PHP website shows End of 2018 as support for PHP 5.6. PHP and states as
End of Life: A release that is no longer supported. Users of this release should upgrade as soon as possible, as they may be exposed to unpatched security vulnerabilities. (From php.net).
The process is easier around CMS websites as the common ones such as WordPress or Joomla and the plugin developers for each would have adopted their codes and you may expect to update the PHP version on your hosting without any impact on the website. Still we recommend enough testing to be done before switching your production sites.
For custom php apps, there needs to be more consideration and testing throughout the project ensuring all functions are compliant with the updated php version.
Where to Start?
Start with contacting your hosting company. If they provide you with a staging environment, you may test this on your staging first and after a good round of testing and not seeing any issues, you could ask the hosting support to update your PHP version. If you have access to cPanel, you may be able find the php version and update it yourself for each account or environment.
Is there any risk on updating PHP Version?
Not really, except your site might go down momentarily with any possible issues, until you could revert back to previous php version. But you could switch back and forth fairly quick.
What is the worst case scenario?
Worst cases are when a function in php is not compliant and breaks your pages on frontend, or worst when it doesn’t appear on frontend, but breaks your data processing and CRUD functionalities.
How to deal with the issues?
If the hosting support cannot quickly identify the issue and update, it’d be best to revert the site back to previous php version and call your developers to work on these updates.
To ensure you don’t deal with any server security issues in your codebase, start testing early and adopt to the updates that will be less costly than dealing with consequences later.
Our website is hosted by the amazing WPEngine team. With their solid backend with multiple staging and development environments and quick backup and reverting options, there’s always little to worry in case anything goes wrong. For the PHP upgrades, they provided lots of heads up notices and an awesome little feature on the dashboard to preview each site with PHP 7.2 for easy testing.
I recently spent some time on our website readability. The goal was to find out what makes our content more readable and ultimately the overall delivery of our message through out text and visuals embedded in our website. I started searching and immediately found few impressively quick and simple techniques, I will share here.
Starting from just a small team of hands-on staff, we’re now at a point where phone calls and emails from our clients demand our constant attention.
This attentiveness is necessary to keep pace with the ever-evolving demands of client communication. The introvert in me tends to shy away from this communication and stay focused on the tech and coding side, but as we are a business, time must be spent on the business side of things. Things like planning and sales forecasting. Things that are uncharted territory. Even intimidating. But my perseverance through it comes inspired by the fact that our clients love what we do. And part of that love is because many of our clients previously struggled to find a company that does what we do in the way we do it.
Mission was to search for some potential clients and projects. I have gone back to my whiteboard (Sketch app) a few times to draw the map of our conversions. We just launched a new website with some conversion optimizations and simplifications made in our information architecture. We normally test our new websites by flowing some additional traffic to the site with various marketing and SEM pushes like Social Media and Paid Ads: it helps us to get an immediate response from new visitors and learn quickly from their first impressions. It was time to execute our SEM plan for this stage and watch the visitors’ response!
Researching the best CRM Tools
After getting the website, the landing pages, and all the media outlets ready, it was time to run the ads, and still here I am; picking which CRM to go. This was not the last-minute homework since I enjoy testing apps and I have become really good at it. But there were so many CRM tools with many interesting features each that I felt like being in a toy shop, amazed by all the cool toys. Needless to mention that each comes with a nice price tag and I only could pick one or two at most. After almost two weeks of research and broader testing, I have narrowed down 6* modern CRMs and I am down to maybe one or two from all to give our company what we need.
*Zoho CRM, Pipedrive, ProsperWorks, Contactually, Insightly, and Nimble.
If I narrow down my criteria of search, I was looking for a few specific features:
Integrations
Contact management
Integral Forms
Sale Pipelines
Lead Nurturing and Sales programs
Most CRMs that were tested had all 5 above elements with their twists and various User Experiences and focuses. I put my research together to make a final decision and rank these against one another for our use.
CRM Tools Comparison
Given that most of the CRMs have API interactivity embedded, using an external application on each of these CRMs is technically possible to make any interaction happen. The extent of this ranking goes as far as testing the difficulty of integrations to unlock each feature. That is based on our interest in using CRM for our web company requirements, preferences, and resources. We have also left many other CRMs out of the scope here in this review, and I’m sure they require attention when it comes to finding the fittest solution in other scenarios.
After ranking my preferences through test drives, google search, watching videos, and all the figuring out – I’m still having a hard time picking one. At this point, I’m certain one CRM might not be able to get everything perfect, but each of these apps perhaps perfects one or more areas they are made for.
What I looked for in these CRMs
User Experience is actually really important to me. Makes me use the app rather than having a rough time dealing with it. That’s why I really loved Contactually at first sight; they really take this idea to next level with the Contacts Gamification. I have to admit, with using some of the right tools, Marketing becomes way more fun than just cold call sale pitches. The whole idea behind Contactually makes sense to find, capture, nurture, and develop leads in programs.
Nimble has been awesome in centralizing and importing my contacts so quickly. The sales pipelines and deals are nifty and easily navigated. Their recent feature for email tracking takes Nimble to the next tier for me and makes me think they haven’t stopped perfecting this young and fast-growing app.
ProsperWorks was so wonderful to try; felt at home as soon as I landed in the Material Design Google-like dashboards and quickly found my way around. There has been so much thinking I believe in the design of this app and its integrity. ProsperWorks literally lives inside your Gmail and tracks every email interaction.
I’m starting to have a love and hate relationship with Zoho. They have covered so much ground in their products and so many good utilities within their various apps. The CRM itself is really practical in many ways and customizable. Sales IQ takes the whole Zoho CRM to another level. Yet, some stuff are hidden behind doors and takes a while to get around, I just wished these all came under one roof with a single price tag.
During the next test, I couldn’t hide my excitement to want to work with Contactually. It made a really good impression with its quick uptake time and by solving many immediate problems through a simple to understand and usable application. There are missing features for us such as Visitor interactions tracking, Live Chat, and WebForms. I had to go back quickly to the whiteboard, and group my workflow criteria into some priorities here:
Conclusion
Looking at the basics, I compared this flow with the apps and checked which satisfied the most practicality for our use case.
Contactually had my first choice of interest, but it does not cover much of the tracking work. Looking back, almost none of the above CRMs were strong in tracking the conversions but allowed APIs and integration to other 3rd party apps. Zoho CRM made it slightly simpler and much stronger with the addition of Sales IQ app integration. On the other hand, tracking information from email communication was available in most apps.
Aside from tracking — it may have been too much to ask — I found all other tools capable of Collecting, Segmenting, Engaging, and Nurturing fairly well. Contactually has amazing interesting twists in getting the job done. Nimble is compact and offers a lot. ProsperWorks works elegantly in no time. Pipedrive is simple but well equipped with amazing features.
What’s your choice? Leave a comment and tell us why you like your choices of CRMs.
If you have been coding the web for a while (like myself) you’ve probably come across the “lovely task” of how to maintain CSS without losing your sanity. Let’s be honest, even with the release of CSS3, the language evolved a lot and now we are capable of doing things that were only possible with javascript. CSS, at its core, still is a cascade stylesheet and this makes things a bit complicated when your project scales up and is maintained by a team of developers.
A meme is worth a thousand words
I am all about performance. If I can make something work faster, lighter, with fewer requests, I will. When it comes to CSS, I try to keep it tidy, organized and as small as possible. In this article, I will share my approach to achieving this task.
Methodology
First thing before you start writing any line of code. Pick a methodology. There are already a couple of approaches out there, all of them developed by very smart folks that faced this problem before us. If you don’t know what a methodology is about: they define a set of rules that give purpose to your CSS classes. In this way, you can categorize and divide (modules) code and reuse it as much as possible.
I will explain a bit one of the different approaches you can take. In this case, it will be SMACCS because it’s the one I use. However, you can also see BEM, Atomic, OOCSS. All of them are good.
SMACCS
Stands for scalable and modular architecture for CSS. In a nutshell, SMACSS defines 5 rules:
Base
This you can think of a CSS reset. All rules necessary to standardize your CSS project. No classes or IDs in this section.
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
Layout
Set of rules to define your structure. These elements are meant to contain modules inside of it. They set boundaries to produce the layout. E.g: a page with a 2 column layout. Main content / sidebar
Elements that build your pages. Things, like carousels, hero images, buttons, etc. They sit inside layout and should be designed to be a standalone component.
Pretty self-explicatory. This is rules that overwrite the default CSS applied to an element to apply a different state. This could be a navigation that is collapsed, a button that was clicked, a field with incorrect information, etc.
/* Following previous button example */
.is-active {
background-color: gray;
}
The last rule would be Theme. However, this is something not too many projects share. I will recommend you to check SMACCS documentation (or book) if you are interested to know more the methodology.
I hope you can see the value of having a foundation and why is so important to start with it. Your project will get a structure that everyone in your team knows and can follow. This approach gives you scalability and organization.
Naming convention
After looking at something like SMACSS you are probably thinking: “well if I and my team are going to stick with a methodology we should probably call things the same way”. YES, you are absolutely correct. Naming conventions have been around since the beginning of computing science, they help teams to align things and reduces time on simple tasks like finding a class or file.
CSS is not the exception. You should be able to read anyone’s code and understand if it is a module or a layout (if you are using SMACSS) as well as if you need to create a new class, there are rules to make sure you follow the style guide. This is all really attached to code standards (that’s a topic of its own). But you get the idea… and please, let’s not fight about tabs vs spaces (I am a tabs guys … ? don’t tell anyone).
The previously mentioned methodologies define naming conventions as well and you can use them if you want. I will give you an example of what I normally do.
CSS
// Module
.nav { // Modules are always on word no hyphens
// ... code
}
.nav--large { // Submodules are at the same label. always use --
// ... code
}
.nav__item { // Subcomponents of a module are always follow by __
// ... code
}
.nav-is-fixed { // State indicates something that's toggled
// ... code
}
HTML
<ul class="nav nav--large">
<li class="nav__item"></li>
<li class="nav__item"></li>
<li class="nav__item"></li>
</ul>
<!-- then javascript kicks in and modifies nav -->
<ul class="nav nav--large nav-is-fixed">
<!-- ... code -->
</ul>
When a project gets setup using this kind of approach. The time invested in debugging is reduced considerably because you know where to find the code you are looking for, what does it do and how it’s called. This is a MUST for any mid-large scale project.
Preprocessors
I am sure you are familiar with these ones. However, it’s necessary to mention them. I don’t really know who writes “CSS” anymore. We all are lazy, let’s be honest. No one wants to write more lines of code… well, that’s exactly what our friends the preprocessors are here for.
They will help you to write less code, format it in a different way, implement some basic programming logic and then finally dump a CSS file that can be used by the browser. The most popular preprocessors are SASS, LESS, and Stylus. However, lately, SASS has taken most the market. So if you are not already using one and you are planing to do so… I would say, go for SASS.
I won’t explain how to use pre-processors because there’s ton of information about it. A good start point is the _documentation_ section for each one of them (good and straightforward) or you can read “An Introduction to CSS Pre-Processors: SASS, LESS and Stylus”. However, I will explain the parts I consider important for mid-large projects.
Variables
Being able to define variables in your CSS is the key. Large projects are probably going to have a design style guide defining primary colours, secondary colours, fonts, breakpoints, etc. This is the kind of things you want to store in variables and reuse it across your codebase.
//If we rebrand the project and in 2 years the primary color is red. We only need to change it in one place.
$color-primary = blue;
Imports
CSS codebase can get big. Break it down into different files that can be imported into a master file. That’s the one who will get compiled and dump the CSS for us. Base your files in your methodology. E.g: if you are using SMACSS, a file for base, layout, one per module, etc.
// Breakdown your codes into smaller files
@import "base";
@import "layout";
@import "module-01";
@import "module-02";
Functions (mixins)
the same way we use functions in any programming language to make units of code that can be reuse. Mixins provide a similar approach for CSS. You can do things like rounded borders, breakpoints, circular images, etc. There are tools with pre-defined commonly used mixins:
// Don't ever write media queries anymore. They are long an annoying.
@include breakpoint( $screen-mid ) {
// ... code
}
Preprocessors are wonderful and definitely make our life easier. However, they can be our worse enemy as well. While things might look really neat and simple in your .scss file. The final .css file might be a complete mess.
This tends to happen when we use nesting more than what we should. The code gets compressed and compiled and ends up being a massive line of repeated CSS selectors for only one rule.
To avoid deep nesting. Use a rule of thumb: no more than 3 levels deep.
In the second part of this series we will be discovering the other key elements for managing CSS in mid-large scale projects:
Where to Start?
