Responsive web design: WordUp Pompey! Feb-2012
•
1 like•902 views
A quick look at building responsive websites with an Artisteer theme as the base theme, by Herb Miller, of Bobbing Wide and [oik]-plugins Slides from WordUp Pompey, held on February 23rd 2012. See also http://wp-pompey.org.uk/wordup-pompey-wordpress-meetup-for-portsmouth/
Report
Share
Report
Share
Download to read offline
Recommended
Contents analyse
This document discusses the design of a magazine contents page. It has a large main image in the primary optical area to attract readers. Secondary images and balanced layout with even distribution of images and text. The house style follows Kerrang magazine's conventions with a serif font masthead and subtitles in the same font. Design principles position the masthead, competition and main content strategically to guide the reader's eye across the page.
What Great WordPress Sites Look Like
This document provides guidance on designing effective websites that keep readers engaged. It emphasizes simple, clean design with easy-to-read text and intuitive navigation. Key recommendations include using a small logo, latest content on the home page with no scrolling, and ensuring the design is responsive across different devices. The document outlines 10 rules for successful website design, such as focusing on the user's needs and keeping the background and menus simple.
Web
The document outlines plans for an Arctic website, including consistent elements from an iBook such as colors, fonts, and photos. The website will have a sidebar for additional information, main content at the top of pages to avoid scrolling, and a similar visual style to environmental organization websites. It will also have a clear navigation reflecting the iBook structure and allow easy movement between pages.
WordPress and Child Themes
This document discusses WordPress themes and child themes. It begins by defining what a theme is and what themes do. It then explains what components make up a theme. The document recommends choosing a theme based on UI/UX rather than functionality so that functionality can be added and retained through plugins. It defines what a child theme is and how it allows customizing a parent theme while keeping customizations separate. The document provides instructions for manually creating a child theme and using a plugin. It discusses best practices for working with child themes such as overriding parent templates.
Superintelligence2525 v05122018
This document discusses Friedel Jonker's website and outlines requirements for the Superintelligence2525 project. It recommends using various apps and software like Scrivener, Fences, NextOS, TheBrain, Flip PDF Reader, and Dropbox across Windows, Mac, iPad, and iPhone devices to organize your desktop, use an AI assistant, contextualize thoughts, and achieve peak performance as part of the KnowMO4Me High Performance Worksystem architecture.
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
This document discusses responsive vs mobile themes in Magento. A responsive theme uses the same codebase with fluid layouts and media queries to adapt to different screen sizes. A mobile theme is a separate codebase optimized for mobile. It takes 75% less time to create a responsive theme compared to a separate mobile theme. Whether a responsive or mobile theme is better depends on the specific website and its users. Examples are provided of sites where responsive vs mobile themes make more sense. Technologies for responsive design like Bootstrap and strategies like mobile-first are also covered. The document provides examples of implementing responsive and mobile themes in Magento.
Publish slides to instagram in 5 easy steps
Authoring content for Instagram is not easy for many people.
It's easier to work with simple desktop tools like Keynote and PowerPoint and then easily publish this content for Instagram.
This is a five step recipe for authoring with ease.
Facebook cover photo template
This template provides instructions for customizing a blank slide to use as a Facebook cover photo. Users can insert pictures, shapes, fonts, and colors to create a unique graphic for their business page. When finished designing, the slide needs to be saved as a picture and uploaded to Facebook to become the new cover photo. The blank slide is already sized to Facebook's dimensions and blocks off space for the main profile photo.
Recommended
Contents analyse
This document discusses the design of a magazine contents page. It has a large main image in the primary optical area to attract readers. Secondary images and balanced layout with even distribution of images and text. The house style follows Kerrang magazine's conventions with a serif font masthead and subtitles in the same font. Design principles position the masthead, competition and main content strategically to guide the reader's eye across the page.
What Great WordPress Sites Look Like
This document provides guidance on designing effective websites that keep readers engaged. It emphasizes simple, clean design with easy-to-read text and intuitive navigation. Key recommendations include using a small logo, latest content on the home page with no scrolling, and ensuring the design is responsive across different devices. The document outlines 10 rules for successful website design, such as focusing on the user's needs and keeping the background and menus simple.
Web
The document outlines plans for an Arctic website, including consistent elements from an iBook such as colors, fonts, and photos. The website will have a sidebar for additional information, main content at the top of pages to avoid scrolling, and a similar visual style to environmental organization websites. It will also have a clear navigation reflecting the iBook structure and allow easy movement between pages.
WordPress and Child Themes
This document discusses WordPress themes and child themes. It begins by defining what a theme is and what themes do. It then explains what components make up a theme. The document recommends choosing a theme based on UI/UX rather than functionality so that functionality can be added and retained through plugins. It defines what a child theme is and how it allows customizing a parent theme while keeping customizations separate. The document provides instructions for manually creating a child theme and using a plugin. It discusses best practices for working with child themes such as overriding parent templates.
Superintelligence2525 v05122018
This document discusses Friedel Jonker's website and outlines requirements for the Superintelligence2525 project. It recommends using various apps and software like Scrivener, Fences, NextOS, TheBrain, Flip PDF Reader, and Dropbox across Windows, Mac, iPad, and iPhone devices to organize your desktop, use an AI assistant, contextualize thoughts, and achieve peak performance as part of the KnowMO4Me High Performance Worksystem architecture.
Responsive Vs Mobile Development in Magento - Kimberly Thomas - @MagentoGirl
This document discusses responsive vs mobile themes in Magento. A responsive theme uses the same codebase with fluid layouts and media queries to adapt to different screen sizes. A mobile theme is a separate codebase optimized for mobile. It takes 75% less time to create a responsive theme compared to a separate mobile theme. Whether a responsive or mobile theme is better depends on the specific website and its users. Examples are provided of sites where responsive vs mobile themes make more sense. Technologies for responsive design like Bootstrap and strategies like mobile-first are also covered. The document provides examples of implementing responsive and mobile themes in Magento.
Publish slides to instagram in 5 easy steps
Authoring content for Instagram is not easy for many people.
It's easier to work with simple desktop tools like Keynote and PowerPoint and then easily publish this content for Instagram.
This is a five step recipe for authoring with ease.
Facebook cover photo template
This template provides instructions for customizing a blank slide to use as a Facebook cover photo. Users can insert pictures, shapes, fonts, and colors to create a unique graphic for their business page. When finished designing, the slide needs to be saved as a picture and uploaded to Facebook to become the new cover photo. The blank slide is already sized to Facebook's dimensions and blocks off space for the main profile photo.
Get It Going With Genesis
Install the Genesis theme without activating it. Then install and activate a child theme. This will take you to the Theme Settings. Make sure your RSS feed is set to active by accessing settings through Publicize and Feedburner. Genesis provides more widget options and flexibility than other themes. You can duplicate widgetized areas by copying code from functions.php and adding new widgetized sections in home.php while updating styles in style.css.
Question 6
I have learned about various photography and design technologies through constructing this product. I used a Canon 1200D DSLR camera with an 18-55mm lens along with studio lighting equipment including Bowens Gemini 250 flashes, softboxes, and tripods. Software tools like Adobe Photoshop CS6 and Adobe InDesign CS6 were used to edit photos, layout pages, and place text and images. Different shutter speeds, F-stops, and ISOs were required depending on the lighting conditions.
Wdes105 day 2
This document discusses different CSS layout types including fixed width, liquid, and responsive designs. It defines the advantages and disadvantages of each type as well as features that characterize them. Examples are provided of websites that use fixed width, liquid, and responsive designs. Guidelines are offered for determining if a site uses responsive design and tools are presented for cross-browser testing and reviewing responsive design projects. The deliverable is to build a website highlighting projects from graduating students using techniques learned.
Online platform for ict content development
This document discusses principles of good web page design. It divides the class into groups to discuss and evaluate elements of web page design. These include using a text or web editor, designing for the web vs print, using layout, color, fonts, headings, graphics, writing for the web, and evaluating web pages. The goal is to understand how to design effective and well-organized web pages.
The Mobile Revolution
The document discusses responsive web design for SharePoint sites, noting that responsive design uses fluid grids and CSS media queries to adjust layout as the screen width decreases, allowing all content to remain visible and adapt to different devices. It provides an overview of common responsive design breakpoints and the differences between responsive and adaptive designs, with responsive focusing on content and adaptive on presentation that can hide or not present elements based on screen width.
FACTUAL PAGE LAYOUT- TASK 3
This document analyzes the page layout of a double page spread. It discusses several key design elements: the discrete heading is placed in the top right corner rather than centered; page numbers are highlighted in the bottom right; columns span the full width of the pages to minimize whitespace around a large central photograph; drop caps are used at the start of paragraphs, including a large colored 'L' that may function as a watermark; margins are only used at the top due to the dense design; and basic grids and outlines define the structure without rigid formatting. In summary, the layout makes innovative use of design principles to maximize content within the constraints of the dense photographic spread.
Current Design Trends
This document discusses current design trends for websites, including mobile first design, responsive design, and content layout best practices. It emphasizes that websites should be designed first for mobile with responsive elements that scale across devices. Proper content layout and balancing elements, images, and text are also covered. The document suggests design ideas for the future, such as minimalist landing pages, grid systems, and incorporating social media.
Onetone theme review
This document provides an overview and review of the Onetone single page WordPress theme. It discusses the rising trend of single page websites and how Onetone is designed as an ultimate single page theme. Key features that are included in both the free and pro versions are outlined such as flexible design, responsiveness, shortcodes, and support. Additional pro features are also highlighted like demo importing, WooCommerce support, video backgrounds, and 600+ Google fonts. Overall, the theme is presented as a fully customizable one page solution for users to create marketing sites, landing pages, and online shops.
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for ContentNational Information Standards Organization (NISO)
This document summarizes a NISO webinar on adaptive interfaces for content across devices. The webinar discussed responsive web design principles like fluid grids and flexible images that allow one website to adapt to different screen sizes. It also covered progressive enhancement approaches for ebooks, including starting with basic HTML5 semantics and reflowable EPUB before adding features for specific devices. Speakers encouraged testing designs on actual devices, and emphasized planning content structures and device support to facilitate accessibility and distribution.Web Design 101
Basic stuff on designing for the web.
Go to http://www.clipsoflogic.com/2011/09/06/web-design-101/ for full list of links
Flex Web Development.pdf
Flexbox is a relatively new front-end feature that greatly simplifies the process of creating a responsive website layout. In the past, in order to create a layout that looked good on a website, you had to use tables or float grids. Furthermore, those approaches aren't the most effective for responsive design, which ensures that the website looks good on desktop, tablet, and mobile platforms. Learn how to use flexbox if you want to stay up to date Flex Web Development with web development trends.
Responsive Web Design
- Responsive web design involves creating interfaces that work across a variety of screen resolutions using CSS3 media queries and fluid design.
- Designers should start with a mobile-first approach, designing the interface for mobile and expanding it for larger screens.
- Key techniques include using flexible units like percentages and ems, responsive images, and media queries to trigger layout changes at breakpoint widths. Frameworks can help implement responsive grids.
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Marcos Corro, Designer & Developer Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts
WDEV118 Overview
This module introduces designing for mobile devices and all platforms using responsive design. Students will learn to design mobile sites without scripting using media queries and fluid layout techniques. Exercises include designing a mobile version of an existing site at 320px wide, making it usable on any size screen, and optimizing it for all screen sizes using responsive techniques.
Customizing WordPress Themes
This document discusses customizing WordPress themes. It begins by introducing the author and his experience with WordPress design. It then outlines a two part process for customizing themes: planning and designing in Photoshop, then implementing changes through CSS, PHP templates, and plugins. Specific examples are provided on customizing navigation, plugins, and page templates through simple CSS and code additions. Responsive design considerations are also addressed. The goal is to demonstrate how beginners can make visual enhancements to themes.
Designing responsive web design in FIGMA
Responsive web design holds your audience and responds to the user’s behavior and environment based on screen size, platform, and orientation. As mentioned above, through Figma you to provide a responsive layout in no time. If you find this useful, please share your thoughts.
Design for the Web
The document discusses design considerations for websites, noting that websites should be easy to use, clearly display content, be consistent with other services, and provide factual and relevant information. It then reviews examples of different websites that demonstrate traits like tiled backgrounds, room for large images, obvious navigation, centered full-size background images, and clean flat designs. Finally, it outlines ideas for the author's own website, incorporating full-size background images, simple navigation, responsiveness on different devices, and concise factual information with an overall cool theme.
Responsive Web Design for Drupal, CMS Expo
This document provides an overview and agenda for a workshop on responsive web design for Drupal. It begins with a whirlwind tour of responsive design principles, then covers using base themes in Drupal and applying responsive techniques to Drupal sites. It includes case studies on retrofitting an existing site to be responsive and using the Fusion base theme. The document emphasizes planning breakpoints based on content, using flexible grids and media queries, and ensuring navigation and content remain usable across screen sizes.
The future of BYU web design
The document discusses redesigning the BYU website to be more responsive and adaptive to different screen sizes. It notes that the current layout is outdated since it was designed in 2007 for 1024x768 screens. Modern browsers come in a variety of sizes from mobile to desktop and beyond. The document recommends a mobile-first approach using responsive web design techniques like flexible grids, fluid images, and media queries to dynamically serve optimized layouts depending on screen width. It also advocates progressive enhancement and polyfills to gracefully support older browsers.
University of Portsmouth Library: A practical approach to Responsive Design
'A practical approach to responsive design by the University of Portsmouth Library':Colin Work from the University of Portsmouth outlines how they used TERMINALFOUR Site Manager to make the Portsmouth Library sites responsive. The approach, the challenges, lessons learned and more.
HTML5 apps for iOS (and probably beyond)
The document discusses building HTML5 apps for iOS devices. Key points include:
- HTML5 apps can be installed on devices, are cross-platform, and can be built and deployed quickly using familiar web techniques.
- The document provides an example of an HTML5 notecard app called UNFLappABLE that stores user data locally for offline use.
- Design considerations for touch interfaces, responsive layouts, and high-resolution graphics are discussed. Techniques like media queries, app caching, and local storage are also covered.
Webdesign New
The document provides guidance on designing effective websites. It discusses why design is important for usability and aesthetics. It then covers common website structures and elements like navigation, layouts, use of color and images. The key recommendations are to keep designs simple, consistent and prioritize important information above the page fold. Color contrasts and readable typography are also emphasized.
More Related Content
What's hot
Get It Going With Genesis
Install the Genesis theme without activating it. Then install and activate a child theme. This will take you to the Theme Settings. Make sure your RSS feed is set to active by accessing settings through Publicize and Feedburner. Genesis provides more widget options and flexibility than other themes. You can duplicate widgetized areas by copying code from functions.php and adding new widgetized sections in home.php while updating styles in style.css.
Question 6
I have learned about various photography and design technologies through constructing this product. I used a Canon 1200D DSLR camera with an 18-55mm lens along with studio lighting equipment including Bowens Gemini 250 flashes, softboxes, and tripods. Software tools like Adobe Photoshop CS6 and Adobe InDesign CS6 were used to edit photos, layout pages, and place text and images. Different shutter speeds, F-stops, and ISOs were required depending on the lighting conditions.
Wdes105 day 2
This document discusses different CSS layout types including fixed width, liquid, and responsive designs. It defines the advantages and disadvantages of each type as well as features that characterize them. Examples are provided of websites that use fixed width, liquid, and responsive designs. Guidelines are offered for determining if a site uses responsive design and tools are presented for cross-browser testing and reviewing responsive design projects. The deliverable is to build a website highlighting projects from graduating students using techniques learned.
Online platform for ict content development
This document discusses principles of good web page design. It divides the class into groups to discuss and evaluate elements of web page design. These include using a text or web editor, designing for the web vs print, using layout, color, fonts, headings, graphics, writing for the web, and evaluating web pages. The goal is to understand how to design effective and well-organized web pages.
The Mobile Revolution
The document discusses responsive web design for SharePoint sites, noting that responsive design uses fluid grids and CSS media queries to adjust layout as the screen width decreases, allowing all content to remain visible and adapt to different devices. It provides an overview of common responsive design breakpoints and the differences between responsive and adaptive designs, with responsive focusing on content and adaptive on presentation that can hide or not present elements based on screen width.
FACTUAL PAGE LAYOUT- TASK 3
This document analyzes the page layout of a double page spread. It discusses several key design elements: the discrete heading is placed in the top right corner rather than centered; page numbers are highlighted in the bottom right; columns span the full width of the pages to minimize whitespace around a large central photograph; drop caps are used at the start of paragraphs, including a large colored 'L' that may function as a watermark; margins are only used at the top due to the dense design; and basic grids and outlines define the structure without rigid formatting. In summary, the layout makes innovative use of design principles to maximize content within the constraints of the dense photographic spread.
What's hot (6)
Similar to Responsive web design: WordUp Pompey! Feb-2012
Current Design Trends
This document discusses current design trends for websites, including mobile first design, responsive design, and content layout best practices. It emphasizes that websites should be designed first for mobile with responsive elements that scale across devices. Proper content layout and balancing elements, images, and text are also covered. The document suggests design ideas for the future, such as minimalist landing pages, grid systems, and incorporating social media.
Onetone theme review
This document provides an overview and review of the Onetone single page WordPress theme. It discusses the rising trend of single page websites and how Onetone is designed as an ultimate single page theme. Key features that are included in both the free and pro versions are outlined such as flexible design, responsiveness, shortcodes, and support. Additional pro features are also highlighted like demo importing, WooCommerce support, video backgrounds, and 600+ Google fonts. Overall, the theme is presented as a fully customizable one page solution for users to create marketing sites, landing pages, and online shops.
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for ContentNational Information Standards Organization (NISO)
This document summarizes a NISO webinar on adaptive interfaces for content across devices. The webinar discussed responsive web design principles like fluid grids and flexible images that allow one website to adapt to different screen sizes. It also covered progressive enhancement approaches for ebooks, including starting with basic HTML5 semantics and reflowable EPUB before adding features for specific devices. Speakers encouraged testing designs on actual devices, and emphasized planning content structures and device support to facilitate accessibility and distribution.Web Design 101
Basic stuff on designing for the web.
Go to http://www.clipsoflogic.com/2011/09/06/web-design-101/ for full list of links
Flex Web Development.pdf
Flexbox is a relatively new front-end feature that greatly simplifies the process of creating a responsive website layout. In the past, in order to create a layout that looked good on a website, you had to use tables or float grids. Furthermore, those approaches aren't the most effective for responsive design, which ensures that the website looks good on desktop, tablet, and mobile platforms. Learn how to use flexbox if you want to stay up to date Flex Web Development with web development trends.
Responsive Web Design
- Responsive web design involves creating interfaces that work across a variety of screen resolutions using CSS3 media queries and fluid design.
- Designers should start with a mobile-first approach, designing the interface for mobile and expanding it for larger screens.
- Key techniques include using flexible units like percentages and ems, responsive images, and media queries to trigger layout changes at breakpoint widths. Frameworks can help implement responsive grids.
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Marcos Corro, Designer & Developer Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts
WDEV118 Overview
This module introduces designing for mobile devices and all platforms using responsive design. Students will learn to design mobile sites without scripting using media queries and fluid layout techniques. Exercises include designing a mobile version of an existing site at 320px wide, making it usable on any size screen, and optimizing it for all screen sizes using responsive techniques.
Customizing WordPress Themes
This document discusses customizing WordPress themes. It begins by introducing the author and his experience with WordPress design. It then outlines a two part process for customizing themes: planning and designing in Photoshop, then implementing changes through CSS, PHP templates, and plugins. Specific examples are provided on customizing navigation, plugins, and page templates through simple CSS and code additions. Responsive design considerations are also addressed. The goal is to demonstrate how beginners can make visual enhancements to themes.
Designing responsive web design in FIGMA
Responsive web design holds your audience and responds to the user’s behavior and environment based on screen size, platform, and orientation. As mentioned above, through Figma you to provide a responsive layout in no time. If you find this useful, please share your thoughts.
Design for the Web
The document discusses design considerations for websites, noting that websites should be easy to use, clearly display content, be consistent with other services, and provide factual and relevant information. It then reviews examples of different websites that demonstrate traits like tiled backgrounds, room for large images, obvious navigation, centered full-size background images, and clean flat designs. Finally, it outlines ideas for the author's own website, incorporating full-size background images, simple navigation, responsiveness on different devices, and concise factual information with an overall cool theme.
Responsive Web Design for Drupal, CMS Expo
This document provides an overview and agenda for a workshop on responsive web design for Drupal. It begins with a whirlwind tour of responsive design principles, then covers using base themes in Drupal and applying responsive techniques to Drupal sites. It includes case studies on retrofitting an existing site to be responsive and using the Fusion base theme. The document emphasizes planning breakpoints based on content, using flexible grids and media queries, and ensuring navigation and content remain usable across screen sizes.
The future of BYU web design
The document discusses redesigning the BYU website to be more responsive and adaptive to different screen sizes. It notes that the current layout is outdated since it was designed in 2007 for 1024x768 screens. Modern browsers come in a variety of sizes from mobile to desktop and beyond. The document recommends a mobile-first approach using responsive web design techniques like flexible grids, fluid images, and media queries to dynamically serve optimized layouts depending on screen width. It also advocates progressive enhancement and polyfills to gracefully support older browsers.
University of Portsmouth Library: A practical approach to Responsive Design
'A practical approach to responsive design by the University of Portsmouth Library':Colin Work from the University of Portsmouth outlines how they used TERMINALFOUR Site Manager to make the Portsmouth Library sites responsive. The approach, the challenges, lessons learned and more.
HTML5 apps for iOS (and probably beyond)
The document discusses building HTML5 apps for iOS devices. Key points include:
- HTML5 apps can be installed on devices, are cross-platform, and can be built and deployed quickly using familiar web techniques.
- The document provides an example of an HTML5 notecard app called UNFLappABLE that stores user data locally for offline use.
- Design considerations for touch interfaces, responsive layouts, and high-resolution graphics are discussed. Techniques like media queries, app caching, and local storage are also covered.
Webdesign New
The document provides guidance on designing effective websites. It discusses why design is important for usability and aesthetics. It then covers common website structures and elements like navigation, layouts, use of color and images. The key recommendations are to keep designs simple, consistent and prioritize important information above the page fold. Color contrasts and readable typography are also emphasized.
Web Usability
Usable websites help users achieve their goals easily, quickly, and pleasantly. Websites should be tested for usability. Key aspects of usability include providing worthwhile content, making navigation easy and quick, using clean design, and ensuring the purpose of the site is clear. Common usability problems include lack of clarity about the site's purpose and slow loading times from overuse of large graphics.
Fewd week3 slides
This document provides an agenda and information for FEWD Week 3. It discusses units of measurement like pixels, percentages and ems. It also covers font sizing, layouts like static, liquid, adaptive and responsive designs. Media queries and flexbox are introduced as tools for responsive layouts. Students are assigned to continue working on the Relaxr project and learn about units, layouts, media queries and flexbox through examples and exercises.
Breaking the Box: Pushing the Boundaries of UX with Drupal
The document discusses pushing the boundaries of user experience with Drupal. It talks about using responsive design and progressive enhancement to build websites that automatically adapt to different screen sizes like desktop, tablet, and mobile. Responsive design uses CSS media queries and a fluid, data-driven approach to layouts. This allows a single website to effectively serve users on any device. The document recommends using responsive frameworks like Omega or Mojo themes for Drupal, and discusses building custom "UX modules" to enhance the user experience for different devices.
Seven sections question 6
Through creating a magazine product, the author learned that designing pages on a computer using software like Photoshop and InDesign is more effective than drawing drafts by hand. Photoshop allowed for easy editing of photos and creation of customized backgrounds and designs. InDesign facilitated putting together the contents page and double page spread. Various online and software tools were used to design different magazine elements.
Similar to Responsive web design: WordUp Pompey! Feb-2012 (20)
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
More from Herb Miller
WordPress - Whats going on in the server?
A short Show and Tell presentation by Herb Miller, Bobbing Wide outlining his work to analyse the effect of configuration changes on server response times.
First presented at Cheltenham WordPress Meetup ( #WPChelt ) on 31st March 2021
My favourite block v0.0.1
An annotated version of the poem entitled "My Favourite Block" presented / performed as a lightning talk at the Portsmouth WordPress Meetup on 15th May 2019.
Posts for the original poem and the annotated version are available from https://herbmiller.me
WordPress block editor v0.0.0
A brief introduction to the WordPress block editor’s features and where to find information about WordPress blocks you might want to use.
A lightning talk by Herb Miller at the WordPress Portsmouth Meetup 15th May 2019
Site Health Check for WordPress
This document discusses doing a site health check to check the PHP version a WordPress site is running. It recommends using the Site Health Check plugin to determine the PHP version and check for any issues. If the PHP version is out of date, the document provides steps to test for compatibility issues, update the version with the hosting provider, and migrate custom code and plugins to newer PHP versions. It also discusses resources for PHP updates and encourages contacting hosting providers for assistance.
WordPress Portsmouth Meetup 20 February 2019 v0.0.1
WordPress Portsmouth Meetup - Introduction to Lightning Talks by Steve Wood, Julia Giles and Scott McKeown
WordPress Portsmouth Meetup 20 March 2019 v0.0.1
WordPress Portsmouth Meetup slides introducing Website Health Check with Jenny Wong @miss_jwo. Sponsored by @RedITcouk and @34SP
Yoast SEO Workshop - WordPress Portsmouth Meetup 16 Jan 2019
WordPress Portsmouth session on website search engine optimisation (SEO). Find out from the SEO experts at Yoast how to get your cat's 7,000 word post about lasagna and other pastas to rank higher in Google for both mobile and desktop searches.
WordPress Portsmouth meetup 20 dec 2018 v0.0.2
The document summarizes an agenda for a WordUp Pompey meetup on December 20th 2018. It includes details on meetup activities from 19:00-20:30 including introductions, Lean Coffee and Lightning Talks, and wrap up. It also lists sponsors RedIT and 34SP and outlines WordUp Pompey meetup plans for 2019 to take place monthly on the 4th Tuesday at Technopole in Portsmouth.
WordPress Portsmouth Meetup - 15 Nov 2018
Practical Security Workshop
Implementing security tips, using WP-Pompey.org.uk, with Herb, Drew, Scott and attendees.
Switching from Canvas to Storefront
The document summarizes an agenda for a WordPress meetup event. It includes details on networking, presentations on switching from one theme to another, and questions and answers. It also lists sponsors and provides information on the venue, pizza sponsor, and social event after the meetup.
WordUp Pompey - September 2018
Agenda for the WordPress Portsmouth Meetup in September 2018. Run as a clinic. Includes items addressed in the previous clinic in July.
WordUp Pompey - July 2018
This document provides an agenda and details for a WordUp Pompey meetup on July 19th 2018. The agenda includes networking from 19:00-19:30, a problem solving clinic from 19:30-20:45, and a wrap up from 20:45-21:00. Following the meetup, there will be a social at Sovereigns pub from 21:00 onwards. The document also lists upcoming WordPress release dates and events, and provides a discount code for a web hosting company for WordUp Pompey members.
WordUp Pompey - June 2018
Introduction to Accessibility- with Abha followed by question and answer session. Difficult questions being deferred for Graham to answer.
Abha from @nonstopnewsuk will give an introduction to web accessibility. She will show how the web can present barriers to some users’ experience and participation, give an insight into some of the tools available to help those with accessibility needs, highlight the work of the WordPress Accessibility team, and explore with attendees how they can learn more about making their sites more accessible.
Graham Armfield’s presentation on accessibility tools will lead on from this and now be held on a new date later this year.
WordUp Pompey - May 2018
Agenda for the WordPress Portsmouth Meetup with Tim Nash from 34sp.com on the subject of "Website security and recovering your site from a hack".
A session to help take the fear out of being hacked, provide some practical tips for how to better protect your website and some of the steps you can take to recover.
WordUp Pompey - April 2018
The document announces a WordUp Pompey meetup on April 18th to discuss GDPR with a talk from @NonStopNewsUK followed by Q&A and networking. The agenda includes informal discussions from 19:00-19:30, the GDPR talk from 19:30-20:45, and wrapping up at 21:00 with socializing at Sovereigns. Upcoming WordPress events include WordCamp Belfast from May 25-27 and the 15th WordPress anniversary on May 27.
WordUp Pompey- March 2018
The document announces a WordUp Pompey networking event on March 15th 2018. The agenda includes networking from 19:00-19:30 to discuss problems, a clinic from 19:30-20:45, and a wrap up at 21:00 followed by socializing at a local venue. Attendees are asked to provide feedback on updating the title and posts on the WordUp Pompey website and reviewing the privacy policy. Future events are announced for April, May, and June on GDPR, security, and an unspecified topic. News items mention the lack of a WordPress 5.0 plan and a bug fix being merged. The document concludes by thanking the venue sponsor and providing information about the upcoming changes
WordUp Pompey - 22nd Feb 2018 - Gutenberg
A new block editor is being built as a feature plugin for potential inclusion in WordPress 5.0. The product is still very much in development. It appears to favour new installations.The absence of a migration plan for existing content is a major concern to some people, especially developers, who are concerned that many sites will be broken. Is this a risk you're prepared to accept?
WordUp Pompey reboot! - 18th Jan 2018
Slides from the the first Portsmouth WordPress Meetup held at the Technopole on 18th January 2018. See https://www.wp-pompey.org.uk/meetup/wordup-pompey-reboot/
Shortcodes: WordUp Pompey! Feb-2012
An overview of shortcodes for WordPress: what, why and how? by Herb Miller, of Bobbing Wide and [oik]-plugins
Slides from WordUp Pompey, held on February 23rd 2012. See also
http://wp-pompey.org.uk/wordup-pompey-wordpress-meetup-for-portsmouth/
WordPress is not just a blog
A short set of slides suggesting that WordPress is not just a blog and it's not just for Christmas. First presented at 4N Petersfield - 20th December 2011, then as an afterthought at WordUp Pompey! - 21st December 2011
More from Herb Miller (20)
WordPress Portsmouth Meetup 20 February 2019 v0.0.1
WordPress Portsmouth Meetup 20 February 2019 v0.0.1
Yoast SEO Workshop - WordPress Portsmouth Meetup 16 Jan 2019
Yoast SEO Workshop - WordPress Portsmouth Meetup 16 Jan 2019
Recently uploaded
Taking AI to the Next Level in Manufacturing.pdf
Read Taking AI to the Next Level in Manufacturing to gain insights on AI adoption in the manufacturing industry, such as:
1. How quickly AI is being implemented in manufacturing.
2. Which barriers stand in the way of AI adoption.
3. How data quality and governance form the backbone of AI.
4. Organizational processes and structures that may inhibit effective AI adoption.
6. Ideas and approaches to help build your organization's AI strategy.
JavaLand 2024: Application Development Green Masterplan
My presentation slides I used at JavaLand 2024
Presentation of the OECD Artificial Intelligence Review of Germany
Consult the full report at https://www.oecd.org/digital/oecd-artificial-intelligence-review-of-germany-609808d6-en.htm
Best 20 SEO Techniques To Improve Website Visibility In SERP
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
June Patch Tuesday
Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
Digital Marketing Trends in 2024 | Guide for Staying Ahead
https://www.wask.co/ebooks/digital-marketing-trends-in-2024
Feeling lost in the digital marketing whirlwind of 2024? Technology is changing, consumer habits are evolving, and staying ahead of the curve feels like a never-ending pursuit. This e-book is your compass. Dive into actionable insights to handle the complexities of modern marketing. From hyper-personalization to the power of user-generated content, learn how to build long-term relationships with your audience and unlock the secrets to success in the ever-shifting digital landscape.
Generating privacy-protected synthetic data using Secludy and Milvus
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
Skybuffer SAM4U tool for SAP license adoption
Manage and optimize your license adoption and consumption with SAM4U, an SAP free customer software asset management tool.
SAM4U, an SAP complimentary software asset management tool for customers, delivers a detailed and well-structured overview of license inventory and usage with a user-friendly interface. We offer a hosted, cost-effective, and performance-optimized SAM4U setup in the Skybuffer Cloud environment. You retain ownership of the system and data, while we manage the ABAP 7.58 infrastructure, ensuring fixed Total Cost of Ownership (TCO) and exceptional services through the SAP Fiori interface.
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Free A4 downloadable and printable Cyber Security, Social Engineering Safety and security Training Posters . Promote security awareness in the home or workplace. Lock them Out From training providers datahops.com
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI, built on the robust SAP Business Technology Platform (SAP BTP), is the latest and most advanced version of our AI development, reaffirming our commitment to delivering top-tier AI solutions. Skybuffer AI harnesses all the innovative capabilities of the SAP BTP in the AI domain, from Conversational AI to cutting-edge Generative AI and Retrieval-Augmented Generation (RAG). It also helps SAP customers safeguard their investments into SAP Conversational AI and ensure a seamless, one-click transition to SAP Business AI.
With Skybuffer AI, various AI models can be integrated into a single communication channel such as Microsoft Teams. This integration empowers business users with insights drawn from SAP backend systems, enterprise documents, and the expansive knowledge of Generative AI. And the best part of it is that it is all managed through our intuitive no-code Action Server interface, requiring no extensive coding knowledge and making the advanced AI accessible to more users.
Public CyberSecurity Awareness Presentation 2024.pptx
Cyber security awareness slides for a busisness by TreeTop Security
Introduction of Cybersecurity with OSS at Code Europe 2024
I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems.
The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS.
Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application.
I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
A Comprehensive Guide to DeFi Development Services in 2024
DeFi represents a paradigm shift in the financial industry. Instead of relying on traditional, centralized institutions like banks, DeFi leverages blockchain technology to create a decentralized network of financial services. This means that financial transactions can occur directly between parties, without intermediaries, using smart contracts on platforms like Ethereum.
In 2024, we are witnessing an explosion of new DeFi projects and protocols, each pushing the boundaries of what’s possible in finance.
In summary, DeFi in 2024 is not just a trend; it’s a revolution that democratizes finance, enhances security and transparency, and fosters continuous innovation. As we proceed through this presentation, we'll explore the various components and services of DeFi in detail, shedding light on how they are transforming the financial landscape.
At Intelisync, we specialize in providing comprehensive DeFi development services tailored to meet the unique needs of our clients. From smart contract development to dApp creation and security audits, we ensure that your DeFi project is built with innovation, security, and scalability in mind. Trust Intelisync to guide you through the intricate landscape of decentralized finance and unlock the full potential of blockchain technology.
Ready to take your DeFi project to the next level? Partner with Intelisync for expert DeFi development services today!
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on integration of Salesforce with Bonterra Impact Management.
Interested in deploying an integration with Salesforce for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
TrustArc Webinar - 2024 Global Privacy Survey
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
Predictive maintenance is a proactive approach that anticipates equipment failures before they happen. At the forefront of this innovative strategy is Artificial Intelligence (AI), which brings unprecedented precision and efficiency. AI in predictive maintenance is transforming industries by reducing downtime, minimizing costs, and enhancing productivity.
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Recently uploaded (20)
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Responsive web design: WordUp Pompey! Feb-2012
- 2. Means... adaptive web pages
- 3. Adaptive web pages ● Work on differently size devices ● May adjust seamlessy during viewport resizing ● Use flexible grids ● And flexible images ● Rely on media queries But you have to decide what you want
- 4. Consider your audience What are they using? Laptop, Desktop, Widescreen, iPhone What will they be using? iPad, Blackberry, Android, X-box, TV, Notepad Consider each device What will they want to see? Where will they want to see it? How will you cater for viewport resizing?
- 5. Widescreen Too wide? the text is below or beside the images. Should the images be allowed to scale larger than 256 or what?
- 6. Laptop Maybe the side bar should have a bigger perccentage of the total width?
- 7. Landscape iPad It seems to fit quite nicely. Though the page title is getting close to the header image
- 8. Landscape iPhone 4 Oh dear, the header's naffed up and the menu has wrapped
- 9. Portrait iPad Header still naff but the menu is better – separator bars and background gradient image have been removed.
- 10. Portrait iPhone 4 Menu reduced to two in a row And the sidebar has dropped below the main content Header is now atrocious
- 11. iPhone 3 Ignoring the header the blocks seem OK but they are too deep in landscape. The background for longer menu items needs sorting too!
- 12. Conclusion? It seems to be a lot of work. And we've only looked at one page? What about forms with text fields and text areas? MORE WORK NEEDED What I didn't say was that I have been working with Artisteer generated themes, so I am actually quite encouraged. I've also been making sure that my oik plugin produces reasonably responsive HTML and CSS. SO WATCH THIS SPACE!
- 13. For more information Read the following books: Responsive Web Design, by Ethan Marcotte (978-0-9844425-7-7) The book of CSS3, by Peter Gasston (978-1-59327-286-9) Visit any responsive web site: and view the HTML source and the CSS