What is the Best Responsive CSS Framework According to Web Developers?

Local Web Design in Calgary & Area: CSS Frameworks

We came across this a great article about grid systems in relation to a CSS framework. This is a core area for designers as it can greatly streamline the users’ experiences of the Web site design across multiple platforms and screen resolutions. Responsive design is key to a fluid, inclusive and easy-to-manage Web site for yourself or your clients.

A grid system, or a CSS framework, is mostly used by web developers who are new to responsive design. Besides these ‘newbies’, there are also more experienced web developers who use grid systems or CSS frameworks because they want to save time, don’t want to write the same codes from scratch time after time, or don’t want the cross-browser/-device concerns and just want to be sure the website displays great on all computers and devices.

As you probably noticed in the previous paragraph, there are many terminologies used to describe frameworks and grids that can be used to easily create a responsive website. The most terms to describe these frameworks and grids are: Grid system, CSS grid, CSS framework, front end framework, UI framework, and responsive framework. At first hand, they all might sound the same, but if you do some investigation, you’ll find out that frameworks can be divided into two categories, the grid systems and the complete CSS frameworks.

From the article “The best responsive CSS frameworks according to 41 developers” on https://psdtowp.net/

A lot of us have heard of bootstrap, but did you know there is another framework that is as popular among web developers?

Check out this video that pits Bootstrap against Foundation:

 

Read more about BlindDrop’s Web development services. Please feel free to contact us with any questions regarding Calgary Web design, marketing and promotion.

A Review of 8 Responsive Web Design Trends that Defined 2015

By Lucas D. Arnatt, Web designer

When I started web designing back in the fall of 1997, “web patterns” were really just emerging and becoming established as the tried and true foundations of successful design. When I worked with a media company in 1999 in downtown Calgary, we focused on building scalable websites, meaning websites that would expand out to larger screens, with our base resolution width of 640px. Building and testing all of those resolutions was about as much fun as trying to get ANY site to work properly in Netscape 3 or IE 3! But there is also such a joy felt when all of the pixels lined up as they should.

There are a lot of trends on the Web in design. Each year a particular font or effect will make its way through newly created (or redesigned) sites. But behind the fads remain a lot of common sense design approaches that are still valid today.

With the wide variety of mobile screen resolutions to contend with, CSS3 and above have been a godsend to designers, providing a fluid and manageable way to control different layout versions of the same content.

So now in 2015, we are enjoying the freedom of mobile technology and design seems to be evolving at a similar pace to provide the best user experience possible.
Check out this interesting article by Jeremy Girard  about 8 responsive web design trends that defined 2015.

I am including the 8 trends below, but please note these are my comments, not Jeremy’s, below each numbered title:

These 8 trends include:

1. Captivating storytelling

Yes, if one thing all media teaches us is that it is the story that matters. It engages, it conjures up images in the imagination and it can sell any idea if done well enough. Girard notes that it is important to tell the story above the fold. Many designers may focus on just making sure the main navigation, logos, and titles are above the fold, but making sure the immediate impact and engagement with the story’s characters is strong enough to stick. He also notes that making the story easy to share for the reader is of utmost importance in this day and age of social media audiences.

2. Less is more

This is one of our company’s design mantras for both print and Web. Keeping design clean and properly spaced can in itself define a website’s subtle, but powerful, presence as an authority in its niche. Quantity is relative to a certain degree when it comes to a successful website, as we have seen all varieties of content length and page counts from simple video sales pages and landing pages to extensive articles on super-specific topics.

You have to first define the need of the user, what it will take to convince them to trust you and then provide the solution based around what you can give them. This is why video sales letters are so popular and successful; they provide everything above the fold, simply, cleanly and effectively.

3. Patterns everywhere

Girard notes that with the advent of responsive web design, new patterns have begun to emerge. This is definitely true, including new ways to compact navigation, image scalability, hierarchy control of content blocks all making sure the User Experience is first and foremost. Google has started to penalize sites to some extent that are not considered “mobile-friendly”. Here are some layout patterns from Google’s developer website.

4. Card layouts

This type of layout made popular by Pinterest focuses on one block of content. For example, a product, a single photo (meme), etc. that can be more easily arranged among other similarly composed content blocks. This facilitates the Millenial ability to share content across social media channels.

5. Hidden menus

As I mentioned before, navigation has had to adapt to small screens, so long horizontal menus are sculpted into small square icon capsules that you can pop open when you need to. A click to get to any navigation isn’t ideal, but it is a relatively small price to pay for an otherwise intuitive solution.

Girard mentions that some argue against these menus for that very reason of having to make an extra click (if they recognize the new menu icon at all) and that they are less used than visible full menus. Yes, but as with any new pattern, it will take the global audience a relatively short time to adapt as more and more web sites use this type of navigation.
6. Big hero images versus no hero images
A hero image spans the full width and height of a user’s screen creating instant impact and strong visual engagement (or strong repulsion if the image backfires). They are part of the evil parallax designs that (to me) are all bark and no bite. Google always is stressing the importance of quality content.

Don’t get me wrong, I can see the appeal of parallax designs to both designer and client. It’s BIG, it’s BRANDING IN YO FACE BIG. But how useful is it to the end user if they struggle to find the content they are looking for, scrolling (seemingly) forever down the page, loading full screen image after full screen image separated by a minimum of a 60px heading that says something impactful, but meaningless at the same time all the while taking ages to load as all of the “content” is strung together as some contrived story that trails off to a basic footer with a massive phone number in a 300px font at the bottom: “CALL ME!” It can also be a lazy way to optimize for multiple screen resolutions simply because there is very little content to contend with.

Girard compares the advantages of Big hero images and No hero images. Both have their place of course and I agree that 2016 will continue to see both used judiciously aaaand not so much.

7. Rethinking advertising

He makes a good point that, as advertising on a website revolves around ad size and placement, the need for responsive web design challenges this static approach. Girard doesn’t give a solution here for this new need, but I think that we can simply look at how Social Media giants are developing solutions. They do incredible amounts of testing across many demographics so any design company or marketing team can benefit just from keeping up with, and making use of, the likes of Facebook, LinkedIn, Twitter, etc.

8. Improved workflow

With all of the challenges of scalable responsive design facing a designer, I have to say it is nice that this challenge is being met by advanced prototyping design software that allows for quick and easy multi-platform development.
Girard refers to UXPin, which looks like a great solution for designers in 2016.

He also offers some “next steps” at the bottom of the page, which you should definitely check out.

The user experience of any web presence in 2016 will still depend on the key elements of quality content backed by strong, supportive design elements and frameworks that allow the message to be conveyed consistently and effectively.

Learn more about responsive, mobile-friendly web design.

Get a free, no-obligation website audit that takes into consideration these factors (and more), or if you are starting a new website or branding project,  just fill out this request form.