OPTASY: Drupal Web Development Agency Toronto
(416) 243-2431Drupal SupportRequest A QuoteQuote

Main navigation

  • Home
  • Services
    • Digital Strategy
    • Design
    • Web Development
      • Drupal
      • WordPress
      • Magento
      • Laravel
      • Shopify
      • Sharepoint
      • Contentful
      • Gatsby
      • Next.js
      • Node.js
      • React
      • AngularJS
    • Mobile & App
      • IOS
      • Android
      • Augmented Reality
      • Artificial Intelligence
      • Virtual Reality
    • Maintenance & Support
      • Drupal Maintenance
      • Wordpress Maintenance
    • Staff Augmentation
  • Portfolio
    • Web
    • Mobile
    • Ar
  • About
    • Who we are
    • Values
    • Events
    • Awards
    • News
    • Careers
    • Partners
      • Acquia
      • Google
      • Pantheon
      • Shopify
      • Wordpress
  • Blog
    • Drupal
    • Drupal 8
    • HTML
    • CSS
    • Javascript
    • PHP
    • Microsoft
    • Web Design
    • Design
    • Tips
    • News
  • Contact
(416) 243-2431 Drupal Support Request A QuoteQuote

In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

How to Improve the Collaboration Between Designers and Developers: Simple Tips on Preparing Design for Coders
CSS
Tips

How to Improve the Collaboration Between Designers and Developers: Simple Tips on Preparing Design for Coders

by Adrian Ababei on Apr 25 2016

As we all know, programmers and designers don’t have a lot in common in terms of workflow or the software used to complete their tasks. Communication and synergy between programmers and designers can either make or break a project.

How can you improve your work with a programmer? Implementing a clear workflow and respecting it is crucial – both parties need to provide feedback as work continues and a clear plan of action needs to be set in place for the current project.

Start planning your project

Simply shipping your design work over to the programmer may work on very small tasks or smaller projects but for larger, more complex projects it could turn into a disaster. The workflow needs to be accompanied by careful planning.

Your average plan should include a schedule estimate and an approximate cost. If you’re building the project for a client, cost estimates are mandatory. Project planning needs to also account for how an optimal collaboration can be reached – the small details count in this phase.

Prepare your design for coding

Instead of simply handing over your design work along with a few requirements to the programmer and waiting for the results to appear, designers need to also focus on things which will enable the programmers to help them in the long run.

Here are a few aspects and tips you need to take into consideration when producing your design:

Your key objective is Pixel Perfect – If you want your programmer to implement your design work properly, you need to provide him with exact details – elements such as colours, style, fonts, margins and padding need to be specified exactly before the programmer can begin his portion of work.

Keep in mind that by doing this you eliminate the need for future changes or revisions – as a result the overall cost of your project will be reduced.

Follow Photoshop Etiquette – Designers should properly name layers and structure their files accordingly. Images need to be aligned and the programmer needs to be provided with plenty of information – it goes a long way in building your project and speeding up your workflow.

Keep in touch with the coder – It’s a good idea to maintain contact with the coder on a regular basis and ensure he has all the information he needs to properly do his portion of the project. Developers really appreciate it when you provide your support.

Designs for interactions are important – These designs can be a great help to your coder as well. Examples can include the intended use of sliders, button hover states, dropdown menus and others.

Research on the technology used – You’ll get a better understanding of what’s feasible from a programming point by keeping up to speed with the latest tech trends. Sometimes designers may ask for features which are simply impossible to implement.

Don’t rush, time is plenty

Planning ahead, coordinating your work and providing clients with meaningful estimates will save you a lot of time in the long run. Transparency will help all people involved to get a better understanding of the overall project and speed up the workflow.

Share the article

Development

We do Web development

Go to our Web development page!

Visit page!

Do you want a website

or app developed?

 

Get a Free Quote

and let's make it work!

Get a Quote

Recommended Stories

CSSTipsWeb Design
How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices

How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices

Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?". For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it. Or if it's interactive, but only when... mouse clicked. See my point? Therefore, in today's post I'll tackle aspects like:   what accessible icons are what goes into making icons accessible: most effective approaches and best practices what are the different types of web icons and the specific techniques for making them accessible    Let's dive in:   1. What Are Accessible Icons More Precisely? What makes an icon accessible to screen reader users? What requirements should it meet to be fully inclusive? Here are the 6 most important things to consider when you're designing accessible icons:   1.1. Make Them Noticeable For, it's pretty logical:  If an icon's not instantly perceivable to all visitors, it becomes inaccessible. And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible. 1.2. If It's Purely Decorative, It Shouldn't Be Read Out One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users. That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous. Which leads us to the next requirement that all "wannabe accessible" web icons should meet:   1.3. Always Add a Text Label The magnifying glass icon is universally recognized as a "search" tool. But that's the only universally recognizable icon... Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors. Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.   1.4. Keep in Mind the Color Contrast  This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon: Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.   1.5. Make Sure They're Properly Sized And by "properly sized" I mean somewhere around 44x44 pixels. Pay particular attention to the size in the case of icon links: Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.   1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible Have you decided to "sprinkle" some interactive icons across your website?  Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that. 2. How to Make Icons Accessible: 10 Approaches & Best Practices  Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part: How can you make your web icons more accessible for screen readers users? Here's a list of simple approaches and valuable tips to consider:   2.1. Consider Pixel Measurements and Square Dimensions  Most icons have square dimensions.  And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:   128x128 16x16 512x512 64x64 256x256   2.2. The Easiest Way to Make Your Linked Icons Accessible Is to... ... add an ALT-text that lets the user know what the link does. What its destination is. For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon. 2.3. When In Doubt, Choose an SVG or a PNG File Format  Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this: Icon fonts should be the very last option to consider.   2.4. Make Sure Your Document and Your Icon Are The Same Size    2.5. See that There's Enough Icon-Background Color Contrast Will you be adding your web icon to a background?  If it's a yes, then check and adjust the color contrast.   2.6. Check Your Icon's Size Before Exporting It The 6th tip on our "How to make icons accessible" is pretty... predictable: All web icons should be properly sized prior to export, making sure they're not too large.   2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.  You want it to be visible to screen readers only. For this, you can use a visible-hidden class selector.   Word of caution! Going with this solution does call for 2 compromises:   the click/touch area is smaller screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home"). 2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity "What's a semantic icon?" you ask?  A standalone icon that has meaning.  Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.   2.9. The Simplest Way to Make Icon Fonts Accessible Is... ... to add aria-hidden="true" to the element. Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.   2.10. Skip Adding ALT-Text to Text-Based Icons Let's say that you have an "Email Us" linked icon.  Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it? In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.   The END! Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question. But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.  We're here to help! Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website. Image by Виктория Бородинова from Pixabay  ... Read more
Adriana Cacoveanu / May 06'2020
CSSDrupalDrupal 8Javascript
How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?

How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?

With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely? How does this (not so) new approach in software development benefit you? Your own team of developers... And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine... Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites. But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.   1. But First: What Is a Component? It's a standalone piece of software that can appear in multiple places across your Drupal website/application. One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like. In short:   one single component can be used by several types of content any update to its template/style would automatically reflect on all those content types, as well   Accessible via an API, this independent piece of software explicitly defines all its application dependencies.| Your team could then easily architect a new interface by just scanning through and selecting from the library of components.   2. What Is Component-Driven Development? What Problems Does It Solve? A succinct definition of component-based software engineering would be: A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture. “And what challenges does it address?” It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get them implemented. No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for. Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure, for you then risk investing too little time in... building them properly.   3. Component-Based Development in Drupal 8 Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:   with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app   the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)   you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)   By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient... 4. The Top 6 Benefits of the Component-Based UI Approach   4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams... It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects. A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...   4.2. It Accelerates the Process of Turning Your Visual Design into a UI  Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:   he/she translates parts of it the... wrong way he digs up all types of “surprise” issues     By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less.  With:   a pre-defined component architecture to rely on well-established standards to follow a whole library of component templates at hand   … there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface. Not to mention the reduced delivery timelines...   4.3. It Streamlines the Whole Development Process  “Sustainability” is the best word to define this approach to Drupal software development. Just think about it:   whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand   … and “inject” it into the app/website that he's working on   in case that element needs further updating, the developer will already have the baseline to start with   … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended   And that can only translate into significant savings of both time and money.   4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process. With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.   4.5. It Enables You to Systematically Reuse Your Components And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well... Just think about it: by having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge... In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”. With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.   4.6. It Integrates Seamlessly into the Development Process  By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included... Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team. In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review. With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.   The END! This is how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach? Image by Arek Socha from Pixabay ... Read more
Silviu Serdaru / Apr 11'2019
CSSHTMLJavascriptTips
How to Create an Angular Project with Angular CLI in 5 Simple Steps

How to Create an Angular Project with Angular CLI in 5 Simple Steps

About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process. … to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least).  And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide. So, here's how you create and run your first Angular project via the Angular command-line interface:   1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process? Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you:   it's practically geared at empowering you to get up and start developing a new Angular app in no time it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component   Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it. Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are:   real-time server maintenance and support building applications for production adding new features to your existing app  running tests on your application units    2. Setting It Up: Install Angular CLI Globally Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally! And this is the “power” command to enter in your terminal with the npm installed: npm install -g @angular/cli Notes: if you already have the CLI installed, make sure it's the latest version if you need to update it, these are the commands to enter: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions: Node.js: v6.9.x + npm: 3.x.x +   3. Create an Angular Project With Angular CLI With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies: ng new ng-yourproject Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored. Eager to test it out? Just run the following command in your terminal: ng serve   Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see: Basically, it's the default application shell itself rendered by the CLI.   4. “Deconstructing” Your New Angular Project: What Does It Include? Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box? For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder:   src/*    styles.css any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice)   index.html  where your Angular app gets started   src/app/*    app.component.ts this is where your app's one and only (for now at least) component gets stored   app.module.ts  the modules Angular needs for managing your app's components note: @NgModule marks the class file as a module and this is what makes it similar to @Component   5. Create a New Component  Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project? Well, how about creating a new one now? One that would load under that root component? Just run the following command to generate it: ng generate component the-quote Next, time to “show it off” in your browser: <h3>{{myQuote.quote}}</h3> <small>- {{myQuote.by}}</small> Add the app-the-quote selector to the root component that the CLI generated in your Angular project: <h1> {{title}} </h1> <app-the-quote></app-the-quote> 6. Apply External Styling  Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step. So, let's add your favorite CSS framework to your new application! Me, it's Bulma that I'll be using in this tutorial here: npm install bulma --save With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely. ... "styles": [ "../node_modules/bulma/css/bulma.css", "styles.css" ], ...   “Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link. For this, just include the stylesheet right into your index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Et voila! This is how you create an Angular project with Angular CLI! What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started? ... Read more
RADU SIMILEANU / May 25'2018

Browse cities

×

Toronto

WordPress Development Services in Toronto
iOS App Development Services in Toronto
Drupal Development Services in Toronto
Magento Development Services in Toronto
Laravel Development Services in Toronto

Montreal

WordPress Development Services in Montreal
iOS App Development Services in Montreal
Laravel Development Services in Montreal
Drupal Development Services in Montreal
Magento Development Services in Montreal

Vancouver

Magento Development Services in Vancouver
iOS App Development Services in Vancouver
Drupal Development Services in Vancouver
WordPress Development Services in Vancouver
Laravel Development Services in Vancouver

New York

WordPress Development Services in New York
Laravel Development Services in New York
iOS App Development Services in New York
Drupal Development Services in New York
Magento Development Services in New York

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

contact@optasy.com

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York

Newsletter

Get the latest OPTASY news, tips and how-to’s on the go, right in your inbox!
OPTASY
clutch
Pantheon Premier Partner
  • Drupal 8
  • Services
  • Contact Us
  • Partners

  • Drupal
  • Google
  • Magento
  • Shopify
  • Wordpress
Facebook
Twitter
LinkedIn
Drupal
  • Cities
  • Support

© 2023 All Rights Reserved. Built with Drupal