Responsive | iPixel Creative | Singapore Web Design & CMS Development Company Blog

Posts Tagged ‘Responsive’

Creating Responsive Websites with Adobe Edge Reflow

June 17th, 2013

In today’s, we are going to explore a new tool from Adobe called Edge Reflow. I believe it helps creating a responsive website “looks so easy”, definetely something a designer and developer should check out.

Adobe Edge Reflow is at the time of this writing in public beta stage, and available to download for free. To download, login to the Adobe Creative Cloud site, and you can find the app listed in the Apps Center page under the Edge Tools and Service section.

Check out: 50 Useful Responsive Web Design Tools For Designers

Setting-up Grid and Workspace

Edge Reflow comes with a set of UI that allows you to manage responsive layout without dealing with codes.

At the left of the workspace, you will find several options to control webpage properties; you can set the number of columns, column gutter, the width of the content and specify the unit measurement for those lengths – px, percentage, or em.

In Edge Reflow, You can set “break points” easily. The break points are the threshold where your website styles will shift. To set the break points, click on the Plus button that is found at the top right of the workspace. Then, slide the page handler to the right or left and click on the plus button to set a new break point.

You can specify different styles for the elements on how they should look or adapt within each break points.

Adding Elements and Styling

Adding an element in Edge Reflow is as easy as a click. To create a new element, click on the rectangle icon and drag your mouse across the workspace. Upon selecting the element, Edge Reflow will display the properties that are applied, such as the width and the height, the margins, and the paddings.

You can find more options to add styles in the Styling tab. In this tab, you can add background color (even with gradients), borders (including border radius), and adjust the opacity for selected elements.

You can inspect the styles of the elements from the DOM Tree Inspector. It is found at the bottom of the workspace.

You can also preview the result in the browser by pressing Command + F12 (on Mac) or Ctrl + F12(on Windows).

Adobe Edge Service Integration

Reflow is integrated with other Adobe Edge services. When you are working with text, you are able to apply font families from Adobe Edge Webfont.

You can also test your website across your mobile devices seamlessly using Adobe Edge Inspect.

Conclusion

Since this is only a Preview, there are several key features that are not included. In the current version, I can’t find how to export projects to HTML and stylesheet documents, and the Preference menu is disabled.

Still, Adobe Edge Reflow looks really promising as a tool in the niche, and it could be very helpful particularly for entry-level users. With Reflow, they can create a responsive website without having to deal with the codes behind the screen.

Have you tried this tool?

Posted in Web Design | Tags: Adobe, Creating, Edge, Reflow, Responsive, Websites

Popular Design Trends for Responsive Navigation

June 13th, 2013

The mobile responsive website layout has become a very common apparatus for designers. Building a layout is never easy and each website generally requires a unique solution. Responsive design incorporates both desktop and mobile devices to provide a uniform browsing experience. I have seen a lot of fantastic examples showcasing responsive web design trends.

In this article I want to focus particularly on navigation menus. To build a responsive navigation you need a technique for handling the resize down to lower resolutions, or consequentially handling the expansion for wider desktop monitors. Check out these various techniques which are my choices following the most popular ideas for responsive navigation. There are obviously some other solutions out there, but this collection should give you ideas for getting started with your own responsive designs.

Block-Level Menu Links

Consider navigation menus which are using single box-style links in an orderly fashion. As you resize the window, these boxes either need to shrink or re-organize themselves. Block-level responsive menus are those which are designed to always keep the links showing in various positions on the page.

As you can see in the portfolio of William Csete, it is possible to structure 3 different break points for your navigation. CSS3 media queries are the quickest and easiest method for building a responsive navigation which looks good in all modern browsers. The links on his website are always kept in block formation, even on 320px width iPhone screens you can see the most important links directly under the logo.

Block and inline-block links are great when you only have a small collection of them. It will not be difficult to reorganize the pattern of links and they can shrink to almost any size. What’s important is being creative and pushing the boundaries for whatever looks best. Do not be afraid to demo a style and see how it looks. Just keep your links flexible yet sturdy and always displaying above the fold.

Condensing the Navigation

A similar idea is to condense your links into smaller spaces while also re-organizing the position as needed. Generally you would use this technique with horizontal navigation menus which span a large section of the header area. Block-level nav links typically stay the same size and keep their original padding. But for condensing you only need to update the sizes and space between the navigation items, like the example on Oliver Russell’s website.

The varying colors help to distinguish between each of the core navigation links. Although his website may have a large collection of webpages, the top navigation only holds 4 main links. This is why you notice so much extra space which is slowly reducing the padding as the layout resizes. The design style also reminds me of the navigation on Bodhum which condenses links smaller until they eventually break up to display above the logo.

Another interesting possibility for condensing links is to shift from a horizontal into a vertical navigation. This way you are not hiding links away from the page and users can still have full access to them. The website layout by Truf is an excellent example. As the links begin to condense and get closer to the logo, a responsive style will force them into a vertical pattern instead. Using this design you could potentially fit 6 or 7+ links all in order, although it might look somewhat cluttered on a mobile smartphone.

Input Select Options

Many of the new free WordPress themes which are released on their website are utilizing this mobile navigation technique. Not all WP themes are responsive, but for the select few that are I have noticed the navigation eventually turns into a dropdown select menu. Clicking on a specific page will bring you immediately to that page and it becomes the selected option.

On the latest redesign of Smashing Magazine you can also see this feature being implemented. I will say that although it can look a little out of place, there is plenty of room for keeping links available. This method is very easy to setup and you do not need to worry much about font sizes or extra padding.

There are a couple downsides to this as well, namely that users may be confused as to the purpose of this dropdown. More people are becoming familiar with responsive layouts every day. But some visitors may not recognize this trend, and they may be confused as to the purpose of a select menu at the top of the page. But you can encourage users by designing a nice fitted layout around the navigation select menu. Japi Blog does an excellent job with their responsive design by encapsulating the nav between a dashed border box.

Hidden Dropdown Toolbars

When it comes to hiding navigation links there are 2 fantastic solutions I have found. This first choice is to use a typical dropdown navigation which toggles as the user taps the nav button. Some dropdown menus could appear on top of the page content as you see with Performance Marketing Awards. This option will save space on the page and keep the animation effect relatively disconnected from the page content.

I like this idea for simple portfolio websites or personal blogs. Generally these websites do not require too many links, so the menu itself should never go beyond the page height. If you are using fixed positioning then this may be a problem and other dropdown/pushdown menus would be a better idea. Right away my first thought is the responsive navigation for the Treehouse Blog. Instead of having the dropdown appear over the content, instead it will push down the page to make room for displaying the full vertical navigation.

This idea stands out to me the most because you can include sub-links and even sub-sub-links if necessary. It is an elegant solution for switching between a desktop-style hover dropdown into a mobile-style click-to-toggle dropdown. Andrew Chalkley even wrote a tutorial for the blog explaining how developers can build their own responsive dropdown navigation.

Sliding Nav Boxes

The other alternative for a hidden responsive navigation is to keep your links off to the side of the page and toggle this menu in a similar fashion. The user may tap on a button to hide/show the navigation, but it will slide in from the side as is typical of many iOS applications. The homepage design for Kin HR uses this technique combined with a top-level hidden navigation.

The initial page uses a large fullscreen background with links positioned off in the right corner. As you resize the layout a small 3-line toggle button will appear. Tap this to see the nav links push down the page and appear right at the top. Visitors can easily toggle between showing and hiding these links without much difficulty.

The hidden responsive menu for Sequence behaves in a similar fashion. The toggle button will slide the entire page over to the right, which reveals a common vertical navigation menu. I have seen this trend skyrocket in recent iPhone applications and it provides one of the easiest & quickest user experiences. Strangely their website toggle button does not close the nav, instead you have to tap somewhere in the body or onto one of the links. But obviously this implementation will change between each website and you can choose your own functionality when building a similar navigation menu.

Responsive Design Galleries

Final Thoughts

Although mobile responsive design has been around for years, it seems to have undergone a tremendous expansion over the year 2012. I would not be surprised if we find even more inspiration galleries, open source libraries, webapps, and design practices revolving around compatible responsive websites.

I hope these navigation trends may provide a starting point for launching your next project. The key aspects to consider would involve how many links are to be included in the design, plus how they should be formatted within the layout. But spending some extra time planning out your responsive ideas will certainly yield a beautiful final product design.

About the Author:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.