What You Should Know About RWD

Mobile, Responsive Web Design, User Experience, Web Design

What You Should Know About RWD

March 16th, 2013 by Matt Haff

What is Responsive Web Design?

… an evolutionary milestone in the development of web and interaction design as a practice and as an industry.

Jeffery Zeldman

“[The web] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Tim Berners-Lee

“If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.”

Andy Clarke

Doing It Right

  • Accessibility
  • Web Standards
  • User Interaction
  • Meet the user where they are – mobile or stationary
  • Allow for consumption of content
  • Keep in mind there is no silver bullet

What To Tell Your Boss

  • SEO – Google has specifically said that responsive design “is Google’s recommended configuration.”
  • Easier to Maintain – you only write content once and it is published across every platform, not to mention it’s future friendly
  • Content Consumption – make it easier for the customer to get to the content that they’re looking for.

Design With The User In Mind

Reading Experience

  • What is the user trying to accomplish?
  • Content should fit the screen
  • Change the navigation to make it easier for the user
  • Don’t strip content, the same information should be accessible across all devices, just change how they access it

“Mobile users will do anything & everything that desktop users will do provided it’s presented in a usable way. Assuming people on mobile “won’t do that” is a losing proposition. Don’t penalize users with missing content & features just because they aren’t on a full screen.”

Brad Frost

“Design is thinking about content and how to put it together. you need to focus on the whole. layout does not equal design.”

Luke Wrobleski

User Experience

  • Is what you’re doing common practice or do different devices have different user experiences?
  • Attention to details – size of links for touch
  • Is it necessary? Everything should have a purpose.
  • What is “above the fold” on different devices.
  • Cursor vs. Touch – some blackberries still use cursors.

Navigation

  • Commonly accepted main navigation is a slide-down menu
  • Must be accessible, intuitive, common practice
  • Does it work on the smallest screen?
  • Don’t make it so long that a user is forced to scroll.

The Way It Was Meant To Be

  • RWD = WDDR
  • HTML & CSS has always been responsive.
  • UX is about meeting the needs of the user.
  • Creating websites that adjust to different screens and devices is just the beginning.

Sources

Stay Hungry My Friends!

Presentation Slides: What You Should Know About RWD

Web Design

Get your desired wordpress skin with psd to wordpress conversion

February 10th, 2013 by Anelie Ivanova

WordPress is now becoming a trend for bloggers and whenever there is a new trend hitting the online market, developers and community partners look to develop it more artistically and blend it with more relevant features. Same way, Word-press developers have found a way to think more than what a readymade theme can offer you. PSD to Word-press conversion services provided by some of the web development companies is now attracting many word press users to switch to their owned desired theme.

Word-press is not limited to blogging now but it is now extensively used to develop web applications and web sites. This has encouraged some developers to start with psd to wordpress conversion. With the readymade themes, design of the sites gets limited as you cannot change the position of the panels. You can use widgets to maximum but it won’t give you full satisfaction. Using psd means you will have the full authority to design the pages and get all the desired functions like search, login, link at their appropriate locations.

Conversion to word press is processed by first preparing the HTML of psd file. Therefore you can then test the w3c validation of the pages to minimize the errors on the page. This will boost SEO campaign of your website. Another advantage would be the testing of the HTML files on different browsers to check the compatibility which is called as cross browser compatibility check. It will be easier to test the HTML files rather than testing the developed theme. Same way we can also test compatibility on the mobile browsers to check the compatibility.

Converting a HTML to Word-press theme needs only basic information about PHP and you can use word press default page php to create your own theme. PHP codes used in word-press default theme have got codes for managing the sidebars and other panels used on the front end. You can use these codes in your HTML at the specified location of the sidebars and panels. Off course, the codes will need some tweaks and modification and for that purpose it is highly recommended to hire wordpress developer to get your desired theme developed. This can take more time as compared to installing a readymade theme but the time consumed in developing the theme will result in satisfactory and matching theme as per your desires.

You will find many wordpress development companies and freelancers who are now providing this service. Hiring a wordpress developer will be a wise decision if you are thinking to develop your imagined theme.  Design specific requirement of theme can only be fulfilled with first designing the psd of the theme and then converting it into wordpress theme which will be compatible with all browsers, mobile browsers, will have widgets placed at your desired positions and optimized to boost your search engine ranking.

Responsive Design

Web Design

Responsive Design

February 17th, 2012 by Matt Haff

Responsive design is the new buzz name for fluid layout, which has been around for more than just a couple years. Too many graphic/web designers use their knowledge of print design as a basis for how to design for the web. This has caused the web to become a fixed width layout when in reality there are hundreds of different screen sizes and browsers. With the introduction of mobile browsers a few years ago this number has shot through the roof and there is no possible way to ensure that your website loads properly on every device.

The solution is responsive web design, which loads the same website across multiple devices, screen sizes & browsers and automatically adjusts the site to fit on that device. It’s crucial that we don’t just think about how it looks but also how it works. Responsive web design needs to go hand-in-hand with quick loading sites, web standards and a good content strategy.

Just because a screen size is larger doesn’t mean that it’s on a computer with a broadband connection. The iPad when browsing as landscape is 1024px wide, the same width as a desktop browser but may be via a 3G or slower wifi connection.

« Previous Entries

© 2013 Church & Web Design | All Rights Reserved