Responsive Web Design

I’m interested in developing responsive themes. The themes on my current sites are somewhat responsive, but they aren’t built on a responsive CSS framework. I’ve been looking at the following CSS tools to generate responsive themes:

http://getbootstrap.com/
https://developers.google.com/web/starter-kit/
http://foundation.zurb.com/
https://html5boilerplate.com/

I want to be able to build HTML5 sites like these, where pages are divided into sections. This seems to be the direction that front end design in going in – the sites I listed look modern, and they all look great on a range of devices.

Making themes adapt to different sized screens can be done with CSS media queries. The use of rows and columns is an important factor in CSS frameworks. It’s important that each row is divided into columns in such a way that each row is the same width.

Each section needs to be contained in a different div with its own CSS styling. In every CSS theme, there need to be a number of sub-themes for different sections. Writing CSS code for themes could get very complicated, so it might be worth using a CSS preprocessing tool like SASS.

I also need to give consideration to page navigation. It’s common to use a page menu at the top of pages containing links to HTML anchors so that users don’t have to scroll down long pages.

I’m working on implementing these changes in Pyplate. This is mostly a matter of redesigning themes. I am making some changes to the Python code of my CMS in order to handle page navigation widgets, and to divide pages into sections.

As soon as I get time, I need to spend some time reading this: http://learn.shayhowe.com/advanced-html-css/performance-organization/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s