Call us Today! 980-236-1966

We Build

JOOMLA Websites

& We're Really Good At It

We are passionate about building websites and
helping you grow your business

  • What We Do

    Montano Designs builds Joomla! websites and we're really good at it. We don't attempt to be all things to all people, but to find a niche market and be the very best. We have developed websites for multinational corporations, world-renown charitable institutions, colleges and universities, as well as small to mid-range businesses.

  • Why We Do It

    Helping people achieve their goals is our driving force. We get a lot of personal satisfaction from taking your brilliant idea and converting that to web application that propels your success. We provide our clients with a robust platform that for the money is a lot of bang for the buck!

  • How We Do It

    We listen to you. What separates Montano Designs from the competition is our ability to fully understand our client's end goal. We stay current with the design trends, website standards, and available technology. We use Joomla! as our platform and then build on it to create custom websites that reflect our clients unique position in the world wide web.

Welcome Aboard

Today's post is by Arley McBlain (@ArleyM), a front end developer in Burlington Ontario, at Thrillworks. Arley recently redesigned his site and it has some pretty neat CSS effects on it. I asked him if he'd like to share some of them and this article is his kind oblige.Responsive Web Design is the big buzz topic of the industry right now, and with little wonder; serving your site to be visually optimized for different devices and contexts is a brilliant idea. Your site exists to be seen, so why leave anyone out?Weird RWD Side EffectOne bizarre trend emerging in this new RWD era is desktop-browsing web designers resizing their browsers to watch the break-points change the layout. The average user never sits at their desk repetitively shrinking and expanding the browser window like a mad scientist. Yup, we're all strange. The personal website of someone like you and I likely has this kind of strange browser-resizing user as the target demographic, and most frequent visitor, so why not play to that?Responsive Text is a relatively new sub-topic that is only just beginning to be explored (Frankie Roberto recently made this post on responsive text). Today I want to talk about changing a headline to create a striking effect using media queries. This effect is created by having many media queries that trigger in short succession. Using this approach there is no limit to the jaw dropping visuals your site can produce.It Starts With a Personal ProjectI recently refreshed my personal site ArleyM.com. There are some "old-school" responsive effects on my front page (loosely based on this responsive framework Chris Coyier tweeted about a few months back) in that the picture of me slides under my first name, but on top of my last name. This is done by having a percentage based position on the image. I figured I would be remiss to not have some other eye catching responsive feature on the site, so I dug back into my experiments. A personal project is the perfect place to do something crazy that you'll otherwise never get the chance to do on client work. I decided to add 'responsive adjectives' shown at the bottom of this image:"Be Shocking." vs. "Be Weird." - Changing text using an army of media queries.I call the use of countless media queries "Lark Queries" (The word 'lark' often refers to something done for fun, or playfully, but I also like to think of it as taking a simple concept to an extreme level). Quite simply the user will see different words based on the width of their browser. Many users will never realize that there is anything unusual going on - but when someone checks if the site is responsive, they may be surprised at this uncommon effect.Creating the effectThere are a couple ways to achieve this. I chose to use CSS for everything. I made a media query breakpoint every 10px from 300px to 1920px, and then a couple extra break points above that for dual-monitor, and 27" cinema display users. I then used the CSS Content attribute to place the text in the h2. The content attribute isn't supported by IE7, but for my site all versions of IE represent less than 4% of all traffic. The HTMLHere we have a simple h2 with a parent div to make the selector unique (this isn't something I want on every h2 on my site!).<div class="row"> <h2>Be <span></span></h2> </div>The empty span is there to allow the CSS to render the content after. If I had to deal with older versions of IE I would actually put a static default word within the span, and only display it as needed using conditional wrappers (as demonstrated in How to Create an IE only stylesheet).The CSS@media (max-width: 980px) { .row h2 span:after { content: 'Unusual.' } }Here's just one line of the many media queries I made (165 in total!). All that changes is the max-width value, and the content value. The media queries were the easy part, thinking of a different word and arranging in order of shortest to longest was really time consuming (Thanks thesaurus.com)!The result is striking - the text rapidly changes with the shrinking browser. Fun! The Content element automagically adds the new word after the span with every media query breakpoint. It just feels nice to use this handy content attribute for something other than ul bullet points for once!View Demo   Download FilesIt was fun to see the differences this rarely used property has in each browser! For example, only Opera will let you select the content text, or copy / paste it.Getting into SemanticsThey say it's a best practice to keep your content in HTML, your styles in CSS, and your behaviour in JavaScript. So am I breaking some rules by literally using a content property? I don't think so.You could put all of the content values in HTML and use the media queries to toggle display:none/inline, but if a screen reader or Google ever had the chance to read all of that, the result might not be what you're after! JavaScript could do this job just fine (and with less code if you put all of the content values into an array), but my CSS demo will work even if JS is turned off. I personally find the content property charming as well, not sure why.I would also argue that this effect does fall more into the style category than real content. It's a bit of a gimmick, so I'm not too worried about semantics for my own project.So What Next?Obviously a tiny part of me would die inside every time this code with exact text was used verbatim, so how else could this massive media query technique be used? That's where you come in! I would love to hear some ideas in the comments. Don't let the daunting realization of how much time these would take to do hamper your imagination.Here are a handful of other ideas I've thought of:Changing colors: The media queries could change color / background-color to shift through the color spectrum, saturation scale, or go through the tints / tones of a color (0to255.com is a good place to get some hex for this). This could happen for a small element like the color of a title, or more extreme: like a full site color scheme change.Faux-Animate an image:* If you could use a high quality DSLR that can rapidly take shots you could create a stunning faux animation effect (image preloading would become key, this RWD effect comes with a high bandwidth cost). There is so much potential here!Changing Focus: It would be amazing if changing the browser size shifted the depth-of-field focus of the images on the page!Go Crazy: With a little JavaScript it should be easy to tell that a browser is resizing, and no longer at the size it was on load. You can mess with those pesky browser resizing designers by having the site go insane on resize! I'm thinking Katamari Ball crazy.User hints: This could actually be used in a practical way to give users cues that they should rotate their phone into landscape. But 'practical' sounds kinda boring next to the other ideas.As I draw to a conclusion and reflect on this list of things that can be done without being shy of media queries I can't help but feel like we're just looking at the tip of an iceberg. A crazy resizing iceberg.I'm going to go practice resizing my browser in anticipation!How to Create Stunning Effects With 165 Media Queries or Less! is a post from CSS-TricksAuthors: Guest Author

Read more http://css-tricks.com/lark-queries/

People Say We're Awesome

  • I contacted Montano Designs with little understanding of web site design. I spoke with Montano Designs and asked her if she could construct a site that could serve as my graphic design portfolio. Montano Designs seems to have a gift of being able to hear and envision what you want. She was able to design a professional site that captured my style and personality. Montano Designs was able to accomplish everything quickly and smoothly. We worked over the phone and through e-mail with ease.
    Kimberly McCaskey
  • A thousand, million thank you’s for the website design! Also a good friend of mine asked me for a reference for a web designer for a colleague of hers, so of course I recommended you.
    Laurel Dabria
    Speech-Language Pathologist at Carolinas Healthcare System
  • Looks great and more importantly runs like a champ. THANKS FOR ALL YOUR HARD WORK.

    Chip Traub
  • I just wanted to let you know that your designs are awesome. I was checking out the Wounded Warrior Project site, when I realized that you are using Joomla. I see your company uses it extensively and I just wanted to give you a big thumbs up for the work you do. Keep up the awesome work.
    Julie Baadte
  • Montano Designs has every attribute a client is looking for in business. She is an amazing designer who is easy to work with, reliable, and is an unbelievable source of creativity and knowledge in her industry
    Brett Hoglund
    Account Executive at Gartner
  • The move that has been most productive is hiring Montano Designs , based in Charlotte, N.C. to revamp ShopAdorabella. Orders increased dramatically.
  • I worked with Montano Designs on one of those "rush-jobs" with a site that needed to be done 'yesterday' before appearing on TV. Luckily, Montano Designs and I had the time available at that moment and were able to shift other projects to meet the deadline. Her expertise with Joomla was essential to the project as we had to customize a template and get several components up and running quickly. Montano Designs is also extraordinary in optimizing her sites for search engines, using SEO to attain natural top listings in Google.
    Brian Shea
    Seven Sages - Website Management
  • Montano Designs has far exceeded our expectations. After telling Montano Designs our ideas, we received a custom design website that portrayed our product in the true professional manner it deserved. It looked unlike anything we had seen before. Thanks Montano Designs !
    Michael McAllister
  • I was very happy working Montano Designs. They were very responsive to all my requests. Thank You.
  • I worked with Montano Designs on one of those "rush-jobs" with a site that needed to be done 'yesterday' before appearing on the Oprah Winfrey Show. Luckily, Montano Designs were able to shift other projects to meet the deadline. Her expertise with Joomla was essential to the project. Montano Designs is also extraordinary in optimizing her sites for search engines, using SEO to attain natural top listings in Google.
    Brian Shea
  • I really just wanted to take a minute to say Thank You So Much for my new website. She is not only talented and patient, she has also become a trusted friend to me. Sometimes to appear Professional, we need to hire professionals. Montano Designs is my secret. Thank you again from the bottom of my heart.
  • I have worked with Montano Designs a few times now and their work is fantastic. Provides a quality product with various variations to help your brand stand out. I plan on working with Montano Designs again.
  • Highly effective, super easy to work with. Couldn't recommend more highly.
  • The website looks great.

  • Montano Designs provided our company with an outstanding web site design and hosting. We are extremely pleased with every aspect of the process; from initial design, to implementation, to the final product. I would strongly recommend Montano Designs for anyone looking to build a better web site. Montano Designs wonderful websites.
  • I want to thank you very much for your professional attitude and persistence in dealing with what must have been a very difficult job.
  • I very much like the look of the new site.
    Isabelle Fabian
  • I can not express to you the gratitude I have for helping us complete this.
    Annie Crawley
  • Montano Designs did a fantastic job with my website, at a great price and fast! She took the drab legal website I was using and gave it a far better look than any of the canned attempts that other big companies were trying to pawn off on me. Cindy Montano was also particularly helpful in helping with all ancillary computer issues that were involved. Great job, Montano Designs!
    Greg DiLeo
  • Montano Designs has been like a breath of fresh air - performing as represented, and then some. Creative, knowledgeable, and within the time frame promised. Having worked with another Web Design Company in the past, this one was a good experience.
    David Weekley
We Are All JoomlaDemoAll The Time
    • Location

      300 West Fifth Street
      Charlotte, NC 28202, USA

      Mon – Fri:9AM – 6PM

      Follow us

    • Contact us