Visual hierarchy, especially on an e-commerce website, is a way too powerful “weapon” for you to underestimate it or to ignore it! When used right it empowers you to steer your visitors' attention on key elements on your website and, moreover it eases their “job” as visitors (possible future shoppers), too. We all need guidance so that's precisely what you'll be offering your visitors: guidance. You'll build “bridges” between different types of content on your website so that they can navigate through, smoothly, without getting disoriented or discouraged by a rigid, monotonous block of content. By joggling with different sizes, with contrasting colors, with spacing and with overall layout, you determine what gets noticed first and which elements on your website carry more “value”. Therefore, you discreetly guide your visitors towards “key” components doing them a favor: making their journey time-efficient. They get from point A to point B (your shopping cart page) as quickly and intuitively as they hoped when they landed on your website. Your make your website “usable”, you upgrade it with “usability”, which is the to foundation stone of user experience. Enough beating around the bush now: here are 6 “way too powerful for you to ignore” methods that you could use for crafting efficient visual hierarchy on your e -commerce website, 6 techniques that any Toronto web designer should add to his/her own "toolbox": 1. Be Generous With Your Negative Space Remember that we've “talked about” the white space's importance when we pointed out how the human brain reacts to differently to different colors (in our post on user psychology and web design)? It's there that we mentioned that white space “helps you put together a clean, pure design, one showcasing certain elements of your work“? Well, well, well! It's time to start perceiving this “empty space, “white space” or “negative space”, however you wish to call it, as a distinctive “element”, one claiming its real importance, and not just as a “absennce of elements”. Once you've started perceiving it as an element on its own, you should consider it the card up your sleeve that you could use for grabbing your users' attention and for steering it towards elements of high importance on your website. How? Here are just a few examples: be generous with spacing between paragraphs and with the margins framing your blocks of text so that your shoppers can perceive your written content as “important” (we talked about “adding value” through visual hierarchy: well this is an example of “how it's done”) and “digest” it more easily put your call to action button into the spotlight by simply adding more negative space around it. It's that white space that will set it apart from the rest of the elements on your website and make it instantly pop out! dare “derailing” from the so very “trendy” and overly used web deign practice where you place a large image on your front page to draw attention to and you “suffocate” it by other elements crowded around it. Give this central, visually-arresting image a bit (jut a bit more, no need to exaggerate now) more space, white space, and you'll instantly balance out the whole layout and, moreover: your attention-grabbing central image will grab even more attention now with that “barrier” of negative space framing it! 2. Juggle With Different Sizes Get playful, get daring, but mind you don' forget that: balance makes it efficient after all! Therefore, enjoy the power of “manipulating” that size invests you with, make sure you don't “sabotage” yourself! Neighboring elements of different sizes, where some are a lot bigger than others, will draw attention to the oversized one, that's true, but it might as well cast an unwanted veil of shadow on still quite important sections on your website. And you don't want that! So, make use of this technique while remaining conscious of its counter-effects, of the importance to keep a certain balance in everything. When it comes to e-commerce web design, we recommend you to play with sizes on your homepage, on the key imagery and text that you have there! 3. Think Contrast When Choosing Your Color Palette As we already mentioned in the introductory paragraph: you need to adopt a more refined color contrasting technique than the now rudimentary ones like: “paint it all in red” or “set it against a background in a muted color”. You need to start thinking through how you actually pair those colors, how you group them on your site. Go for wining “combos” of red-and-green, yellow-and-purple, orange-and-blue and variations of these combinations of complementary colors. Think through the selection of your call-to-action and sales announcing elements. Challenge your skills at pulling off the most efficient eye-catching color contrasts: go for a black background and neon colors or simply make sure the elements on your website (images, texts) neighboring thoae key elements that you want to draw your visitors' attention to, are in contrasting colors. So, you've got our point: bid on color contrast and start viewing the colors on your website as parts of a whole “ecosystem” where each color can outshine/be outshone by or highlight/be highlighted by its neighboring colors. 4. Grab Attention Through The “Static vs In Motion” Effect It's a scientifically proven fact: our attention gets instantly caught by things/persons in motion. The question that arises now is: how are you going to use this information for determining, in advance, what your shoppers should notice first once on your website? You have three options for getting the most out of “motion's power”: you add one or two discreet animations here and there, on key places on your website. And here we need to stress this idea of “discreetness”: your animations should be subtle; it's highly important that you don't go too far. It's quite easy to overdo it, you know, and instead of “cunningly” driving your visitors' attention towards the elements of major importance to you, to annoy them instead, to drive them off your website due to your too flashy, bling-bling animations. Not only that these “overly flashy” animations will annoy your shoppers, but they'll steal even the minimal attention away from the other elements on your website. And you don't want that! you add an auto-playing video. Again, be very cautious not to go for a too absorbing video that leads to nothing (no subscription, no purchase). One of the best practices in this case it to design pages around your video, that your visitors should be discreetly “tempted” to access. you go for a photo-video hybrid. They're such a popular trend in e-commerce web design these days! No wonder, for they put together the visual power of an image with the one of a motion, the latter being so discreet and idealy subtle. Therefore, it comes with the advantage of not outshining the neighboring elements. It's a type of motion-implying (visual hierarchy providing) technique which works wonders especially when applied on a visual that's already stealing the spotlight on your website (e.g. the large central image on your front page). 5. Set Up a Scanning Pattern No need to strive to reinvent the wheel, when you can just as well use it to your own benefit! This is the case with the ways users usually scan through the content of a website: there are two main human behavior-determined, already tested patterns: no need to invent a third one. All you have to do is pick one or another. So, which one will it be? The F pattern or the Z pattern? Even the web design forums in Toronto are divided in 2 groups, depending on the scanning pattern they prefer. Let us detail each one a bit before you can make a decision: they both start in the upper left of the website (where usually logos are placed), go all the way to the upper-right corner (so this explains why upper page horizontal navigation bars still rock) and it's from there that they go on separate ways in the F pattern the user's eye returns to the left side of the screen sort of mimicking the left-right-left-right eye movement specific to the act of reading (this is why this pattern is used predominantly on blogs). How is it useful on your e-commerce website? It enables you to nicely structure and display rows of images that shoppers can easily scan through. A “trick” you could use when adopting this pattern is to display secondary promotions on the right side of your website. It's there that the user pauses for a second or two before going back to the left side of the web page. So, “exploit” that short pause, so to say! the Z pattern is already an “emblematic” one for front pages. Here you have the upper row, then the attention-grabbing image in the center of the page, presenting the site's man features or showcasing its products/services, then the bottom row. It's an ideal pattern for pages centered around one single action: such as landing pages or one page presentation websites, but it can be effectively adapted to the specific needs of an e-commerce website. 6. Set Up a Rhythm Only To Break It In The Name of Visual Hierarchy Crafting a truly effective visual hierarchy is all about mastering the “establishing vs breaking up” patterns technique! By simply derailing from a repetitive construction on your website you'll instantly draw attention, you'll break up the routine and “make them wonder” while they pause on that disruptive element. Therefore, dare breaking up the repetition you will have set up in your layout organization, in the whole structure of rows on your website, for drawing attention. Then, feel free to “exploit” the empty space you will have created there, in that section on your website “different” from the rest, for placing the key element(s) that you want to draw shoppers' attention to. Maybe “manipulating” is a too strong word, but it describes perfectly the power that a strategically constructed visually hierarchy places in your hands. Give it a try! Pick one of our suggested techniques and see how it works for influencing your users' behaviors on your e-commerce website!
Adrian Ababei / Dec 20'2016
“My team of content writers “bursts” creativity, so why should I waste any more priceless hours/days planning content? They're all talented, they're adaptive, they'll figure out what type of content to craft and to deliver on-the-fly!” Let's assume that it is you who's uttered/thought the above question (or at least one differently formulated, but conveying pretty much the same idea)! Our answer to it would be: “ then you should be even more motivated not to waste your team's outstanding load of creativity and remarkable talent by sending them out on the “battlefield” with no type of “ammunition” whatsoever, backed up by no strategy.” They might just end up wasting all their talent and creativity doing “urgent fixes”, responding to unexpected content challenges, joggling between the time they would spend on writing and the time needed for planning future topics. And here you can easily add all the frustration issuing from the fact that your competition will have taken the necessary time needed to understand what the users in your shared market need and, therefore, what they search for when they go online. Now, wouldn't that be such a shame? Such a waste of talent and resources! So, think about taking some valuable time to sketch your content outline as a “gift” (that's right!) you're making both to your team and to your visitors: for your team (although it might seem such a dread to spend a few days sketching, drafting, debating upon, brainstorming and coming up with a V1, V2, V3... Vn structure) it's a guarantee that their workflow will unroll as smoothly and as organically as they hope. Once the supporting structure of your website is set up, your information architect and your content writers will just have to comb through the existing material and “populate” those pre-established pages with high quality content for your visitors, it's also a guarantee that once they land on your website their own journeys will be as intuitively as possible. Everything will, by then, have been properly tested and ideally structured: where the homepage links to, how each page opens up a different sub-page, how all those sub-pages interact with one another etc. And now that we've tackled the “why”, let's detail the “hows”, too! Here are the main steps that we take whenever we design our own content outlines for the web development projects (whether they imply building brand new websites or revamping old ones) that we work on here, at our digital agency in Toronto: 1. Draft Your Website's Architecture This is the very foundation stone of every successful website in the online landscape! Although the process might vary to some extent from website to website (depending on whether it's a corporate presentation website, an e-commerce website or maybe a blog instead), you can easily boil it down to 2 main stages: you put together a structure with all the pages and sub-pages that will form your website you set up a content strategy before you stat writing any piece of content for your new (or your newly revamped) website I bet you've sort of guessed these 2 steps already, haven't you? Just that probably you haven't yet labeled them as “must-follow” and included them in a whole content strategy, right? It's during this preliminary stage that you set up and organize all your pages, including your navigation structure. While putting together this structure you're actually trying to sketch your visitors' journeys/behaviors on your website, as well. Where will they be more likely to head to after visiting your homepage? Which are the pages on your website that he/she'll visit more frequently? It's also the step where there's a lot of research to be done (nobody said it would be all just brainstorming and “bursting” innovative ideas; there a lot of “dirty work” involved here, as well): study your competition's content, “ask Google” what your target audience is usually looking for online, which are their points of interest, their needs etc. The good news (for there is also a bright side to it, it's not just researching and putting together intricate structures) is that you get to be as loose as you want to at this point of the content outlining process! Write down everything that crosses your mind, scribble notes, doodle, dare to come up with different visions of your website's final structure, feel free to revise and to constantly improve your draft! This is the step where you're allowed and even encouraged to do all that. Later on, once you have all your content strategy and content structure set up, it will be far more difficult to apply changes without risking to affect your website's whole information architecture. Therefore: feel free to express all your bold and daring ideas. Now it's the perfect time for that! 2. Jot Down Your Content Ideas OK, so now that you have the whole “skeleton” of your website put together, now that you can easily visualize what role each page plays in the big “puzzle”, how about starting to liven it up with some content? Take baby steps, don't rush in to write long descriptions of all the future posts! Instead, start with a brainstorming session where you put together the topics and headlines. So, topics and headlines! By now, after all your research that you've "enjoyed" doing during the previous step of your content strategy planning, you must already know which are the many points of interest of your future visitors. Rely on your findings for jotting down your future topics and, from there, try coming up with some possible headlines, too. It will be a good idea to try and put down some possible keywords, too, and even maybe to write down some short descriptive sentences about each topic that you will have settled for (we guarantee you: these sentences will be “gold” later on, when you start to actually write content for your website). Note: try remaining as “flexible” as you've been during the previous step. “Populate” each page and sub-page with possible topics and headlines, but take them as “hypothetical”, don't be afraid to revise and to replace them with more suitable ones if the context demands it. 3. Plan The Content That Will “Populate” Each Web Page Now it's time to go deeper into your website's “skeleton” and, after you've jotted down ideas of topics and headlines, to actually outline what type of content will populate each page. Will there be image galleries, tables of contents, slideshows, embedded videos? And if so, how will they be distributed on your website? Feel free to write down a few words about your possible future posts, headings and sub-headings, everything content-related that crosses your mind at this point. Plan all the types of content and their place on your website and you'll thank yourself (or at least your team will definitely be more than grateful to you) later: once you can see the big picture, it will be so much easier to just get down to work and to actually create the content itself. Let's sum up these three major steps that any “healthy” content outlining process should include: setting up your website's architecture writing down ideas for each one of your web pages conceiving and structuring the specific content that will populate each one of the pages And this is how we do it! This is how we structure the content that's “scheduled” to breathe life in the websites that we build here, at OPTASY.
Adrian Ababei / Dec 19'2016
We're back with 5 more (priceless) storytelling design principles for you, as promised in our previous post! 5 other means for crafting an engaging story around your brand/products/services and for telling it on your website as compared to “just” presenting/showing stuff on your site. And before we break them down, let's recap, very briefly, some main points from Part 1: your story is already unique, but you need to make it interesting as well your story should focus on interactivity and it MUST engage your story should put together a whole experience (an authentic one, one that users can enjoy only on your website 6. Make Them Interact With Your Story Remember those really good stories from your childhood? And by “good” we mean those that had the power (or maybe it was just the talent of the storyteller himself/herself?) to get you in the story itself. How they managed to stir your imagination to the point that you were the main character yourself, you were in the story, fighting bad guys, rescuing princesses or being a rescued princess yourself? Well, that's (more or less) the same effect that your visual storytelling should have on your users! The effect that your web design and development efforts should focus on. Your users should be subtly “dragged” in the story and turned into its lead characters. Besides engagement, interaction in visual storytelling means discreet guidance, too. Your visitor should feel, as if he's getting deeper into your story while he's navigating on your website; as if he's turning over the pages of a book. Make sure you insert all the right directional cues, so that your user's journey, from the “once upon a time” on your homepage, all the way through the “intrigue” (your products pages) and up to the last “happily ever after” (your shopping cart page/subscription page) is as fluid as going from one chapter to another. 7. Let Your Mascot Tell It For You Mascots make some great alternatives to “client testimonials” taking the role of storytellers, to a rather invisible storyteller or to the team itself telling your company's/brand story. It can be either the storyteller himself or a character within the story and it adds that overdose of personality and uniqueness to your visual storytelling (there can't be two identical mascots, therefore yours is as authentic as the story itself). So, think it through: what if a mascot personalizes a character within your story? Don't you think it would breath life in your products/items and help the customer relate to your story far more easily? Homework: try thinking about 3 iconic mascots of worldwide brands and how you'd perceive those companies' products/services if there had been no emblematic mascots in the first place! 8. Let Your Background Image Tell It From silent “story whisperers”, in the background, to secondary characters, to lead characters, large background images can take any role you'd like them to play in your story. When used right, background images can instantly get your visitor in the story from the very front page. So, what role would you invest your background image with: will it be a subtle background image, discreetly setting up the right mood of your story? will it be strategically blurred in some parts and focused in others, thus conferring a felling of depth to your website's design and steering your users' attention towards certain elements of your story? will it be clear and meaning-conveying, telling the story all by itself? 9. Go For Parallax Scrolling and Turn Your User Into a Narrator Here's another great visual storytelling technique that's used more and more frequently in web development and that helps you turn your visitors into your story's narrators. How does parallax scrolling work and help you create that sense of “authorship” in your users? Easy: you get to show different layers of a design on your website and, depending on your users' scrolling behaviors, these layers respond differently. Therefore, there you have it: your visitors get that highly engaging feeling that they're actually the ones putting together the story that's being told on your site. 10. Tell It on Social Media Remember when we mentioned, in Part 1, that visual storytelling is aimed at helping you build your own community, your own loyal audience? Well, social media platforms are an amazing resource for achieving this particular goal. They are, by nature, far more “personal” and thus you get to create that emotional bond with your visitors far more quickly. So, rely on social media for telling/sharing your story. “Write” it with brand-related images that are impressive enough to be shared and commented upon, with events and discussions around your products/services. “Write” it and “tell” just like a traditional storyteller would, by getting the most out of the newest resources of web design. This is it! This is how our list of 10 design principles that are great for helping you design and tell your visual story looks like. How about yours?
Adrian Ababei / Dec 17'2016
“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton). This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website! What does it mean actually? It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible. Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user. Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike. OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message? First, you answer to this 3 major questions: Who is your audience? What goals have you set up for your brand? Which is the message you want to convey? Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling: CONTENT IMPACTFUL IMAGERY INTERACTIVITY Then, you take a close look at our 10 design principles for incorporating storytelling into your web design: 1. Let the Images Tell Your Story Face it: people would always “assimilate” images way better than long, text-stuffed content! Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that. After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand. It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds. In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship. 2. Tell It Through Words, Powerful Words And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book). Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself. Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right). It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance. Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power! Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product. 3. Put a Face on Your Storyteller(s) In other words “breath” some personality and authenticity into your website! Breath some “life” into its design. It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”. In other words: let your team tell your company's story. They're the ones that know it better! Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness). 4. Instead of “Telling” Your Story, How About “Illustrating” It? Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images! The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images. Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used). They're far more dynamic than images, so consider them turning into your storytellers! 5. Tell It Through a Video Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think? Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile. You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video). And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website. To be continued, with our other 5 tips in our next post!
Adrian Ababei / Dec 16'2016
Here's some food for thought: If you don't know where you are, you can't figure out where to head to! What does this mean in the context of a website content auditing? It means that if you're clueless about the content existing on a website (or you have some sort of collected data, but you haven't gone deeper with your content analysis) you can't possibly set up any business goals for the given website. Or you might just draft them based on some superficial insights. How are you supposed to migrate from Joomla to Drupal, for instance, or to apply any improvement-oriented change on a website if you don't know know enough about its whole intricate network of content layers and about how these can affect your whole performance-boosting strategy? So, you got our point: it is vital for you to closely evaluate the content on a website before you rush in to put together any sort of content strategy, before you set up any daring business goals. And Still: Why Is It Crucial To Run a Content Audit? More often than not even your client doesn't have an in-depth knowledge of how the whole content “mosaic” on his website looks like. Therefore, you could see the content audit as the base of the "pyramid” that your whole project is (whether this project implies a redesign, integrating a totally new CMS, migrating the website from an older to a newer version of an CMS, coming up with an SEO strategy etc.). It's the “diagnosis” that you can put on this website and depending on which you can, later on, come up with the suitable “treatment” (aka business development strategy). Here's what you get to “dig up” during this content evaluation process: valuable information about the workflows and content life-cycle certain content patterns “gaps” within the content, that need to be filled up with strategic content you get to identify the “weak” pages on a website, those with low performance How Do You Actually Evaluate Content on a Website? Now that we've pointed out why it is vital for you not to underestimate or, even worse, to skip this preliminary step of every web project, here comes the next legitimate question: how it's done? Well, you practically set up 2 main “barometers” for evaluating each web page: performance per page (analyze HTML tags and keywords) specific business goals And here we need to stress out this last idea: let your specific business goals guide all your insights throughout this auditing process! Note: you should start moving your imaginary magnifying glass across those particular pages of “critical importance” for the given website first! They could be the ones including products/services or the “About Us” page, but it depends greatly on each site's particularities and goals. But What Does This Audit Include More Precisely? 1. Personas If your (or your client's) website's content doesn't “talk the language of” or doesn't meet the needs of its persona, then it's as useful as a beach umbrella for an Eskimo. Therefore, first of all: you need to check whether that persona's profile has already been sketched you need to check whether the already existing content on the website “speaks his/her language” you need to establish, at this point, what content stays as such, what content needs improvements and what content goes, based on whether it's efficiently adapted to that persona's specific profile 2. Content Inventory At this step you “just” pile up all the content on the website. So, no need to “examine” it yet (take baby steps; “patience is a virtue!”, you know), just make sure you collect all the existing content and put it together in an inventory. 3. Stakeholders Meetings They are the ones that have been “pumping up” content on the website, so they should be the ones holding the most valuable information regarding the site's target audience. Therefore, make your your “investigation” includes chit-chats with these key “content handlers”, too! 4. Content Gaps Evaluation Compare how the existing content is performing to how it should have or you would like it to perform in the future. Identify the “weakest links”: on which pages content is less effective than on the rest of the website. Next, after you've identified the causes, come up with solutions, too! How can you fill in those gaps with proper, strategically crafted content, aimed at meeting your visitors/customers needs? 5. Your Competition's Content Evaluation Your competitors' content is “pure gold” for you! “Spy” on them, examine their own content, their whole content strategies, try to identity their own “weakest links”, too. Collect as many valuable data as you can regarding their own personas, how much content, what type of content (whether it's high quality or low quality content) they have on their websites etc. Keeping an eye on competition is a method that will never “grow out of trends”! At least not in matters of content auditing! 6. SEO audit A content audit without an in-depth SEO audit is pretty much like a diet based on exercise, but not completed by healthy foods, too. Only half efficient! So, grab on your imaginary magnifying glass and scrutinize the depths of the website from an SEO perspective: examine the meta descriptions, keywords, URL structure, 404 errors, title tags. Do a little “dirty work”, so to say, which will help you figure out how all mighty Google perceives this website! What Type of “Content” More Precisely? By “content” we do refer to both on-site and off-site content, you know. On-site types of content that you should analyze: homepage category pages product descriptions landing pages blog etc. Of-site types of content that you should analyze: social media ebooks emails whitepapers etc. This macro-evaluation will allow you to identify whether the brand message is consistent through all these various types of content. How Do You “Wrap Up” and Present Your Final Insights? And here you are now, with an impressive “pile” of valuable findings that you've collected during your content audit process. How do you present your conclusions to your client now? Let us give you a few helpful tips: put them all together in a compelling story (never underestimate the power of storytelling) put together a strategy: clear goals+ clear means for meeting these goals select the “key” findings to present start your presentation with good news and continue with “issues” that you've identified during the audit And here is how you run a content audit! At least this is how we run it here at our web design company in Toronto!
Adrian Ababei / Dec 15'2016
Drupal or Wordpress definitely make the most popular CMSs of the moment and considering that they do share quite a lot of similarities, too, making a straight choice between them can get quite energy and time-consuming. How should you know for sure which one is THE one that will respond better to your web project's specific needs? Before you dive into our in-depth comparative review of the two famous CMSs, (that we hope it will manage to steer you in the right direction), we need to put this straight right from the start: there is no such thing as “one is better or worse than the other”. Both Drupal and Wordpress work wonderfully when it comes to suit specific needs, therefore, there' no question of hierarchy here, only a matter of “suitability” so to say. Each one of the two is designed for a specific type of website (and, thereby, comes with a specific set of expectations from its future owner), that's all! Drupal or WordPress: Which One Is More Advanced in Terms of Functionality? Here's something to reflect on: Drupal's far more advanced functionality (compared to Wordpress's) is, at the same time its strength and its “Achille's heel”. How come? It all depends on the level of technical knowledge of the one deciding to “unleash” and handle its functionality. It can lure and be an “irresistible' challenge for some, but it can discourage others! Drupal requires someone with more than “some” technical experience (or at least one who's well aware, from the start, that there is a steep learning curve involved) for handling all its various features- content types, taxonomies, blocks, views- and livening it up to its full potential. Once handled by “technical savvy hands”, it can handle all types of refineries that Wordpress can't: it can handle heavy content and multiple website stakeholders (website admins, content editors, publishers you name it). As for Wordpress, it will definitely manage to cast a spell upon you if have basic technical skills. Designed as a blogging platform, Wordpress's performance can be affected to a great extent if it's “forced” to carry away a too heavy load of plugins and content “on its shoulders”. Otherwise, if you keep your Wordpress website light, it can reach pretty much the same level of performance as a content-stuffed, large-scale Drupal website. See? Told you! It all revolves around the type of website that you need to build (and also around your level of technical knowledge). Drupal is more robust, but it's quite “picky” when it comes to “revealing its true power” to the one handling it: it's a CMS built by developers for developers, after all. Wordpress keeps its performance within good parameters as long as you don't overload it (and it requires zero technical skills, too)! Drupal or WordPress: Which One Is More Flexible? HIGH PERFORMANCE and FLEXIBILITY sure are the 2 pillions of any great website on the online landscape, wouldn't you agree? "Flexibility" is another word for “Drupal”. The CMS practically “overwhelms” you with a wide collection of free themes, modules and tempting customizing options, which you can pick, tweak and use for constantly editing and boosting your website's looks and performance. And yet, it's a “gift with a twist” that Drupal makes you! There's no point in hiding it (and even we, as Drupal developers in Toronto aren't going to conceal this detail): you need to be a developer for efficiently handling all its modules. They require customization and therefore technical skills. But once you've learned how to install, costume and update modules in Drupal, how to “unleash” all that extra functionality that these modules “encapsulate”: oh boy, it's such a confidence-booster! You'll get to build a website capable of handling thousands of users and thousands of content-stuffed pages! Wordpress isn't a cheapskate, either, when it comes to “spoiling” its users with no less than “millions” of plugins and themes. Moreover, it definitely has a strong advantage for the non-tech savvy ones: you don't need to be that technical for successfully integrating all those plugins and perform all the needed editing yourself: on colours, font, layout, you name it. Ease peasy! But you get to do all that only as regards small size websites, you should definitely keep that “tiny” detail in mind! Drupal or WordPress: Which One Ranks Higher in Search Engines? When comparing Drupal to Wordpress in matters of SEO-related features, what you should know is that there is no matter of “better” or “worse”! It's just a matter of “two different, yet equally efficient approaches”! Let's dig into more details! With “tantalizing” plugins, such as Yoast's SEO, Wordpress helps you ideally optimize your website for search engines in no time (and with no great technical skills required either, remember?). It “spoils” you with a quick and easy way of optimizing your site. As for Drupal, it comes with a certain “edge” given by the fact that it can handle way larger websites. Loads of content and truckloads of daily visitors to handle, you can just figure it out yourself, come with a different approach to SEO, with totally different SEO needs and strategies. Moreover, you need to know what you're doing, when handling Drupal, if you want to efficiently optimize your site. Here's another “detail” for you to reflect on: when it comes to page load times (and you're well aware of Google's “weakness” for websites that load fast) Drupal comes equipped with robust and (most important) out-of-the-box catching features, as compared to Wordpress, where you have caching plugins that you get to use for speeding up your website! Drupal or WordPress: Which One Handles Security Better? Whitehouse.gov is built on Drupal! Need I say more? Drupal takes security to a higher level, that's for sure, and no wonder since it's been designed to suit the specific security needs of enterprise-level websites! Wordpress, since it's been designed as a blogging platform, is more vulnerable. It takes just a hacked plugin for hundreds (or more) of Wordpress websites to get “infected”, so just reflect on this for a minute or two before you make your final choice. Size does matter! The size of the website that you develop determines its future security needs, as well (so, you can't compare a blog to a governmental website, right?). There's more! Choosing the right platform specific hosting application is decisive when it comes to managing security risks: you have Acquia and Pantheon if you go for Drupal you have WP Engine and since recently Media Temple, too, if you go for Wordpress We, here, at our web development company in Toronto, manage to “sleep well at night” since we are Acquia partners! Drupal or WordPress: Which One Is Easier to Use? This is the aspect that Wordpress excels at! Anyone can use it! You get to set up your Wordpress site and make it look sharp and functional in no time without having to be a programming languages guru! With its simple user interface, it turns building a website into a matter of minutes and even its customization doesn't pose great problems or causes severe headaches. Things get a bit trickier with Drupal! It's not hard to use it, it's just a bit more challenging to learn how to use it in the first place! Once “armed” with enough technical skill, the sky is the limit with Drupal: you can develop far more advanced (and therefore confidence-boosting) websites. Its interface, too, is easy to use, so that won't be a problem. It just requires a bit more time (and will) to learn how to mix and match its core features and how to edit anything in the back-end, too. And, the good news is that it looks like Drupal 8 paves the way to turning its CMS more accessible for non-developers (such as content editors, for instance), too. So, there are chances that Drupal steals the “crown of easiness to use” away from Wordpress in the future to come! Stay tuned! Also, you can relax: they both get your back covered! That's right, both CMSs are supported by active user communities, so you can easily get the answers to your questions or the needed documentation! Another highly important “detail” is that both Drupal or Wordpress reward you with freedom in terms of design! You get to design your templates to your liking, no matter which one of the CMSs you'll go for! We'll end our comparative review with 3 last questions that you should ask yourself before you go for one CMS or another: 1. Does your future website have to handle multiple user permissions? 2. Will it feature multiple content types (and page templates)? 3. Does it require enterprise level security?
Adrian Ababei / Dec 14'2016
You are aware, aren't you, that there's a lot at stake when choosing the “right” CMS, the one that meets your particular web project's needs? So, you definitely need to think it through and to consider all the main aspects! Still, no need to panic now! To get stressed out that you risk to make the wrong choice, for you can't tell which one is the perfect fit for your particular work scenario. The best way to find your answer if by asking yourself the right questions! As simple as that! What's your level of knowledge of the main programming languages (CSS, HTML, PHP)? What type of website will you be developing (a corporate website, an e-commerce website, a social network etc.)? What future do you anticipate for this website? Are there any chances that it should grow significantly? Will it require new functionality and is it likely to face the challenge of traffic overloads later on? And so on... Are You Joomla's or Drupal's “Target” User? Are you're a “tech savvy” developer, with a consistent coding experience in the basic programming languages? Then you're the type of target user that the community developing Drupal envisioned for this platform! Are you confident that the site you're about to build will grow and, therefore, get more and more “greedy” when it comes to new features and constant customization (and you have a certain “weakness” for the after-launch “polishing” and constantly upgrading processes? Then you should definitely go for Drupal. Do you have basic technical skills instead? Are you looking for a super easy to use CMS that doesn't require certain language programming skills? Then Joomla is the platform that you'll find be comfortable with! It will allow you to have your e-commece or social networking site up, running and looking attractive in no time! Is It A Joomla-Specific or a Drupal-Specific Website That You'll Build? What type of website are you planning to develop? And (after you've discovered whether you're Drupal or Joomla “material” answering to the question in the previous paragraph) this might just be the question that will help you make a choice between the two popular CMSs! Is it an ecommerce website that you'd like to set up quick and easy, with no customization implied or maybe a fully functional social networking website and you have basic technical skills? Then you've got yourself a winner: Joomla! Are you facing an a lot more challenging project, where you need to rely on your technical expertise and deep experience as a web developer for building large scale websites? Then it's Drupal that will help you meet and exceed your client's daring business goals. For instance here, in our web design company in Toronto, we often face the challenge of developing content-packed websites. So, we know that we can rely on Drupal: its been designed for handling truckloads of users and large amounts of data, you know. And where do you add that, due to its catching features, Dupal loads faster, too? And it requires less server resources than Joomla, as well? Checked and double checked! If you're planning to start a daring (even a multisite) website project, one that's sure to grow steadily in traffic and content in the future to come, then go for Drupal! How Do Drupal and Joomla Respond to Your Need of Customization? FLEXIBILITY and CUSTOMIZATION are Drupal's “little name” and respectively “middle name”! So, you bring in your passion for “getting your hands dirty” up to your elbows in lines of code and it will spoil you with an overwhelming array of themes, plug-ins and all sorts of other configurable options! Select the ones that respond to your website's ever growing needs, mix and match them and then skillfully integrate them, boosting both its looks and functionality! It's true, Drupal “expects” you to be more of a technical savvy (compared to Joomla), but it also gives you unlimited freedom: feel free to come up with any needed improvements to your site, to create custom modules, to play with themes, to upgrade its out-of-the-box features to your (or your client's) liking. Sky it the limit! Oh, and I almost forgot: they're all free! It's a “detail” that you should take into account if you consider that some of Joomla modules and plug-ins are not free of charge! So, yes, when it comes to flexibility and customization, it depends a lot on your own needs: Do you actually want to be able to constantly customize the look and feel of your website? Drupal enables you to do that painlessly. Do you just want to set up a functional site as quickly as possible, without investing to much time and skills into its customization? Then Joomla, with its already famous easy to use interface, will help you set up your social network or online shop as quickly and stress-free as you say: “Joomla”! What About Security? Which One Makes A More “Secured” Choice? It would have to be Drupal! And I'm not saying it because it's Drupal that we're building wesites on here, in our digital agency in Toronto! Just think about it (for it's pretty obvious): how many hacked Drupal websites have you heard of compared to Joomla or Wordpress sites? It's true that those who've “pledge to remain 100% faithful” to these two CMSs will come to “counterattack” stating that this is only because there aren't as many websites built in Drupal as there are in Joomla or Wordpress. And yet, it's a proven fact: Drupal takes security to another level, compared Joomla. Its worldwide community of developers is constantly “hunting” down threats and is always on the lookout for any weaknesses showing up in the system. Moreover, whenever they spot security vulnerabilities, they patch them up and “expose” then on the website. Still, even if with its not that strong approach to the security factor, Joomla, too, responds to security vulnerabilities and it gives you the chance to strengthen your site's level of security, to upgrade it with new extensions. Yet, it is important to keep in mind that you'll need to constantly run the necessary updates for keeping it properly shielded! Which Are Joomla's and Drupal's SEO Capabilities? If you're concerned about the SEO aspect (and you should be, especially if it's the challenge of a large scale, multilingual website project that you need to respond to), then there's no “better option”, there's just ONE option: Drupal! It “beats” Joomla in terms of SEO capacities, being equipped with far more advanced SEO features. Still, it's true that you can optimize your Joomla website for the search engines, too. The main difference is that you'll need to actually create those custom SEO-related features yourself (and since this CMS “boasts” to be “a dream come” true for the non technical savvy ones, this aspect might just be an unpleasant surprise for you). How Do They Handle Technical Support? When it comes to their help portals, if you're a beginner you'll find Joomla's technical support far more accessible. You can find the answers to all you Joomla-related “dilemmas” and you'll be able to get all the guidance you'll need as compared to Drupal's support options, which are more “from developers to developers”: a lot more technical. So, there's no "better" or "worse" help portal! It's just a matter of responding to their own target users and “speaking their language”. What other strong and weak points of these two popular content management systemshave you “dug up” yourself ? What other similarities and major differences? We're looking forward to reading about them in the comments below!
Adrian Ababei / Dec 13'2016
Don't you just feel the sweet taste of new possibilities right now? And still, any new Drupal 8 project comes with its own set of challenges, as well, and choosing a theme, from the very start, is probably one of the greatest ones. What should it be then? Should you go for a classic base theme (AdaptiveTheme or Zen, maybe), for a contributed theme instead or maybe you prefer implementing the framework yourself or build your very own theme, from scratch, relying on Drupal core? Before you make the decision that will have a huge impact on your whole project's structure, take some time to go through this quick “quizz” here and try to give yourself some clear answers: are you dealing with a multi-site project (meaning that your theme, once chosen and implemented, will be used across all the other websites, too)? is the person maintaining the theme a HTML guru or a CSS expert? will this theme be used just on the website itself or for internal apps as well? what level of front-end performance optimization does it imply? Classy vs Stable: Which Base Theme Works Best for You? This might just be the most important choice to take during your Drupal project's life-cycle! It's your theme that dictates/overrides your CSS, JS and Drupal's markup, you know. Where do you add that your chosen theme can feature a parent-child relationship, where the sub-theme inherits the base theme's templates, JS and CSS. In short: think through your theme choice for the sake of your project's success and your whole workflow! “And still, which one to choose: Classy or Stable?”, you might ask yourself. Here's how you can tell which one suits you (as a Drupal developer, with certain goals in mind and with a certain theming experience) and your particular web project (which comes with its own set of particularities): are you planning to add classes only where the context demands them? Then Stable's The base theme for you! do you want lean markup, with very little classes (e.g toolbar and contextual links), giving you the freedom to customize your own markup patterns in your theme, to create only those classes that are required by your project? Stable again, is the “lucky” word, in this case! do you want to have a set of classes at your disposal, to tweak and use as styling hooks, right from the starting point? Then it "write" Classy all over your Drupal project! This being said, let's see which are the 5 factors that you should consider before you choose your Drupal 8 base theme: 1. How Much CSS and Markup Updating Does it Require? How much CSS out-of-the-box does your chosen theme come “equipped” with? It makes a great difference, you know. Take these two examples for instance: You decide to build your website on Classy theme, which in Drupal 8 comes with very little core CSS, so you will have to write your own classes and occasionally even to override the templates, depending on what you want your classes to style. You're building your theme on Zurb Foundation or Boostrap, which come with their own of out-of-the-box classes that all you need to do is apply to your markup. What's important for you to keep in mind, if you incline for this particular work scenario, is that once you have your Drupal site built, there's going to be a lot of template customization to do for adding all those out-of-the-box classes to your site's new components! 2. Has Your Client Expressed Any Preference? Your client may or may not come with his/ her own preferences when it comes to the theme that you and your team should to build his website on. Be sure to have one aspect settled with your client, during your before-the-project meetings: are you supposed to maintain the theme that you two will decide upon on the starting point or is there a chance that this should be replaced with a new one, as the project unfolds? It's essential that you discuss this aspect with your client, for it's important for both of you to consider the learning curve (and implicitly the extra time) of each new theme. In case your client has no specific preferences regarding the theme to be used for his site, your own theming experience and your development process preferences will be the only factors that will influence your theme choice! 3. Consider the Design It's no news for any developer, no matter his/her level of experience, that Drupal is tremendously flexible! When it comes to theming, it allows you to build practically anything you want: ranging from a large web app, to great customer-facing websites in the latest design and functionality trends! Depending on what exactly you need to design in Drupal, you get to choose among several platforms: Ember or Adminimal make some great administrative themes, that will do their job superbly helping you build your back-end app Zurb Foundation or Bootstrap make great choices if your web project includes components such as tables and forms 4. Will You Be Using a Pattern Library? A base theme always makes the perfect choice if you're planning to create your own patterns. In other words: keep it simple, at the theme level, especially if you'll be applying your own classes, which will then get themed by your own pattern library styles! 5. Consider Performance Less is always better! You keep that in mind and let this common-sense motto guide you through your theme selection! The more functions, JS libraries and settings your website needs to load, the heavier its “burden” will be (and the longer its load time will be, as well). Go for a light theme based on Drupal core, which won't come equipped with its own heavy load of out-of-the-box JS libraries and CSS and remember that if less is always more, so does “testing makes it perfect”! Remember to test all the theme settings on your website, thus keeping its front-end performance closely monitored! These is our list of factors that any Drupal developer should take into account and think through before choosing the base theme for his/her project. Do you have any other aspects that you usually consider and which determine you to go for a specific base theme or another once you start your Drupal web projects?
Adrian Ababei / Dec 12'2016
How many times did the inspired title of an article made you “reward” the copywriter with a click and then: surprise, surprise! You landed on the website hosting it and you couldn't have found your way out of there any faster? The photo/graphic/video in its header was so “dusty” and boring or, on the contrary, so flashy and annoying, stuffed with clumsily grouped elements, overloaded with information and showing off a totally uninspired color choice! Now, answer to this question: how many times did you open a newsletter or landed on a new website and from that very moment time stopped? It captured your attention and you kept on scrolling and clicking, then did some more scrolling! It was the best “scientific” proof supporting time's relativity theory! The hero image got to you, you wanted more and more of what that site had to offer and ended up spending more time there than you planned (maybe even buying something or subscribing to their “crafted” newsletter)! If you want your own website visitors' experiences to be more like the one in the scenario no. 2, then you should learn to master these contrast-creating design subtitles: Think Through Your Color Choice Color sure isn't the element you should pick in a rush! It can either wow your users and propel your message to them or it can instantly drive them off. Carefully consider the message you wish to convey (your whole's brand's identity) and then make your selection based on that and that only. As a general rule of thumb: you don't need to go for a strong color if it doesn't represent your brand's personality, just to catch their attention. It will eventually be a major turn off. Also, before you go ahead and add splashes of your “winning” color to your hero image, be sure that: it matches the rest of the design (preferably a simple one if you're going for a bold color). With cohesion (with that stunning image or visually-engaging video that you're planning to use) and contrasting colors in mind, feel free to enhance your brand's message by simply adding the right color to your hero image: colored typography, colored user interface elements. Such a subtle, yet effective “trick” when you manage to make the right (color) choice! But what if there's just no “match made in heaven” between the hero image and your brand colors? In that case, you adapt: try a color overlay on the photo test a black and white solution for the text or image put the strong colored elements in your navigation bar If you've tried all of these creative “fixes” and there's till no chemistry between image and colors, consider losing the mandated color. Moreover, color alone can be “the hero” of your hero image, you don't need an image at all! Combine it with powerful text lines, featuring beautiful typography, and you have your hero image that impacts users just by its striking (crafted) simplicity. And here we get to the “extreme minimalism” principle again! Such a powerful web design trend! Wow Them With Bold Typography Here's another way of using contrast to catch the eye: beautiful and bold lettering contrasting in size and (or) color! Keep it simple, but carefully craft its simplicity! Consider the typeface selection and get creative when it comes to choosing your words (that's right, meaningful, powerful words, not a whole paragraph). Go for the true emotions-triggering ones all while relying on: fonts that pop out (set against contrasting backgrounds) unusual font sizes (either undersized or oversized; the "out of the ordinary" will always catch attention) Think About Light and Dark Spaces After lots of mixes and matches, rearrangements and a whole dose of creativity you've finally managed to pull off a great “light vs dark spaces” contrast for your hero image and them boom: all your work is ruined when you try to make it responsive. The text, images and buttons are all chaotically displayed now! Does this work scenario sound familiar to you? Then here are your options: go for another image (it's hard, I know, especially if that was “The” one and you've spent so much time scanning though hundreds of images to find the perfect one) go for color overlay go for another typeface, color and size Do a Strategic Cropping “It's a trap, don't go for it (like many other designers do)!” We're referring to the widely accepted idea that the hero image should “fill in” the first screen! Be better than that! Think outside the box: let the content therein determine how you should crop it accept and implement the idea that your hero header could be either smaller or larger than the browser give the other elements on the page their due importance, too dare going for an unusual shape (it will certainly intrigue and catch attention) consider an unusually deep image that will only incite visitors look for more Make Your Call to Action Stand Out Here's another trap that you get caught in: losing the whole purpose of your hero image! You've worked so hard to make your header wow your users with a visually-arresting, engaging graphics, you've strategically picked your colors, your beautiful typography, too, you've added the perfect emotions-triggering/persuasive words: it's a true work of art! And still: haven't you forgotten about the “main character” itself? Yes, the call to action button! It should be there, right into the spotlight! It should let your visitors know what you want them to do (besides staring and letting themselves be visually “spoiled” by your hero header). How do you make your call to action stand out and grab their attention? You rely on color or size contrast! It should strike a powerful contrast with the backing image and, moreover, you should empower it with clear, simple and readable words. Let them know that they should “buy” or “subscribe” or maybe “read more” in just a few straightforward words! Add Animation Movement will always catch the eye! Therefore, it makes a highly efficient attention-grabbing element for a hero image. Now don't think that you'll have to pull off an entire cinematographic experience (you shouldn't go that way, you shouldn't make your hero image way too flashy and overwhelming). Simplicity is key, remember? Therefore consider going for subtle movements for your header, one that should aim at: surprising the users standing out (from the other “just” text or “just” video featuring ones) How about you? Are you making the most of contrast when you create your own winning hero images? Have you, maybe, discovered other ways of using this deign concept to engage your visitors and to make them “stick around”. “Other” than the ones we included in our list above, maybe? Feel free to share them with us in the comments below!
Adrian Ababei / Dec 09'2016