Community Forums › Forums › Archived Forums › Design Tips and Tricks › Fixed width site
Tagged: responsive
- This topic has 4 replies, 2 voices, and was last updated 9 years, 8 months ago by Silkysue100.
-
AuthorPosts
-
July 12, 2014 at 4:35 am #114005Silkysue100Member
Hi all. I have been customising themes from Themeforest for the last couple of years. Slowly beginning to realise it is not the best way to go! No matter how much I tweak, the sites are slow, and confusing for users to use.
I'm now embarking on a substantial project job for a national organisation. Speed and simplicity is essential. An experienced Designer is involved and we're designing for 'mobile first'.
With this in mind I am going back to basics! I've customised a site using Hybrid many years ago, so I know what I am getting into. What's different now is responsiveness - I want to make sure I am getting this right. I have selected Genesis after trawling through many forums, and am getting stuck into the base theme.
The Designer wants a 1024px fixed width site. I would have thought we should aim for something a little larger - but he is more experienced in this game than me. The home page will contain a gridded layout of maybe 9 content / image areas.
The Designer has suggested the 'Frameless Grid' as a guide.
Do I need to worry about any of this stuff with Genesis? Should I be looking to integrate bootstrap with the site?
Any advice in this area would be massively appreciated. My PHP / CSS is probably somewhere in between beginner to intermediate so I know I have a learning curve ahead of me.Many thanks
SueJuly 12, 2014 at 4:43 am #114006Brad DaltonParticipantMedia Queries are already includes in all Pro SP child themes at the end of the style.css file.
If you customize, you will need to reduce the screen size and add the same CSS with different values to make your custom code responsive.
What most designers do is use the code form different SP themes as its all written to run on Genesis.
An example would be taking the front-page.php file from any Pro SP theme and using it in the Sample theme. You simply copy the file across with the CSS and Media Queries.
To change the width you can either change the width values in the CSS or make a custom layout option.
As for a grid, you can use the content columns, the genesis_grid_loop, a CPT portfolio style grid layout, inline widgets or simply use CSS to display archives in a grid. I've written about using all these methods and include the working code.
July 12, 2014 at 4:51 am #114007Silkysue100MemberMany Thanks Brad - would you recommend a particular SP child theme - I suppose I want the 'cleanest' to start with?
July 12, 2014 at 6:29 am #114014Brad DaltonParticipantI would start with a theme like the Sample child theme or Executive Pro and use the code from other SP themes to add the functionality i need to create a custom theme.
You should find this method enables you to easily build your own unique theme if you have a basic understanding of custom functions and CSS.
July 15, 2014 at 10:30 am #114406Silkysue100MemberThanks for the tips Brad, much appreciated - I have signed up for your WP Sites newsletter, cheers.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.